반응형
시맨틱 요소
시맨틱(semantic)이란 무엇일까?
'의미가 있는', '의미의'라고 해석되는 단어로 HTML문에서 의미를 부여하겠다는 의도가 담겨져 있다.
웹에서 표시되는 BODY영역의 레이아웃을 살펴보면 다음과 같다.
| 요소 | 설명 |
| header | 머리말을 나타내는 요소 |
| hgroup | 제목과 부제목을 묶는 요소 |
| nav | 메뉴 부분을 나타내는 요소 |
| article | 개별 콘텐츠를 나타내는 요소 |
| section | 제목별로 나눌 수 있는 요소 |
| aside | 좌우측의 사이드바를 나타내는 요소 |
| footer | 제작자의 정보나 저작권의 정보를 나타내는 요소 |
*실제 사이트 구조도로 살펴보면 다음과 같다.
▷ section 요소
- 문서의 내용 부분을 나타내는 요소이다.
- 하나의 section은 하나의 주제를 가지고 있으며 보통 h1~h6 태그와 같이 제목을 표현하는 heading 요소와 함께 사용한다.
- 주의할점은 하나의 section 요소에는 하나의 heading 요소만을 사용해야 한다.
- 주제별로 나눌경우 하나의 주제 안에 또 다른 세부 주제가 있을경우 section 요소 안에 section요소를 중첩 사용 가능하다.
* 중복하여 heading 요소인 h태그를 사용할 경우 h1~h6 요소의 레벨에 따라 결정된다.
* 같은 레벨의 h1~h6 요소를 사용하게 되면 한개의 section 요소는 두개의 section 요소로 나뉘게 되고
다른 레벨의 h1~h6 요소를 사용하게 되면 내부에 또 다른 section 요소가 중첩하여 생성된 것처럼 암죽적으로 해석된다.
▷ hgroup 요소
- 제목과 부제목을 묶어 주는 용도로 만들어짐
- HTML 5 최종 표준에서 제외되었다.
<section>
<hgroup>
<h1> 제목 1 </h1>
<h2> 제목 2 </h2>
</hgroup>
본문의 내용
</section>
▷ article 요소
- 개별 콘텐츠를 담는 요소이다.(위의 실제 예시로 보면 콘텐츠라 나와있는데 그 부분이 article 이다.)
- article 요소 안의 내용은 포함되어 있는 문서와 분리하여 개별적으로 사용이 가능하다는 것을 의미한다.
<section>
<article>
<h1> 제목 2 </h1>
<p> 본문1 내용 </p>
</article>
<article>
<h1> 제목 2 </h1>
<p> 본문2 내용 </p>
</article>
<article>
<h1> 제목 3 </h1>
<p> 본문3 내용 </p>
</article>
...
</section>▷ header 요소
- 사이트의 로고나 제목, 메뉴, 소개 정보 등과 같이 머리말에 놓이는 내용을 담는다. (네이버나 다음같이 상단에 로고 제목 등등)
▷ footer 요소
- 제작자의 정보나 저작권 정보 등과 같이 꼬리말에 놓이는 내용을 담는다.(홈페이지 하단에 나오는 정보들...)
(실제로 header 와 footer 요소는 위의 예시 그림을 보면 알 수있다.)
<header> 머리말 </header>
<section>
본문 제목 및 내용
</section>
...
<footer> 꼬리말 </footer>▷ nav 요소
- 주로 전체 웹 페이지에 적용되는 네비게이션 메뉴(GNB)를 나타낸다.
- 일반적으로 웹 페이지의 상단에 적용된다. (쉽게 말해 메뉴바들을 보통 nav태그를 사용합니다.)
▷ aside 요소
- 주요 콘텐츠 이외에 남아 있는 콘텐츠 등을 나타낸다.
- 웹 페이지의 사이드 바 영역 등을 지정하는데 사용될 수 있다.
(위의 실 예제를 보시면 아시겠지만 양옆을 지정해줄때 사용합니다. 홈페이지에서는 사이드바에 사용되구요)
<header> 머리말 </header>
<nav> 메뉴들 </nav>
<section>
본문 제목 및 내용
</section>
...
<aside> 사이드바 </aside>
<footer> 꼬리말 </footer>
결과적으로 최종 구조는 다음과 같겠다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>시맨틱 구조</title>
</head>
<body>
<header> 머리말 </header>
<nav>메뉴바</nav>
<section>
본문 제목 및 내용
<article> 콘텐츠 </article>
</section>
<aside> 사이드바 </aside>
<footer> 꼬리말 </footer>
</body>
</html>
모두 다같이 HTML5 공부 화이팅 합시다.
반응형
댓글