[HTML5] 섹션 관련 요소

devforest443·2022년 6월 26일
html5
0

log 2015. 5. 8. 11:40

섹션요소

  • 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>

새로 추가된 요소
페이지나 사이트의 주요 네이게이션에 사용
요소의 특성으로 제목을 억지로 넣을 필요 없다
페이지에서 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>

새로 추가된 요소
페이지의 헤더, 섹션안의 헤더[article안의 header]
페이지헤더 : 제목이 필수X, 로고,네비게이션,사이트검색 등등.. 


<!-- 페이지 헤더 -->
<header>
  <hgroup>
  	<h1>HTML5</h1>
  	<h2>웹표준</h2>
  </hgroup>
  <nav>
    <ul>
    <li>웹표준?</li>
    <li>웹접근성 지침</li>
    <li>웹접근성 검증 사이트</li>
    <li>웹접근성 자료</li>
    </ul>
  </nav>
</header>

<!-- 섹션의 헤더[article안의 header] -->
<article>
  <header>
    <nav>
        <li>HTML4</li>
        <li>HTML5</li>
    </nav>
    <h1>HTML이란?</h1>
  </header>
  <p>HTML은 HTML4 HTML5 등이 있다.</p>
</article>

새로 추가된 요소
페이지의 바닥글, 섹션안의 footer
주소,로고,저자정보,하단메뉴,저작권,카피라이트, 관련정보 

<!-- 페이지 바닥글 -->
<footer>
  <ul>
    <li>사이트맵</li>
    <li>사이트이용약관</li>
    <li>개인정보보호정책</li>
  </ul>
  <p>copyright</p>
</footer>

<!-- 섹션안의 바닥글 -->
<article>
    <header>
    	<h2>HTML5</h2>
    </header>
	<p>HTML5는 무엇일까요?</p>
    <footer>
      <p><time datetime="2015.05.08">2015년 05월 08일</p>
      <a href="#">1개의 댓글</a>
    </footer>
</article>

<article>
    <header>
        <h2>CSS</h2>
    </header>
	<p>CSS는 무엇일까요?</p>

    <footer>
        <p><time datetime="2015.05.08">2015년 05월 08일</p>
        <a href="#">2개의 댓글</a>
    </footer><!-- footer는 중간 위치에 와도 무관하다. -->
  
    <section>
    	<h3>2개의 댓글</h3>
		<!-- 이 위치에 또 article 가능 -->
	</section>
</article>

address

변경된 요소
해당 관리자 또는 해당 포스트 저자 주소 및 연락처에 한정

<h1>블로그</h1>
<article>
	<h1>블로그이용</h1>
	<p>블로그를 효율적으로 이용하는 방법이 있습니다.</p>
    <footer>
        <address>블로거:김철수</address>
    </footer>
</article>

<article>
	<h1>블로그이용</h1>
	<p>블로그를 효율적으로 이용하는 방법이 있습니다.</p>
    <footer>
    	<address>블로거:김철수</address>
    </footer>
</article>

<footer>
  <address>이 사이트의 블로그에 관련 문의는 abc@tistory.com으로 문의 해 주세요.</address>
</footer>
profile
devforest443
devforest443
이전 포스트

GNB LNB SNB FNB 네이밍

다음 포스트

[HTML5] 그룹화 요소

0개의 댓글