HTML5_새로운 태그(New Tag)

※ 본 포스팅은 책 <실전프로젝트 반응형 웹 퍼블리싱>을 참고하여 작성하였음.

figure 요소와 figcaption 요소

HTML5에서는 삽화, 다이어그램, 사진, 코드 목록 컨텐츠 등에 설명을 달 수 있는데 그 요소가 바로 <figuare>요소이다. <figcaption> 요소는<figure> 요소 안의 컨텐츠에 대한 제목을 나타낸다.

<figure>
  <img src="images/newbool1.gif" alt="안드로이드로 용돈벌기" />
  <img src="images/newbool2.gif" alt="아이폰으로 용돈벌기" />
  <figcation>아이콕스에서 새로 나온 책들</figcaption>
</figure>

아이콕스에서 새로 나온 책들

mark 요소

<mark>요소는 글 내용에서 주의 깊게 볼 텍스트 부분을 강조 처리하기 위한 요소이다. 특히, 검색 사이트에서 특정 키워드를 검색하면 찾고 있던 키워드만 강조되어 나타내는 것이 <mark>요소의 좋은 얘이다.

<p><mark>&lt;mark&gt;</mark>요소는 글 내용에서 주의 깊게 볼 텍스트 부분을 강조 처리하기 위한 요소이다.</p>

<mark>요소는 글 내용에서 주의 깊게 볼 텍스트 부분을 강조 처리하기 위한 요소이다.

time 요소

<time> 요소는 날짜와 시간을 기계가 이해할 수 있는 형태로 만들어 주는 요소이다.

<p><time datetime="2012-11-15T14:00:00">목요일 오후 2시</time>회의 일정</p>
<p>발행일<time pubdate datetime="2012-11-15">2012년 11월 15일</time></p>
<p>작성일자<time pubdate datetime="2012-11-15T08:10">12.11.15</time></p>

'목요일 오후 2시'에 대한 날짜와 시간을 기계에게 명확하게 전달한다. 날짜 다음에 나오는 'T'는 시간을 의미하며 시 : 분 : 초 로 나타내고 pubdate 속성은 datetime에 있는 날짜에 작성되었음을 의미한다.

pubdate 속성의 경우 <time>요소가 <article>요소에 포함되어 있거나 인접한 <article>요소가 있다면 이것은 해당 <article>요소(기사내용 등) 내용의 발행일을 의미하며 <article>요소가 없다면 문서 전체의 발행일을 의미한다.

details 요소와 summary 요소

HTML5에서는 세부 항복이나 추가 정보를 숨겨 놓았다가 펼쳐 보여줄 수 있는 기능이 있다. 이 요소가 바로 <details> 요소이며 <summary> 요소는 세부 항목의 제목이나 요약 내용이라고 보면 된다.

<details>
  <summary>아이폰으로 용돈벌기</summary>
  <ul>
    <li>출판사 : 아이콕스</li>
    <li>저자 : 정창훈</li>
    <li>가격 : 25,000원</li>
    <li>출간일 : <time datetime="2012-05-25">2012년 5월 25일</time></li>
  </ul>
</details>

아이폰으로 용돈벌기

• 출판사 : 아이콕스
• 저자 : 정창훈
• 가격 : 25,000원
• 출간일 : 2012년 5월 25일

progress 요소와 meter 요소

<progress>요소는 다운로드의 진행 상황 같은 내용을 나타낼 때 사용하며 <meter>요소는 정해져 있는 범위의 값에서 현재 상태의 값을 나타낼 때 사용된다.

<p>파일 다운로드</p>
<p>다운로드 진행 : <progress max="100"><span>0</span>%</progress></p>
<p>투표상황</p>
<p>현재 투표 진행상황 : <meter min="0" max="100" value="20" low="30" high="65" title="percent">20%</meter><p>
<p>현재 투표 진행상황 : <meter min="0" max="100" value="60" low="30" high="65" title="percent">60%</meter><p>
<p>현재 투표 진행상황 : <meter min="0" max="100" value="70" low="30" high="65" title="percent">70%</meter><p>

파일 다운로드
다운로드 진행 : 0%

투표상황
현재 투표 진행상황 : 20%
현재 투표 진행상황 : 60%
현재 투표 진행상황 : 70%

의미가 달라진 요소들

요소명	설명
<a>	<a>요소 내에 인터렉티브 컨텐츠(input, button, 다른 link 등)을 제외하고 어떤 요소든 포함할 수 있다.
<i>	일반적인 문장에서 전문 용어, 다른 언어 된 숙어 구문, 사상 등 문장 내에 다른 형태의 문장으로 표시할 때 사용된다.
<b>	의미상 특별히 중요하지 않지만 굵게 표현해야 할 텍스트에 사용된다.
<strong>	강조의 의미가 아니라 중요의 으미리르 나타낼 때 사용한다.
<address>	주소를 표시하기 위한 것이 아니라 실제 연락 정보를 나타내기 위해 사용된다.
<hr>	단순한 구분선이 아니라 문단과 문단을 구분해 주는데 사용된다.
<small>	주의 사항, 법적 제한, 저작권 등에 사용되며 짧은 문장에만 적용해야 한다.