HTML5 (1) - 시드위키

(+)분류 : 가져온 문서/오메가

HTML5는 HTML4.01, XHTML1.0에 대한 차세대 표준안으로 개발되었고, 여러 웹 브라우저 벤더가 참여하고 있다. 스크립팅 API 등을 포함해 이전 버전에 비해 새 기능이 많이 갖추어져 있으며, 모든 플랫폼에 대해 이전 브라우저와 호환되도록 설계되었다.

목차

1. 구조
2. 태그
2.1. 문서구조
2.2. 글자
2.2.1. 제목 및 본문
2.2.2. 모양
2.2.3. 루비 문자
2.2.4. 목록
2.2.5. 정의
2.2.5.1. area
2.3. 표
2.3.1. thead, tbody, tfoot 요소
3. 보기
4. 영상

1. 구조 _{✎ ⊖}

HTML을 통해 웹 문서를 구성하기 위해선 head요소, body요소가 필요하다. HTML5에서는 '!DOCTYPE HTML'로 문서 타입을 선언한다. meta 태그를 선언하고 charset 속성을 사용한 후 utf-8로 선언하면 문자가 깨져서 나오는 것을 방지할 수 있다.

HTML5의 문서 구조는 HTML4와 약간의 차이가 있다.

2. 태그 _{✎ ⊖}

2.1. 문서구조 _{✎ ⊖}

요소	기능
header	소개, 내비게이션 기능의 묶음. 일반적으로 섹션의 제목(h태그)을 포함
hgroup	섹션의 제목 요소를 그룹으로 묶어 h1~h6를 나타냄
nav	내비게이션을 위해 구성된 섹션
section	문서나 어플리케이션 섹션. h1 등의 요소와 같이 사용 가능
article	문서내 별도의 본문 표시
aside	문서의 주 내용과 관련성 낮은 내용 나타낼 때 사용. 광고나 배너 등
footer	섹션 꼬리말, CCL이나 저작권 등

2.2. 글자 _{✎ ⊖}

2.2.1. 제목 및 본문 _{✎ ⊖}

제목 글자 태그는 글자 크기를 큰 것부터 순서대로 h1, h2, h3…h6으로 붙인다. 여기에서 h는 header를 의미하고, 각각의 숫자는 크기 및 우선 순위를 뜻한다.

본문 글자 태그는 p이며, paragraph를 뜻한다. p태그로 한 단락을 만들 수 있다. 그 외의 본문 태그는 개행 태그인 br, 수평 줄 태그인 hr이 있다.

앵커 태그 a는 다른 웹 페이지로 이동하거나 웹페이지 내부에서 특정 위치로 이동할 때 사용된다. 예를 들어,

<a href="사이트 url">화면에 표시되는 문구</a><br />

로 특정 사이트로 링크하도록 할 수 있다.

앵커 태그로 페이지 내부를 이동하도록 할 땐 이동하도록 하는 부분에 id 속성을 부여한다. 참고로, id 속성이 중복되는 것은 웹 표준에 어긋나지만, 실제로는 먼저 나오는 태그로 이동된다.

href특성이 존재할 경우에만 사용하는 특성으로는 hreflang, media, ping, rel 등이 있다. media 특성은 대상 url의 타입을 설정한다. 기본 값은 all로 지정된다. rel은 현재 문서와 대상 url의 관계를 지정한다. 지정할 수 있는 값들은 Alternate, archives, author, bookmark, contact, external, first, help, icon, index, last, license, next, nofollow, noreferrer, pingback, prefetch, prev, search, stylesheet, sidebar, tag, up 등이 있다.

url로 이동하는 것 외에도 href가 들어가는 위치 대신에 download 특성을 넣어 다운로드하도록 할 수 있다.

2.2.2. 모양 _{✎ ⊖}

태그 이름	내용	예시
b	굵은 글씨	sample
i	이탤릭체	sample
small	작은 글씨	sample
sub	아래에 표시되는 글씨	_sample
sup	위에 표시되는 글씨	^sample
ins	밑줄	sample
del	취소선	~~sample~~⁽¹⁾

2.2.3. 루비 문자 _{✎ ⊖}

일본어에서 주로 후리가나를 표기할 때 사용된다.

ruby 로 루비 문자 선언을 하고, rt로 위에 위치하는 문자를 지정한다. 그리고 rp로는 루비 태그를 지원하지 않는 브라우저일 때 출력하는 보완적 역할을 한다. 예시로

<ruby>
<span>秋山澪</span>
<rt>あきやまみお</rt>
</ruby>

로 지정한다. 화면 출력은 아래와 같다.

秋山澪(あきやまみお)

2.2.4. 목록 _{✎ ⊖}

태그 이름	내용
ul	unordered list. 번호 없는 목록
ol	ordered list. 번호 붙인 목록
li	list item. 목록 요소

위의 것들의 예시는 아래와 같다.

ol태그 적용한 경우
<ol>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<ol>
}}}

ul태그 적용한 경우
<ul>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>

ol태그 적용한 경우
1. dolor
2. sit
3. amet

ul태그 적용한 경우

dolor
sit
amet

2.2.5. 정의 _{✎ ⊖}

태그 이름	내용
dl	definition list. 정의 목록
dt	definition term. 정의 용어
dd	definition definition. 정의 정의

2.2.5.1. area _{✎ ⊖}

이미지 맵의 영역을 지정하는 태그이다. 영역의 모양을 지정하기 위해 shape 특성을 사용한다. 지정할 수 있는 값들로는 rect, circ, poly⁽²⁾이 있다. 클릭 가능한 영역의 좌표를 지정하기 위해선 coords 특성에 값을 부여한다. shape 값의 성질에 따라 부여하는 값의 종류가 달라진다.

2.3. 표 _{✎ ⊖}

2.3.1. thead, tbody, tfoot 요소 _{✎ ⊖}

thead, tbody, tfoot 요소들은 CSS로 표의 각 셀들을 그룹화해 제어하기 위해 사용된다. 세 요소 중 하나를 사용한다면 나머지 요소들도 함께 정의해야 한다. 또한 tr 태그를 반드시 가지고 있어야 하며, thead요소 내에서는 td 태그를 사용할 수 없다.

예시는 아래와 같다.

<thead class=hd>
<tr>
<th>1
<th>2
</tr>
</thead>
<tbody class=bd>
<tr>
<td>알파
<td>alpha
</tr>
<tr>
<td>베타
<td>beta
</tr>
</tbody>
<tfoot class=tf>
<tr>
<td>오메가
<td>omega
</tr>
</tfoot>
</table>

실제 출력될 때는 아래와 같이 표현된다.

1	2
알파	alpha
베타	beta
오메가	omega

3. 보기 _{✎ ⊖}

4. 영상 _{✎ ⊖}

이 문서의 내용 중 전체 또는 일부는 오메가에서 가져왔으며 CC BY-NC-SA 3.0에 따라 이용할 수 있습니다.
본 문서의 원본은 링크에서 확인할 수 있습니다.

(1) 따로 CSS가 없다면 그냥 검정색으로 줄이 쳐진 글자가 나온다.

(2) 각각 rectangle, circle, polygon을 지칭

1. 구조 ✎ ⊖

2. 태그 ✎ ⊖

2.1. 문서구조 ✎ ⊖

2.2. 글자 ✎ ⊖

2.2.1. 제목 및 본문 ✎ ⊖

2.2.2. 모양 ✎ ⊖

2.2.3. 루비 문자 ✎ ⊖

2.2.4. 목록 ✎ ⊖

2.2.5. 정의 ✎ ⊖

2.2.5.1. area ✎ ⊖

2.3. 표 ✎ ⊖

2.3.1. thead, tbody, tfoot 요소 ✎ ⊖

3. 보기 ✎ ⊖

4. 영상 ✎ ⊖