html tag 정리 mark, progress, meter, details

html5 세미나를 하다가

정리해둬야 할 것 같아서 포스팅 합니다.

시작하기 전에

익스플로러나 파이어폭스 등에서는 화면이 제대로 보이지 않습니다.

크롬을 이용해주세요!!!!!

처음보는 태그들 중심으로 정리 할 예정입니다.

먼저

<mark>태그 입니다.

ex)

<p><mark>&lt;mark&gt;</mark> 요소입니다.</p>

결과 : 

<mark> 요소입니다.

그리고

<progress> 태그와 <meter>태그 입니다.

<progress> : 다운로드 진행 상황을 알려줍니다.

<meter> : 현재 진행 상황을 나타냅니다.

ex)

<p>다운로드 진행 : <progress max="100"></progress></p>

<p>진행상황 : <meter min="0" max="100" value="20" low="30" high="70">20%</meter></p>

결과 : 

다운로드 진행 :

진행상황 : 20%

다음은

<details>요소 입니다.

이 요소는 자바스크립트 없이도 사용자에게 해당 내용을 보이게 하거나 숨기게 할 수 있습니다.

<summary> : 

 - 보여주고 숨길 수 있는 모든 컨텐츠의 래퍼

 - 제목 섹션에 해당

 - <details>요소의 첫 번째 자식 요소여야 합니다.

ex)

<details>

<summary>sw 무료교육</summary>

<ul>

<li>교육과목 : 사물인터넷</li>

<li>강사 : 이만복</li>

<li>수강료 : 무료</li>

<li>교육일자 : <time datetime="2015-11-25">2015년 11월 25일</time></li>

</ul>

</details>

결과 :

sw 무료교육

• 교육과목 : 사물인터넷
• 강사 : 이만복
• 수강료 : 무료
• 교육일자 : 2015년 11월 25일

sw 무료교육을 클릭하시면 하위 내용이 출렵됩니다.

그리고 figcaption은 이미지에 캡션을 달수 있는 태그 입니다.

ex)

<figure>

 <img src=""  alt="알집"/>

 <img src="." alt="워드문서"/>

 <img src=" alt="pdf"/>

 <figcaption>[figcaption]확장자 이미지</figcaption>

</figure>

결과 :