안녕하세요, 코린이의 코딩 학습기 채니 입니다.
개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.
HTML4 레이아웃
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
div { padding:10px;}
#container { background-color:#F0F0F0; width:960px; margin:0 auto; padding:10px; }
#header { background-color:#908886; height:100px; }
#content { background-color:#F5F5F5; float:left; width:640px; height:400px; }
#sideinfo { background-color:#DCDAD9; float:right; width:280px; height:400px; }
#footer { background-color:#555555; clear:both; height:100px; }
</style>
<title>html5이전 페이지 레이아웃</title>
</head>
<body>
<div id="container">
<div id="header">Header</div>
<div id="content">Content</div>
<div id="sideinfo">SideInfo</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
id 값으로 header, content, sideinfo, footer 영역을 나눈 것을 확인할 수 있는데, 이는 screen reader에 의해서 분류가 불가합니다.
따라서 HTML5 이후로는 semantic tag를 사용하여 screen reader에서 태그를 통해 본문의 내용을 조회/검색할 수 있게 되었으며, 웹 접근성을 향상 시킵니다.
semantic tag
- 태그의 내용과 일치하는 태그를 사용할 것
- screen reader에서 태그를 통해 본문의 내용을 조회/검색. 웹 접근성 향상!
<header></header>
- 사이트 전체의 헤더영역, article 태그의 헤더 영역
<main></main>
- 본문영역으로 한 페이지에서 단 한 번만 사용해야 함
<article></article>
- 웹 페이지의 실제 내용. 포스팅, 신문/잡지 등의 기사 등
- 문서 내에 여러개의 article이 존재할 수 있음
- 내부적으로 header, section, footer 등으로 구성될 수 있음
<section></section>
- 연관된 컨텐츠를 그룹핑
- 내부에 여러 article, p 태그 등을 가질 수 있음
- <div>는 css적인 효과를 위해 그룹핑하는 반면, section은 내용 위주로 그룹핑
<nav></nav>
- 네비게이션용 태그
- 위치가 가장 자유로움 (header 안, aside안, footer안, nav단독으로 사용 가능)
<aside></aside>
- 부가 정보를 표현하는 영역. 광고, 날씨, navigation 정보 ... 표현
<footer></footer>
- 사이트 하단영역 또는 article 태그의 footer 영역. 사이트맵, 저작권 정보, 연락처 등
<address></address>
