한번씩 읽고 가세요.
“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
<section>
<section>태그는 주제별 그룹의 콘텐츠 섹션을 설정합니다. 주제별로 제목 요소를 사용하는 것이 좋으며, 문서의 스타일링 요소나, 그룹화 요소가 아닙니다. 스타일 지정 목적이나 그룹화가 필요하다면 <div> 태그를 사용합니다. 주요 콘텐츠와
단독으로 콘텐츠를 표현하고 싶다면,<artcle><aide><nav>요소를 사용하는 것이 적절합니다.
섹션과 관련된 태그(Section Related Tag)
<main> 태그는 문서의 주요 콘텐츠 영역을 설정합니다.
<section> 태그는 주제별 그룹의 콘텐츠 섹션을 설정합니다.
<article> 태그는 문서의 독립적인 컨텐츠 섹션을 설정합니다.
<aside> 태그는 주요 콘텐츠의 보조적 컨텐츠 섹션을 설정합니다.
<header> 태그는 문서의 소개 및 메뉴 그룹 컨텐츠 섹션을 설정합니다.
<nav> 태그는 문서에 대한 메뉴 링크를 제공하는 섹션을 설정합니다.
<footer> 태그는 문서 관련 정보 및 관련 링크 콘텐츠 섹션을 설정합니다.
<address> 태그는 문서 관련 연락처 콘텐츠 섹션을 설정합니다.
<h1>~<h6> 태그는 각 섹션의 제목을 설정합니다.
문서와 관련된 태그(Document Related Tag)
<html> 태그는 문서의 최상단 요소를 나타냅니다.
<head> 태그는 문서 정보에 해당하는 내용을 설정합니다.
<body> 태그는 문서 본문에 해당하는 내용을 설정합니다.
<base> 태그는 문서의 기본 URL을 설정합니다.
<link> 태그는 문서의 외부 리소스를 설정합니다.
<meta> 태그는 문서의 메타 정보를 설정합니다.
<style> 태그는 문서의 스타일 정보를 설정합니다.
<title> 태그는 문서의 제목을 설정합니다.
예제1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reference</title>
</head>
<body>
<header>헤더 영역</header>
<main>
<section>컨텐츠 영역</section>
<aside>사이드 컨텐츠</aside>
</main>
<footer>푸터 영역</footer>
</body>
</html>기본 레이아웃 예제
예제2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>섹션 레이아웃</title>
</head>
<body>
<header>
<h1>헤더 영역</h1>
</header>
<main>
<section>
<h2>주제별 영역</h2>
<p>내용</p>
<article>
<h3>독립된 주제 영역</h3>
<p>내용</p>
</article>
</section>
<aside>
<h3>사이드 영역</h3>
<p>내용</p>
</aside>
</main>
<footer>푸터 영역</footer>
</body>
</html>섹션 레이아웃 예제