seye2님의 이글루

http://www.joinc.co.kr/modules/moniwiki/wiki.php/Site/Google/Service/GoogleMapAPI

마이크로포맷
http://microformats.org/wiki/
http://suda.co.uk/projects/microformats/cheatsheet/microformats.cheatsheet.pdf

Microformats icons DevKit

A first effort (http://factorycity.net/projects/microformats-icons/)has been completed by Wolfgang Bartelme and Chris Messina to create aseries of web-friendly icons and buttons for microformats.

General

• hAtom
• hCalendar
• hCard Add
• hCard Download
• hResume (button)
• rel-tag (button)
• XFN (button)

Based on the General Icon DevKit:

• hCalendar Download
• hCalendar Add
• hCard
• hAudio Icons (http://notizblog.org/projects/haudio-icons/)

Comments:

• Hober pointed out that bright green seems to be a common color for [eventful.com/images/skin/ical.gif ical chicklets]
• Tantek wonders if the rel-tag button is useful
• ChrisMessina suggest a need for a small 10x10 tag icon
  • square tag
  • Adam suggests 10x10 is a little small, but square is nice
    • PatHawks thinks smaller is better, if the icon is going to sit next to every tag
  • Pfefferle suggests the FamFamFam (http://www.famfamfam.com/lab/icons/silk/) tag-icon:
• Tantek wonders whether we need an hCard Download icon -- since it focuses too much on the "pipes"
• Ron thinks it's ok to use icons, cause it's a nice way ofpromoting the "Microformat idea". Maybe it's a good idea to use adownward aimed arrow to indicate the possibility to "download"something (like an hCard or hResume).
• Adam wonders if a multiple-license, including GPL, might be helpful in increasing adoption among wordpress themes.
• Pfefferle suggests to change the color of the XFN-button into blue, because it uses the rel-attribute like "rel-tag" .

XFN

• rel-me
• rel-friend
  • met
• rel-sweetheart
  • met
• rel-colleague
  • met

Comments:

• Tantek: wonders if a rel-me icon is necessary or appropriate; perhaps something indicating "facets"?
• ChrisMesssina: rel-me is useful in blog posts where you link to other posts that you've written
• Jon Williams13:40, 5 Jan 2007 (PST): I thought "Flickr buddy" when I first sawthese due to the color. Also the pink/blue may annoy people with somegender issues. Maybe we should use green for the sweetheart?
• Pat Hawks12:58, 11 Apr 2008 (CST): Should "crush" and "sweetheart" use the sameicon? Should "colleague" and "co-worker" use the same? Do we need onefor "contact" or "acquaintance" as well?

VoteLinks

VoteLinks (http://microformats.org/wiki/vote-links)

• vote-for
• vote-against
• (download the kit (http://factorycity.net/projects/microformats%2Dicons/files/vote-links.zip))

Comments:

• Steve Ivy: I don't have a good icon for vote-abstain. Recommendations welcome. These are also a tad large to site next to links, perhaps?
  • Andy Mabbett:Is +1/-1 a common way of representing voting? Would ticks and crossesbe better, or thumbs up/ down (or horizontal for abstain)?
    • Steve Ivy: I rather like the icons used by digg (http://digg.com)for voting on comments, but cannot use them for obvious reasons. I'm noiconographer to be honest, but if someone were to createthumbs-up/thumbs-down icons I'd use them instead of these.

Geo

Can be used in the background-image CSS property, next to a geo microformat. It could also indicate that a map opens in a new window:

• 

• (taken from Geotag Icon Project (http://www.geotagicons.com/))

---

Mac

 (http://factoryjoe.com/blog/wp-content/uploads/2006/08/mf-icons.zip)

These icons (http://factoryjoe.com/blog/wp-content/uploads/2006/08/mf-icons.zip) can be used for folders or files on your Mac. You can use a tool like Pixadex (http://iconfactory.com/software/pixadex) for managing and applying them.

Created by Chris Messina

Microformat Button

I've made a button for microformats. Since there are so manymicroformats and with more to come, just indicating support/ use ofmight be a good generic approach. The image is free to use. Please copyit to your own hosting account and not link to it.

I already have a "I use " on my blog: http://doncrowley.blogspot.com/

- Don Crowley

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

hCalendar

• 
• 
• CSS-powered button from Midgard CMS - Event calendar (http://www.midgard-project.org/community/events/):

››› hCalendar

Code (white space added for readability):

<span class="badge" 
      style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0;
      border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none;
      text-align: center;">
 <span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em; 
       margin-right: 0.1em;">
 &#8250;&#8250;&#8250;
 </span> 
 hCalendar
</span>

hCard

• (mirror: )
• 
• 
• CSS-powered button, as evidenced at microformat badges @ re-run (http://re-run.com/about/microformat-badges)

rel-license

• 
• 

rel-nofollow

• 
• 

rel-tag

• 
• 
• 

VoteLinks

• 
• 

XFN (http://gmpg.org/xfn/)

• 
• 

XMDP (http://gmpg.org/xmdp/)

• 
• 

XOXO

• 
• 

CSS Styles for microformats

I'm not sure wether this can be under buttons, but I don't knowwhere else to put it. This is a stylesheet containing styles for mostmicroformats. And, it's automatic. I release it under the cc by-sa.Please note that I am new to microformats, and if you can improve this,please do. Mac Lover 13:25, 13 Apr 2007 (PDT)

License (http://creativecommons.org/licenses/by-sa/3.0/us/)Zip

ie8 - inline ( form이 영역을 제대로 잡지 못하고 위,아래 여백이 생김 )

FF3 - block, inline

ie6 - inline

ie7 - block, inline

ie8 - block


ie8 버그

document.compatMode
document 가 Quirks mode 인지 Strict mode 인지 판별

* Syntax
mode = document.compatMode

mode
BackCompat(Quirks mode) - Standards-compliant mode off
CSS1Compat(Strict mode) - Standards-compliant mode on

* remark

With Microsoft Internet Explorer 6 and later, you switch on
standards-compliant mode by including the !DOCTYPE declaration at the
top of your document, specifying a valid Label in the declaration, and
in some cases, specifying the Definition and/or URL. The Label
specifies the unique name of the Document Type Definition (DTD), and
can be appended with the version number of the DTD. The Definition
specifies the definition of the DTD that is specified in the Label.
The URL specifies the location of the DTD.

When standards-compliant mode is switched on,
Internet Explorer renders the document in compliance with the
Cascading Style Sheets (CSS), Level 1 (CSS1) standard.
When standards-compliant mode is not switched on, rendering behavior is
consistent with previous versions of Internet Explorer.

원본 위치


* Mozilla
http://developer.mozilla.org/en/docs/DOM:document.compatMode

Mozilla Quirks Mode
http://developer.mozilla.org/en/docs/Mozilla%27s_Quirks_Mode

Mozilla Quirks Mode VS Standard mode
http://developer.mozilla.org/en/docs/Mozilla_Quirks_Mode_Behavior