Play Ground

[HTML5] 새로운 요소 본문

Programming/HTML

[HTML5] 새로운 요소

haeru 2013. 2. 24. 23:41

article

 - 문서나 페이지, 사이트에서 독립적으로 배포 혹은 재사용(예를 들어 투고 같은)할 수 있는 섹션을 나타낸다.

<article>

<header>

<h1>삶에서 가장 중요한 원칙</h1>

</header>

<p>

당신 주변 어디에라도 마이크가 있다면 그 마이크는 열띤 토론을 이끌어 내는 것이고 당신이 하는 말을 전부 전세계로 퍼뜨리고 있다 생각해야 합니다. 농담이 아니에요.

</p>

<footer>

show comments

</footer>

</article>


aside

 - 주위 내용과 접점을 이루는 섹션을 나타내며 주위 내용과는 분리된 것으로 간주할 수 있다. aside 요소가 나타내는 섹션은 출력하였을 때 사이드바 형태로 표현되는 것이 일반적이다.

<aside>

<h1>스위스</h1>

<p>

스위스, 지질학적으로 유럽의 중심에 있으며 육지로 둘러싸인 이 나라는 유럽 여러 조약의 승인국이지만 지정학적 단체인 EU에 가입하였습니다.

</p>

</aside>


audio

 - 소리 또는 오디오를 나타낸다.

<audio controls src="링크">

</audio>


<audio controls>

<source src="링크" type="audio/mp3">

<sourse src="링크2" type="audio/ogg">

</audio>


address

 - article 또는 body요소의 연락처 정보를 나타낸다.

<footer>

<address>

서울시 종로구 000동

</address>

<p>copyright 2013 example</p>

</footer>


canvas

 - 해상도에 의존하는 비트맵 캔버스와 스크립트를 제공한다. 이러한 캔버스는 그래프, 게임 그래픽, 기타 비주얼 이미지들을 즉석에서 그려내는 용도로 사용될 수 있다.

<canvas width="200" height="200" style="border:1px solid #aaa">

사각형이 그려집니다

</canvas>


command

 - 사용자가 실행할 수 있는 명령을 나타낸다.

<menu type="menu">

<command type="radio" radiogroup="alignment" checked label = "left" icon="icon.png">

</menu>


datalist

 - 다른 컨트롤에서 사용할 수 있도록 미리 정의된 옵션 집합을 나타낸다. 요소의 내용은 미리 정의되어진 옵션들을 나타내는 option요소와 섞여서 구형 사용자 에이전트를 위한 폴백 요소를 나타낸다.

<input list="opt">

<datalist id="opt">

<option value="1">옵션1</option>

<option value="2">옵션2</option>

</datalist>


details

 - 사용자가 추가적인 정보를 얻거나 컨트롤할 수 있는 노출된 위젯을 나타낸다.

<section>

<h1>테스트임</h1>

<details>

<summary>테스트입니다!</summary>

<ul>

<li>테스트1</li>

<li>테스트2</li>

</ul>

</details>

</section>


embed

 - 플러그인이 설치된, 플러그인이 필요한 외부 어플리케이션을 동작할 때 사용한다.

<embed src="링크" quality="high">

위의 embed와 아래의 object의 결과는 같음

<object data="링크">

<param name="quality" value="high">

<object>


figcaption

 - 자신의 부모인 figure 요소의 나머지 내용들에 대한 캡션, 혹은 제목을 나타낸다.

figure

 - 이미지, 그래프, 사진, 예제 코드, 비디오, 일반 텍스트등을 하나로 묶어 블록을 형성하고 캡션을 포함시켜 서로의 관계를 명확히 구조화 시킨다. 반드시 메인이 되는 문서 안에 삽입될 필요는 없으며 페이지 옆이나 참조용 별도 페이지등에 넣어도 크게 상관없는 내용을 지정할 수 있다.

<figure>

<img src="eating.jpg" alt="밥먹는 이미지" />

<figcaption>밥먹는 이미지 입니다</figcaptio>

</figure>


footer

 - 작성자가 누구인지, 연관된 문서에 대한 링크, 저작권 정보, 기타 흡사한 정보들을 담는다.

<footer>

<p>copyright 2013 example</p>

</footer>


header

 - 소개 또는 네비게이션 목적의 도우미 그룹

<article>

<header>

<h1>삶에서 가장 중요한 원칙</h1>

</header>

<p>

당신 주변 어디에라도 마이크가 있다면 그 마이크는 열띤 토론을 이끌어 내는 것이고 당신이 하는 말을 전부 전세계로 퍼뜨리고 있다 생각해야 합니다. 농담이 아니에요.

</p>

</article>


hgroup

 - heading태그 묶은 그룹, 섹션의 제목을 나타낸다.

<hgroup>

<h1>삶에서 가장 중요한 원칙</h1>

<h2>첫번째_행복</h2>

</hgroup>


keygen

 - 키 쌍을 만들어내는 컨트롤을 나타낸다.

<form action="주소" method="post">

<p><keygen name="key"></p>

<p><input type="submit" value="키 전송하기"></p>

</form>


mark

 - 형광펜으로 특정단어들을 칠해서 강조하는 효과와 비슷하며 문장내의 중요한 부분에 강조효과를 넣는 <em>, <strong>과는 다른 개념이다. 시각적 주목효과 만을 노리며 스타일이 정의되어 있지 않으므로 직접 효과를 작성한다.

<p>

요즘 너무너무 <mark>행복</mark>해!

</p>


menu

 - 커맨드 목록을 나타낸다.

<menu type="menu">

<li>

<menu lable="menu1">

<button type="button">menu1-1</button>

<button type="button">menu1-2</button>

</menu>

</li>

<li>

<menu lable="menu2">

<button type="button">menu2-1</button>

<button type="button">menu2-2</button>

</menu>

</li>

</menu>


meter

 - 알려진 범위 내에서의 스칼라 측정 또는 분포비율을 나타낸다.

<ul>

<li>test1</li><meter min=0 max=30 value=17 title="test">17/30</meter>

</ul>


nav

 - 다른 페이지 또는 동일 페이지의 다른 부분으로 이어주는 섹션, 즉 네비게이션 링크로 구성된 섹션을 나타낸다.

<body>

<h1>플레이그라운드</h1>

<nav>

<ul>

<li>홈</li>

<li>사이트맵</li>

</ul>

</nav>

<article>

<header>

<h1>플레이그라운드 제목</h1>

</header>

</article>

<nav>

<ul>

<li>메뉴1</li>

<li>메뉴2</li>

</ul>

</nav>

</body>


output

 - 계산의 결과를 나타낸다.

<form action="링크" method="get">

<input type="number" name="a" step="any"> +

<input type="number" name="b" step="any"> =

<output onforminput="value = a.valueAsNumber + b.valueAsNumber">답</output>

</form>


progress

 - 작업의 진척도를 나타낸다. 진척도는 아래 두가지로 구분된다.

   1. 작업이 수행되고 있지만 작업이 완료되기 전에는 얼마나 많은 일이 남아있는지 알 수 없는 모호한 경우

   2. 진척도가 0부터 최대값 사이의 숫자로서 표현될 수 있는 경우

<section>

<h1>Progress Test</h1>

<p>

<progress id="test" max="100">0%<progress>

</p>

</section>


rp

 - 루비 주석을 지원하지 않는 사용자 에이전트에서 루비 텍스트를 괄호로 둘러싸 표현하기 위해 사용한다.

rt

 - 루비 텍스트의 루비 주석을 나타낸다.

ruby

 - ruby가 부모, rt와 rp는 자식

<ruby>

愛<rt>あい</rt>

</ruby>

결과물 -> 

<ruby>

愛<rp>(</rp><rt>あい</rt><rp>)</rp>

</ruby>


section

 - 장이나 마디를 나타내는 요소로 표제와 이에 다른 컨텐츠를 정리하기 위한 요소. H태그 필수

<section>
    <h1>제목</h1>
</section>


source

 - 미디어 요소에서 사용할 수 있는 대체 미디어 자원을 제공한다.

<audio controls>

<source src="링크" type="audio/mp3">

<sourse src="링크2" type="audio/ogg">

</audio>


summary

 - 부모인 details요소에 자신을 제외한 내용이 있다면 그에 대한 요약, 캡션, 범례를 나타낸다.

<section>

<h1>테스트임</h1>

<details>

<summary>테스트입니다!</summary>

<ul>

<li>테스트1</li>

<li>테스트2</li>

</ul>

</details>

</section>


time

 - 날짜와 시간을 기계가 이해할 수 있게 명확하게 인코딩하면서 사람도 이해할 수 있게 노출시킨다.

YYYY-MM-DD(날짜) / HH:MM:SS(24시의 형태) 로 표기하고 동시에 나타낼 경우, 2013-01-30T12:00:00+09:00 와 같이 T문자로 구분하고 문자열 끝에 타임존 정보를 더하면 된다.

<time detetime="2013-02-26">2월 26일</time>


video

 - 비디오, 영화를 재생하기 위해 사용된다.

<video controls autoplay>

<source src="링크" type="video/avi">

<sourse src="링크2" type="video/ogg">

</video>


저작자표시

'Programming > HTML' 카테고리의 다른 글

Image Replacement(IR기법)  (0) 2013.03.26
href=# 대안법  (0) 2013.03.12
웹 표준과 웹 접근성  (0) 2013.02.26
시맨틱한 마크업을 위한 HTML5요소  (0) 2013.02.26
시맨틱 마크업  (0) 2013.02.26
'Programming/HTML' Related Articles more