html5 문서의 구조

티스토리 뷰

DEVELOPE/HTML-HTML5

소찾나 2017. 11. 17. 10:35

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

가장 중요한 변화임에도 쉽게 놓치는 부분이 html5 의 시멘틱한 문서구조입니다.

여기에[서 html5 문서구조가 html4의 문서 구조와 어떻게 다른지를 먼저 살펴보도록 하자

1 html4 vs html5

html5 에서 두드러진 차이점은 시멘틱한 문서 구조입니다. 시멘틱 테그를 사용했을때와 사용하지 않았을대 어떻게 다른지 확인해보자

html5 문서의 구조

html4 에선 문서의 레이아웃을 구성할때 <div>를 이용해 텍스트나 이미지를 담아놓고 CSS 를 사용해서 각 <div> 를 원하는 형태로 배

치합니다. 이때 <div> 요소를 구분하기 위해 id="header" 등 식별자를 붙여서 표현하게 됩니다. 제작자가 임의로 붙이는 것이기 때문에

소스만 보아서는 문서 구조나 내용을 알기가 쉽지 않게 됩니다.

의미없는 <div> 태그로 작성된 문서의 구조를 개선하기 위해 html5 에서 태그만 보고도 문서를 쉽게 이해할 수 있도록 새로운 테그들이

도입이 되었는데 이를 시멘틱 태그라 불린다.

header	사이트에 대한 소개 정보나 메인메뉴, 사이트 로고 등이 포함된다
nav	사이트의 메뉴나 링크 같은 내비게이션 요소들
section	실제 문서내용이 들어가며 대부분의 태그들이 여기에 사용되며 다른 요소들도 포함된다
article	문서의 내용이 많을경우 여러개의 요소(article) 로 나눈다
aside	문서의 중요 내용 이외에 내용들을 넣어 문서의 주영역 주변배치
footer	작성자 정보등 보통 홈페이지 하단에 들어가는 내용을 표시

2 html5 의 DOCTYPE 정의

DOCTYPE 은 웹페이지가 어떤 유형으로 만들어 졌는지 현제 문서의 정의하는 부분으로 브라우저에게 어떤 형식으로 제작하였는지 선언

해주어 제대로 해석되도록 정의하는 것 입니다.

DOCTYPE은 html 이 아니기에 문서의 가장 상단에 정의하여야 합니다.

html5 의 DOCTYPE 은 아주 간단합니다 <!DOCTYPE html>

공유하기 링크

공지사항

최근에 올라온 글

최근에 달린 댓글

링크

글 보관함