[HTML5] 1. 섹션 관련 요소

섹션요소

• section : 장,절
• nav : 내비게이션
• article : 독립된콘텐츠,배포
• aside : 관련이적은콘텐츠
• h1~h6 : 제목태그
• hgroup : 제목그룹
• header : 페이지의머리글,섹션의머리글
• footer : 페이지의바닥글,섹션의바닥글
• address : 연락처정보

<section>

• 새로 추가된 요소
• 장 또는 절등의 단위로 사용
• 스타일을 위해 이 요소를 사용하면 안된다. 스타일을 위해 사용시 division 요소 사용

<article><!-- 배포 -->

<h1>블로그 제작기</h1>

<p>블로그를 제작하기로 하였습니다. 블로그를 제작하는 방법을 정리 해 보겠습니다.</p>

<section><!-- 1절 -->

<h2>1일 블로그 스킨제작</h2>

<p>블로그 스킨을 제작하여 파일을 업로드 합니다.</p>

</section>

<section><!-- 2절 -->

<h2>2일 블로그 스타일 지정</h2>

<p>업로드된 파일을 바탕으로 스킨을 수정합니다.</p>

</section>

</article>

<nav>

• 새로 추가된 요소
• 페이지나 사이트의 주요 네이게이션에 사용
• 요소의 특성으로 제목을 억지로 넣을 필요 없다
• 페이지에서 2~3개까지 사용 가능하다
• 하나는 사이트 전체의 네이게이션 [header]부분에 포함한다

<nav>

<ul>

<li><a href="#">회사소개</a></li>

<li><a href="#">홍보센터</a></li>

<li><a href="#">공지사항</a></li>

<li><a href="#">고객센터</a></li>

</ul>

</nav>

<!-- 구조 -->

<header>

<nav>

<ul>

<li><a href="#">회사소개</a></li>

<li><a href="#">홍보센터</a></li>

<li><a href="#">공지사항</a></li>

<li><a href="#">고객센터</a></li>

</ul>

</nav>

</header>

<div id="container">

<nav>

<ul>

<li><a href="#">회사소개</a></li>

<li><a href="#">홍보센터</a></li>

<li><a href="#">공지사항</a></li>

<li><a href="#">고객센터</a></li>

</ul>

</nav>

</div>

<!-- 전체를 nav요소 사용 -->

<nav>

<section>

<h3>블루</h3>

<ul>

<li><a href="#">하늘</a></li>

<li><a href="#">바다</a></li>

<li><a href="#">블루베리</a></li>

<li><a href="#">청바지</a></li>

</ul>

</section>

<section>

<h3>옐로우</h3>

<ul>

<li><a href="#">망고</a></li>

<li><a href="#">바나나</a></li>

<li><a href="#">해바라기</a></li>

<li><a href="#">카레</a></li>

</ul>

</section>

</nav>

<!-- 그룹마다 nav를 사용 -->

<nav>

<h3>블루</h3>

<ul>

<li><a href="#">하늘</a></li>

<li><a href="#">바다</a></li>

<li><a href="#">블루베리</a></li>

<li><a href="#">청바지</a></li>

</ul>

</nav>

<nav>

<h3>옐로우</h3>

<ul>

<li><a href="#">망고</a></li>

<li><a href="#">바나나</a></li>

<li><a href="#">해바라기</a></li>

<li><a href="#">카레</a></li>

</ul>

</nav>

<!-- aside 요소를 사용 -->

: aide요소는 없어도 크게 상관 없을 경우 사이드로 빼는 요소 이다.

<aside>

<nav>

<h3>블루</h3>

<ul>

<li><a href="#">하늘</a></li>

<li><a href="#">바다</a></li>

<li><a href="#">블루베리</a></li>

<li><a href="#">청바지</a></li>

</ul>

</nav>

<nav>

<h3>옐로우</h3>

<ul>

<li><a href="#">망고</a></li>

<li><a href="#">바나나</a></li>

<li><a href="#">해바라기</a></li>

<li><a href="#">카레</a></li>

</ul>

</nav>

</aside>

<aside>

• 새로 추가된 요소
• 기사내용과 관련한  이미지 등
• 특종과 같은 경우는 aside요소에 해당하지 않는다.
• 사이드바, 신문등에서 강조하고 싶은 주제를 별도로 인용한 것, 보충기사, 메인컨텐츠와 관련이 적어 분리가능한 것(광고), 추천블로그 링크

<article>

• 새로 추가된 요소
• 배포할 가치가 있는 대상으로 한다.
• 요소 자체를 한 페이지로 볼 수 있어 헤더가 또 선언 가능하다.
• article 안에 article을 또 넣을 수 있다.
• 쇼핑몰 상품상세 설명페이지, 블로그의 포스트, 뉴스 기사, 등의 독립된 하나의 컨텐츠     

<!-- 댓글이 없는 블로그 포스트 1페이지 -->

<article>

<header>

<h1>블로그 이야기</h1>

<p><time pubdate="pubdate" datetime="2015-05-08">2015년 05월 08일</time></p>

</header>

<p>블로그 게시판을 추가 하였다.</p>

<footer>

<p>update SL</p>

</footer>

</article>

<!-- 댓글이 있는 블로그 포스트 1페이지 -->

<article>

<header>

<h1>블로그 이야기</h1>

<p><time pubdate="pubdate" datetime="2015-05-08">2015년 05월 08일</time></p>

</header>

<p>블로그 게시판을 추가 하였다.</p>

<footer>

<p>update SL</p>

</footer>

<section>

<header>

<h2>댓글</h2>

<p>댓글 2개 등록</p>

</header>

<article>

<header>

<p>김윤의 댓글</p>

<p><time pubdate="pubdate" datetime="2015-05-08">2015년 05월 08일</time></p>

</header>

<p>하하 저도 얼른...</p>

</article>

<article>

<header>

<p>초림의 댓글</p>

<p><time pubdate="pubdate" datetime="2015-05-08">2015년 05월 08일</time></p>

</header>

<p>블로그 저도 하고 싶네요....</p>

</article>

</section>

</article>

<hgroup>

• 새로 추가된 요소
• hgroup요소 안에는 h태그외에는 넣을 수 없다.

<section>

<hgroup>

<h1>블로그</h1>

<h2>제작방법</h2>

</hgroup>

</section>