* Do it! HTML5 + CSS3 를 기반으로 작성되었습니다.
시맨틱 웹이란?
- 기존의 div를 이용하여 단순 분할을 하던 웹에서 의미를 갖는 태그를 이용하여 화면을 구분하도록 작성 된
HTML5에서 추구하는 방식.
|
<header> |
사이트나 특정 부분의 머리말(제목 부분) 태그 |
|
<nav> |
문서나 사이트를 연결하는 내비게이션 태그 |
|
<hn> |
크기 별로 텍스트 제목을 붙이는 태그 |
|
<article> |
실제 콘텐츠 영역을 나타내는 |
|
<aside> |
본문 이외에의 사이드 바 영역 태그 |
|
<footer> |
사이트 제작자 연락 정보나 저작권 정보가 포함되는 푸터 태그 |
02-1. HTML5의 문서구조
HTML4?
기존 웹들은 대부분 단순한 View 역활이였습니다.
그렇기에 단순히 div로 틀을 만들어 구역을 나누고 각 구역을 id로 구분하는 방식이였습니다.
|
<div id = "header"> Header </div> <div id = "content"> Content </div> <div id = "footer"> Footer </div>
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |