선우공작소
궁금해요! 너를 알려줘! HTML5의 시맨틱 구조 본문
궁금해요! 너를 알려줘! HTML5의 시맨틱 구조
안녕하세요. 선우에요:D
드디어 HTML5의 구조를 설명하는 포스팅을 쓰네요.
사실 구조를 배우기 전 MIME타입이나 문자 인코딩 설정하는 방법 같은 기초적인 부분을 배워두면 좋지만,
그 전에 흥미를 잃을 것 같아 그 부분은 나중에 포스팅하도록 하겠습니다.
나중에 알아도 되는 부분이니 따로 찾아보거나 하실 필요는 없어요.
재미를 가질 때 쯤, 포스팅 하도록 할게요.
우선은 눈으로 보여지는 화면을 만들어 흥미유발 좀 해볼까요!?
코딩하기 전, 각 시맨틱 태그들에 대해 어느정도 알아야 하니 설명 들어갑니다.
HTML4와 HTML5의 차이점은?
HTML4와 HTML5의 차이점은 무엇일까요?
제일 중요한 Content Model! Content Model이란 HTML문서 작성의 큰 구조를 말합니다.
어떤 요소가 어떤 내용 또는 태그를 포함할 수 있는 지에 관한 정의라고 일컫는데요. 너무 말이 어렵죠?
'웹 페이지의 구조를 더욱 쉽게 이해할 수 있다'는 정도만 알고 계시면 될 것 같아요.
그리고 새롭게 추가된 태그들과 변경 혹은 삭제된 태그들이 생겼는데요.
추가된 태그들 중에서 중요한 것은 단연 시맨틱 구조겠죠?
여기서는 HTML4와 HTML5 차이를 필요한 부분만 간단히 설명했습니다.
더 자세한 내용이 궁금하다면 아래의 링크를 통해 확인해 주세요.
http://channy.creation.net/project/html5/html4-differences/
HTML5 시맨틱 태그
HTML5 시맨틱(semantic) 태그란 컴퓨터가 정보를 이해하고, 논리적인 추론까지 할 수 있는 구조를 만들기 위해 추가된 태그입니다.
기존에는 div에 wrap, header, content 같은 네이밍을 아이디 혹은 클래스에 정의해 큰 레이아웃을 구현했는데요.
HTML5에서는 태그 자체로 레이아웃을 그릴 수 있게 되었습니다.
그럼 어떤 것들이 있는 지 알아볼게요.
<header></header>
문서의 header를 나타낼 때 사용하고, 사이트 로고, 글로벌 링크(회원가입, 언어셋 등), 소개 등을 넣습니다.
<nav></nav>
문서의 navigation을 나타낼 때 사용하고, 보통 메뉴 영역으로 사용합니다.
브라우저가 네비게이션 영역을 알 수 있게되면 검색엔진 색인에 도움을 줄 수 있습니다.
<section></section>
문서의 section을 의미하며, 같은 성격의 내용일 때 section으로 묶어 사용합니다.
section 내부에는 header와 footer가 올 수 있는데, 이 때 사용되는 태그는 해당 영역에 대한 제목과 꼬리말로 사용됩니다.
HTML5 시맨틱 태그의 주요한 부분을 담당하고 있습니다.
<article></artice>
section 태그의 하위 개념으로 분류되며 뉴스 기사나 블로그 글 같은 독립적인 내용이 들어갑니다.
acticle은 다른 사이트에 배포하거나 재사용이 가능합니다.
footer 내부에는 footer가 올 수 있는데, 이 때 사용되는 태그는 해당 영역에 대한 꼬리말로 사용됩니다.
주로 acticle 영역에 대한 작성자의 정보나 연락처 등을 넣습니다.
<aside></aside>
본문 전체 내용과 직접적인 연관성이 없는 분리된 내용을 담을 때 사용합니다.
주로 사이드바에 사용되며 다른 예로는 배너 광고, 위젯등이 있습니다.
<footer></footer>
문서의 footer를 나타낼 때 사용하고, 주소나 연락처, 저작권 등을 넣습니다.
일반적으로 footer는 문서 내 한 번만 사용되지만, section이나 article에 해당 영역에 대한 footer로 사용할 수 있습니다.
그렇다면 <div>는 일자리를 잃었나요?
<div>는 일자리를 잃지 않았습니다. 큰 레이아웃을 그리지 않을 뿐이지 그 밖의 그룹핑은 div로 묶어 줍니다.
영원히 노동착취 당하고 있는 div.. 건강해라!
HTML5 구조가 궁금해요! 소스를 까라!!
아래의 소스는 시맨틱 구조를 이해하는데 참고만 하세요.
화면을 그리기 위해 단순히 막코딩되었습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>선우공작소 : 시맨틱 구조</title>
<style type="text/css">
body{width:440px;}
header, nav, section, article, aside, footer{display:block; width:400px; margin:4px; padding:4px; background-color:#ddd; text-align:center;}
section{float:left; width:280px; height:60px;}
article{width:264px; background-color:#efefef;}
aside{float:left; width:104px; height:60px;}
footer{overflow:hidden;}
</style>
</head>
<body>
<header>header</header>
<nav>nav</nav>
<section>
section
<article>article</article>
</section>
<aside>aside</aside>
<footer>footer</footer>
</body>
</html>
'공작소 > HTML' 카테고리의 다른 글
| 궁금해요! 너를 알려줘! DTD (0) | 2017.01.23 |
|---|---|
| 궁금해요! 너를 알려줘! HTML (1) | 2017.01.19 |