HTML5 - [2] HTML5 (레이아웃, 콘텐츠 요소, 시멘틱요소, 상호작용 요소)

HTML5 - [2] HTML5 (레이아웃, 콘텐츠 요소, 시멘틱요소, 상호작용 요소)

정리하기

(1) 레이아웃을 위한 시맨틱 요소

레이아웃을 위한 시맨틱 요소

요소	설명
header	머리말(로고, 사이트의 이름 등)을 나타내는 요소
hgroup	제목과 부제목을 묶어주는 요소
nav	네비게이션 메뉴 영역을 나타내는 요소
article	개별 콘텐츠를 나타내는 요소
section	주제별로 나눌 수 있는 문서의 내용 영역을 구성하는 요소
aside	주요 콘텐츠와 크게 연관이 없는 콘텐츠를 좌우 사이드에 나타내는 요소
footer	꼬리말(제작자 정보, 저작권 정보 등)을 나타내는 요소

(2) 그룹핑 콘텐츠 요소

그룹핑 콘텐츠 요소

요소	설명
main	body 영역의 주요 콘텐츠 블록을 그룹화할 때 사용
figure	그림, 비디오 같은 콘텐츠들을 하나로 묶어서 블록으로 구성
figcaption	figure 요소에 대한 캡션(제목)을 표시
ol (reversed 속성)	li 요소들의 번호를 역순(낮은 차순)으로 출력

(3) 텍스트 레벨의 시맨틱 요소

텍스트 레벨의 시맨틱 요소

요소	설명
a (download 속성)	href 속성에 지정된 파일을 직접 다운로드 할 수 있도록 지정
a (ping 속성)	사용자가 클릭한 링크의 정보를 서버로 자동으로 송신
strong	아주 중요하거나 심각하거나 긴급을 요하는 내용을 표시
time	날짜와 시간 표현에 의미를 부여할 때 사용
mark	시각적/의미적으로 특정 텍스트에 강조 효과를 부여할 때 사용
ruby	하나 이상의 구문을 루비 주석으로 표시할 때 사용 (rt, rp, rb, rtc 요소와 함께 사용)
bdi	방향이 다른 텍스트를 주위의 텍스트와 격리하기 위한 요소
wbr	줄바꿈을 허용해도 괜찮은 지점을 표시할 때 사용

(4) 상호작용 요소

상호작용 요소

요소	설명
details	사용자의 요청에 따라 상세 정보를 표시하거나 숨기는 형태의 상호작용을 지원
summary	details 요소에 대한 머리글을 지정
menu	명령어들의 목록을 정의할 때 사용
command	사용자가 호출할 수 있는 명령어를 표시
dialog	대화상자와 같은 창을 통해 대화를 의미 있는 콘텐츠로 만들고자 할 때 사용

(5) HTML5에서 적용 의미가 변경된 요소

b, i, cite, small, hr, address, s, a 등

1. (header ) 요소는 머리글 역할을 하기도 하는 것으로, 로고, 사이트 이름, 제목이나 부제목, 그리고 주요 네

비게이션 등을 포함하는데 사용될 수 있으며, 제목과 부제목을 묶어주고자 할 때는 (hgroup ) 요소를 사용

해야 한다.

2. 주로 웹사이트에서 분류된 다른 영역으로 쉽게 갈 수 있도록 링크의 모음을 담아두는 (nav ) 요소를 사

용하고, 주요 콘텐츠 이외에 남아있는 콘텐츠나 참고가 되는 콘텐츠 등을 나타내고자 할 때는 (aside )

요소를 사용한다.

3. 문서의 영역을 구성할 때 사용되고 (article )을 포함할 수 있는 (section ) 요소는 h1~h6 요소와 함께 사용

할 수 있고 제목별로도 나눌 수 있다. 따라서 (section ) 요소는 페이지를 나누기 위해 사용해야 하고 자

연스런 계층을 제공하고 적절한 (heading )을 가지고 있어야 한다.

4. 문서 또는 애플리케이션 (body ) 요소 영역의 주요 콘텐츠 블록을 그룹화할 때는 (main ) 요소를 사

용한다. (main ) 영역은 애플리케이션의 핵심적인 기능 중심으로 주제를 확장하는 내용으로 구성하고

(body ) 요소 내에서 한번만 사용해야 한다.

5. (figure) 요소는 그림, 사진, 다이어그램, 코드, 그리고 비디오 같은 독립된 콘텐츠를 하나로 묶어서 블

록을 형성하고 캡션을 포함시켜서 서로의 관계를 명확히 구조화 시킬 때 사용되고 (figcaption ) 요소는

(figure ) 요소에 대한 캡션을 표시할 때 사용된다.

6. 구문 콘텐츠 하나 이상을 기본 텍스트 주변에 배치하도록 짧은 텍스트 문자열을 표시하도록 하는

(ruby ) 요소는 기준 텍스트를 작성하도록 하고 주석 내용은 (rt ) 요소 또는 (rp ) 요소를 이용하

여 표현한다.

7. (bdi ) 요소는 텍스트의 방향을 격리하기 위한 요소로써, 양방향 텍스트의 형태를 일부 텍스트에 적

용하기 위해서 이 텍스트를 주위와 떨어뜨려서 나타나도록 한다. 그리고 (br ) 요소가 HTML 문서에

서 줄 바꿈을 하는 반면에, (wbr ) 요소는 줄 바꿈 지점을 나타내기 위해 사용하는 요소이다.

8. 다음 중 HTML5에 추가된 레이아웃을 위한 요소가 아닌 것은?

① section 요소 ② header 요소 ③ nav 요소 ④ ul 요소

Html5_02 on jsbin.com