마이크로포맷(Microformat)

웹문서의 접근성을 높이는 또 다른 방법을 알아봅니다.

마이크로포맷이란?

마이크로포맷은 HTML의 부족한 정보 전달성을 보완하고자 개발된 규칙적인 방법론이다. 이것은 사람이 읽어 내는 정보를 기계도 이해할 수 있도록 일정한 패턴을 기술함으로써, 이 규칙을 준수한 웹페이지에서 정보를 읽어내도록 애플리케이션을 개발할 수 있게한다.

웹에 게재된 정보를 재사용하고, 재분류하여 다양한 범위에서 활용할 수 있도록 하는 것이 궁긍적인 목적이라 할 수 있다.

• class : 마이크로포맷의 가변적인 정보를 정의하는 기본 속성
• rel : 링크와 연결되어 있는 문서와의 관계를 정의하는 속성
• rev : 링크와 연결되어 있는 문서와의 역관계를 정의하는 속성

현재는 마이크로포맷2가 워밍업을 하고 있다.

마이크로포맷2

마이크로포맷2는 HTML에서 구조화된 정보를 마크업하는 가장 간단한 방법이다. 마이크로포맷2는 아래와 같은 단순화를 거쳐 저자(발행인)와 개발자 모두에게 사용의 용이성 및 구현을 향상시켰다.

• 마이크로포맷을 사용하기위해 클래스(class) 명에 prefix(접두사)를 붙인다. 'h-', 'p-', 'u-', 'dt-', 'e-'로 시작하게 되며, 어휘에서 독립되어 개별적으로 개발 될 수 있게한다.
  • 'h-*' 는 root class 명이다(e.g. 'h-card', 'h-event', 'h-entry')
  • 'p-*' 는 단순한(text) 속성이다(e.g. 'p-fn', 'p-summary')
  • 'u-*' 는 URL 속성이다(e.g. 'u-url', 'u-photo', 'u-logo')
  • 'dt-*' 는 날짜/시간 속성이다(e.g. 'dt-start', 'dt-end', 'dt-baby')
  • 'e-*' 는 embedded 마크업 속성이다(e.g. 'e-note', 'e-content')
• 모든 마이크로 포맷들은 루트와 속성들의 집합으로 구성된다. 계층적인 데이터는 일반적으로 속성 그 자신이 값이 값이되고 중첩된 마이크로포맷으로 표현된다. 속성들은 선택적으로 사용가능하고 다중으로 사용될 수 있다.
• 일반적인 간단한 마크업 패턴은 몇가지 일반적인 속성들을 찾기위해 마이크로 포맷은 단일의 루트 클래스명을 필요로 한다(name, url, photo).

원문 확인 : http://microformats.org/wiki/microformats2

마이크로포맷 문법 및 사용예

마이크로포맷이 마이크로포맷2로 업데이트 되어,

h-adr

h-adr은 실제 주소 또는 우편 주소와 같은 구조화된 위치를 게시하는 오픈 포맷으로, 기존 adr이 업데이트 된 것이다. 일반적으로 h-card나 h-event의 일부분으로서 사용된다.

간단한 우편 주소의 예는 다음과 같다 :

<p class="h-adr">
  <span class="p-street-address">17 Austerstræti</span>
  <span class="p-locality">Reykjavík</span>
  <span class="p-country-name">Iceland</span>
  <span class="p-postal-code">107</span>
</p>

h-adr은 루트 클래스 명으로, 이 클래스를 가진 요소의 내부에 포함되는 속성들은 아래와 같다.

• p-street-address : 집/아파트 호수, 층수, 거리명
• p-extended-address : 추가적인 거리 상세 설명
• p-post-office-box : 우체국 사서함
• p-locality : 도시/마을,동,읍
• p-region : 주/군
• p-postal-code : 우편번호
• p-country-name : 국가의 전체이름, 국가 코드(KO)
• p-label : 우편물 레이블, 일반 텍스트, 사전 형식화된…
• p-geo (혹은 u-geo) : 선택적으로 h-geo 포함한다.
• p-latitude : 소수점 위도
• p-longitude : 소수점 경도
• p-altitude : 소수점 고도

모든 속성들은 선택적으로 사용하면 된다.

country code(국가 코드)

주소를 마크업 할때 p-country-name 속성에 국가코드를 사용할 수 있다(UK, KO). 다만 전체 나라이름을 적는게 더 완벽한 방법이다.

<abbr class="p-country-name" title="United Kingdom">UK</abbr>

h-card

h-card는 웹에서 사람과 조직을 게시하는 오픈 포맷으로, hCard가 업데이트 된 것이다.

단순한 예제 :

<a class="h-card" href="http://example.com">Joe Bloggs</a>

위의 예제는 함축적인 의미에서 작성된 것이다.

더 완벽한 예제 :

<p class="h-card">
  <img class="u-photo" src="http://example.org/photo.png" alt="" />
  <a class="p-name u-url" href="http://example.org">Joe Bloggs</a>
  <a class="u-email" href="mailto:joebloggs@example.com">joebloggs@example.com</a>, 
  <span class="p-street-address">17 Austerstræti</span>
  <span class="p-locality">Reykjavík</span>
  <span class="p-country-name">Iceland</span>
</p>

h-card는 루트 클래스 명으로, 이 클래스를 가진 요소의 내부에 포함되는 속성들은 아래와 같다.

• p-name : 사람 혹은 조직, 단체의 전체 이름
• p-honorific-prefix : Mrs. , Mr. , Dr.
• p-given-name : 첫 번째 이름
• p-additional-name : 중간 이름
• p-family-name : 성
• p-sort-string : 정렬기준 문자열?? ( string to sort by)
• p-honorific-suffix : 경칭의 접미사? (Ph.D, Esq.)
• p-nickname : 별명/애칭/직함
• u-email : 이메일 주소
• u-logo
• u-photo
• u-url : 홈페이지
• u-uid : 유일한 식별자
• p-category : 카테고리/태그
• p-adr : 우편 주소, h-adr의 내용을 선택적으로 포함시키킬 수 있다.
• p-post-office-box
• p-extended-address
• p-street-address : 거리 번호 + 이름
• p-locality : 도시/마을/읍
• p-region : 주/국가/지역
• p-postal-code : 우편 번호
• p-country-name : 국가 이름
• p-label
• p-geo 혹은 u-geo : 선택적으로 h-geo를 포함한다.
• p-latitude : 소수점 위도
• p-longitude : 소수점 경도
• p-altitude : 소수점 고도
• p-tel : 전화번호
• p-note : 추가적인 메모
• dt-bday : 생일
• u-key : cryptographic public key e.g. SSH or GPG
• p-org : 특별히 관계를 맺고 있는 조직,단체,회사
• p-job-title : 직책, previously ‘title’ in hCard, disambiguated.
• p-role : 역할 설명(조직 단체의)
• u-impp: per RFC 4770, new in vCard4 (RFC6350)
• p-sex : 생물학적 성별
• p-gender : 성 정체성
• dt-anniversary : 기념일

주소부분에 p-adr를 사용할때 h-adr과 관련된 부분을 포함시킬 수 있다. 위의 예제에 이를 추가해보자.

<div class="h-card">
  <p class="p-name">Joe Bloggs</p>
  <p class="p-adr h-adr">
    <span class="p-street-address">17 Austerstræti</span>
    <span class="p-locality">Reykjavík</span>
    <span class="p-country-name">Iceland</span>
  </p>
</div>

p-tel

p-tel과 값이 일정한 값을 가지게 되는 경우는 Value Class Pattern이라는 또 다른 규칙이 있다. 이 클래스 패턴 값은 단순 문자열, 열거되는 값, 전화 번호, 날짜시간 과 같은 속성들에 적용된다.

<span class="tel">
  <span class="type">Home</span>:
  <span class="value">+1.415.555.1212</span>
</span>

값은 경우에 따라, 여러가지가 정의될 수도 있다.

<span class="tel">
  <span class="type">Home</span>:
  <span class="value">+44</span> (0) <span class="value">1223 123 123</span>
</span>

날짜와 시간 값

몇몇의 마이크로포맷 속성들은 ISO8601 datetime 값을 사용한다. (hCalendar 의 dtstart 와 dtend를 사용하고, hAtom의 published와 updated, 그리고 모든 마이크로포맷2의 dt-* 속성들)

hCalendar의 dtstart 속성들과 값의 예이다 :

<p>The weekly dinner will be on 
    <span class="dtstart">
        <time class="value" datetime="2008-06-24">this Tuesday</time> 
     at <time class="value">18:30</time>
    </span>
</p>

h-entry

h-entry는 웹에 에피소드나 날짜가 표시된 콘텐츠에 대한 오픈 포맷으로, 신문,잡지,블로그등의 콘텐츠에 자주 사용된다. h-entry는 hAtom의 hentry가 업데이트된 마이크로2 포맷이다.

블로그 포스트의 예 :

<article class="h-entry">
  <h1 class="p-name">Microformats are amazing</h1>
  <p>Published by <a class="p-author h-card" href="http://example.com">W. Developer</a>
     on <time class="dt-published" datetime="2013-06-13 12:00:00">13<sup>th</sup> June 2013</time>

  <p class="p-summary">In which I extoll the virtues of using microformats.</p>

  <div class="e-content">
    <p>Blah blah blah</p>
  </div>
</article>

h-entry는 루트 클래스 명으로, 이 클래스를 가진 요소의 내부에 포함되는 속성들은 아래와 같다.

• p-name : 엔트리 이름/제목
• p-summary : 엔트리의 요약
• e-content : 엔트리의 전체 내용
• dt-published : 엔트리를 게시되었을 때
• dt-updated : 엔트리가 업데이트 되었을 때
• p-author : 엔트리의 작성자, 선택적으로 h-card 포함한다.
• p-category : 엔트리 카테고리들/태그들
• u-url : 엔트리 고유주소 URL
• u-uid : 유일한 엔트리 ID
• p-location : location the entry was posted from, optionally embed h-card, h-adr, or h-geo

아래의 속성들은 실험적인 것들이다.

• p-comment : h-entry에 대한 각각의 코멘트 응답에 선택적으로 사용한다. (자세한 설명)
  이하 생략…

아래의 속성들은 다양한 링크 미리보기 마크업에 기초하여 추가되었지만, 아직 일반화 되지 않았다.

• u-photo : 엔트리의 대표 사진이나 이미지(대표 이미지로 사용될 기사나 주제의 잘린 사진)
• u-audio : consider special u- parsing rules for <audio>
• u-video : consider special u- parsing rules for <video>

모든 속성은 선택으로 사용 가능하다.

h-event

웹에 게시되는 이벤트 오픈 포맷으로, hCalendar가 업데이트된 마이크로포맷2이다.

<div class="h-event">
  <h1 class="p-name">Microformats Meetup</h1>
  <p>From 
    <time class="dt-start" datetime="2013-06-30 12:00">30<sup>th</sup> June 2013, 12:00</time>
    to <time class="dt-end" datetime="2013-06-30 18:00">18:00</time>
    at <span class="p-location">Some bar in SF</span></p>
  <p class="p-summary">Get together and discuss all things microformats-related.</p>
</div>

h-event는 루트 클래스명으로, 이 클래스를 가진 요소의 내부에 포함되는 속성들은 아래와 같다.

• p-name : 이벤트 명( 혹은 제목)
• p-summary : 이벤트의 요약
• dt-start : 이벤트가 시작되는 datetime
• dt-end : 이벤트가 끝나는 datetime
• dt-duration : 이벤트 기간
• p-description : 이벤트에 대한 더 자세한 설명
• u-url : 이벤트의 고유주소
• p-category : 이벤트 카테고리들/태그들
• p-location : 이벤트가 개최되는 장소, 선택적으로 h-card, h-adr 혹은 h-geo 포함한다.

아래의 속성은 아직 공식적으로 h-entry 스펙은 아니지만 현재 많이들 사용하고 있다.

• p-attendee : 행사에 참석하는 사람, 선택적으로 h-card를 포함한다.

모든 속성은 선택으로 사용 가능하다.

h-geo

웹에 게시되는 지리적 좌표의 오픈 포맷으로, geo가 업데이트된 마이크로포맷2이다.

<p class="h-geo">
  <span class="p-latitude">-27.116667</span>,
  <span class="p-longitude">-109.366667</span>
</p>

h-geo는 루트 클래스명으로, 이 클래스를 가진 요소의 내부에 포함되는 속성들은 아래와 같다.

• p-latitude : 소수점 위도
• p-longitude : 소수점 경도
• p-altitude : 소수점 고도

위의 소수점으로 표기하는 값이 사람이 읽기 어려울 수 있어 그에 대한 대체법을 제시할 수 있는데 아래와 같이 value 속성을 이용해 기기에게 알리고 사람은 잘 알려진 기호를 사용해서 읽을 수 있도록 편의를 제공한다.

<p class="h-geo">
  <data class="p-longitude" value="-27.116667">27° 7′ 0″ S</data>,
  <data class="p-latitude" value="-109.366667">109° 22′ 0″ W</data>
</p>

모든 속성은 선택으로 사용 가능하다.

h-item

h-item은 웹에 게시되는 임의의 항목에 대한 게시 정보에 대한 오픈 포맷이다.

h-item에 의해 정의된 유일한 속성은 p-name, u-url, u-photo 이다.

<a class="h-item" href="http://example.org/items/1">
  <img src="http://example.org/items/1/photo.png" alt="" />
  The Item Name
</a>

• p-name : 아이템 명
• u-url : 고유주소 URL
• u-photo : 사진 URL

모든 속성은 선택으로 사용 가능하다.

h-product

h-product는 웹에 게시되는 제품 자료(data)를 위한 오픈 포맷으로, hProduct가 업데이트된 마이크로포맷2이다.

<div class="h-product">
  <h1 class="p-name">Microformats For Dummies</h1>
  <img class="u-photo" src="http://example.org/mfd.png" alt="" />
  <div class="e-description">
    <p>Want to get started using microformats, but intimidated by hyphens and mediawiki? This book contains everything you need to know!</p>
  </div>
  <p>Yours today for only <data class="p-price" value="20.00">$20.00</data>
     from <a class="p-brand h-card" href="http://example.com/acme">ACME Publishing inc.</a>
  </p>
</div>

h-product는 루트 클래스명으로, 이 클래스를 가진 요소의 내부에 포함되는 속성들은 아래와 같다.

• p-name : 제품의 이름
• u-photo : 제품의 사진
• p-brand : 제조업자, h-card를 포함할 수 있다.
• p-category : 자유로운 범주(카테고리) 혹은 리뷰어에 의해 항목에 적용된 태그들
• e-description
• u-url : 제품의 URL
• u-identifier : 유형(e.g. mpn, upc, isbn, issn, sn, vin, sku etc.)과 값 포함한다.
• p-review : 제품의 리뷰, 선택적으로 h-review를 포함한다.
• p-price : 제품의 정가

모든 속성은 선택으로 사용 가능하다.

h-recipe

h-recipe는 웹에 레시피를 게시하는 오픈 포맷으로, hRecipe가 업데이트된 마이크로포맷2이다.

<article class="h-recipe">
  <h1 class="p-name">Bagels</h1>

  <ul>
    <li class="p-ingredient">Flour</li>
    <li class="p-ingredient">Sugar</li>
    <li class="p-ingredient">Yeast</li>
  </ul>

  <p>Takes <time class="dt-duration" datetime="1H">1 hour</time>,
     serves <data class="p-yield" value="4">four people</data>.</p>

  <div class="e-instructions">
    <ol>
      <li>Start by mixing all the ingredients together.</li>
    </ol>
  </div>
</article>

h-recipe는 루트 클래스명으로, 이 클래스를 가진 요소의 내부에 포함되는 속성들은 아래와 같다.

• p-name : 조리법의 이름
• p-ingredient : 조리법에 사용되는 하나 이상의 성분에 대해 설명한다.
• p-yield : 조립법에 의해 생성되는 양을 지정한다.
• e-instructions : 조리법 방법
• dt-duration : 이 조리법으로 식사를 준비하는데 걸리는 시간
• u-photo : 첨부하는 이미지

넓은 의미로 채용되는 실험적인 속성

• p-summary : 소개 및 짧은 요약
• p-author : 조리법 저자, 선택적으로 h-card를 포함한다.
• dt-published : 조리법이 게시된 날짜
• p-nutrition : 열량, 지방, 식이섬유등의 영양 정보

모든 속성은 선택으로 사용 가능하다.

h-resume

h-resume은 웹에 이력서와 CVs를 게시하는 오픈 포맷으로, hResume가 업데이트된 마이크로포맷2이다.

<div class="h-resume">
  <span class="p-name">
   <a class="p-contact h-card" href="http://example.org">
    <img src="http://example.org/photo.png" alt="" />
    Joe Bloggs
   </a>
   resume
  </span>

  <p class="p-summary">Joe is a top-notch llama farmer with a degree in <span class="p-skill">Llama husbandry</span> and a thirst to produce the finest wool known to man</p>
</div>

h-resume은 루트 클래스 명으로, 이 클래스를 가진 요소의 내부에 포함되는 속성들은 아래와 같다.

• p-name : 이력서의 짧은(간결한?) 이름
• p-summary : 자격 및 목표의 개요
• p-contact : h-card의 현재 연락처 정보
• p-education : an education h-event event, years, embedded h-card of the school, location.
• p-experience : 직업 혹은 다른 전문적인 경험 - event event, years, embedded h-card of the organization, location, job-title.
• p-skill : 기술, 능력, 선택적으로 경험기간(근무기간?)혹은 등급등을 포함한다.
• p-affiliation : h-card 조직(단체)와의 제휴

모든 속성은 선택으로 사용 가능하다.

h-review

h-review는 웹에 리뷰를 게시하는 오픈 포맷으로, hReview가 업데이트된 마이크로포맷2이다.

<div class="h-review">
  <h1 class="p-name">Microformats: is structured data worth it?</h1>

  <blockquote>
    <a class="p-item h-item" href="http://microformats.org">Microformats</a> are the simplest way to publish structured data on the web.
  </blockquote>

  <p>
    <data class="p-rating" value="5">★★★★★</data>
    Published <time class="dt-reviewed" datetime="2013-06-12 12:00:00">12<sup>th</sup> June 2013</time>
    by <a class="p-reviewer h-card" href="http://example.com">Joe Bloggs</a>.
  </p>

  <div class="e-description">
    <p>Yes, microformats are undoubtedly great. They are the simplest way to markup structured data in HTML and reap the benefits thereof, including using your web page as your API by automatic conversion to JSON. The alternatives of microdata/schema and RDFa are much more work, require more markup, and are more complicated (harder to get right, more likely to break).</p>
  </div>
</div>

h-review는 루트 클래스 명으로, 이 클래스를 가진 요소의 내부에 포함되는 속성들은 아래와 같다.

• p-name : 리뷰의 이름
• p-item : 리뷰한 것, including embedded microformat for e.g. business or person (h-card), event (h-event), place (h-adr or h-geo), product (h-product), website, url, or other item (h-item).
• p-reviewer : 리뷰 작성자, 선택적으로 h-card를 포함한다.
• dt-reviewed : 리뷰가 작성된 datetime
• p-rating : 1~5의 등급분류
• p-best : 최고의 등급 값 결정. 최저의 수치보다 더 낮을 수 있다.
• p-worst : 최저의 등급 결정. 최고의 수치보다 더 높을수 있다.
• e-description : 리뷰자의 의견과 평가가 있는 전체 텍스트
• p-category : 자유로운 범주나 리뷰어 항목에 적용된 태그
• u-url : 리뷰 고유 주소 URL