0524 / semantic 구조

- semantic 구조 이해

semantic 구조란?

    각 영역에 해당하는 부분에 의미를 두고 제작하는 기법

    header : h1, #gnb(global_navigation_bar) 영역을 담고있는 영역 

    nav : navigation 형태를 취하는 영역

    aside : 있으면 좋고, 없어도 크게 불편하지 않은 영역

    section : 주로 메인광고, 해당 내용이 별도로 연결되어있는 영역

    article : 내용이 담긴 영역, 본문을 파악할 수 있는 영역

    footer : 회사 또는 사이트의 정보(회사주소, copyright 등)를 담고있는 영역

 

  - 기타

    main : header/footer을 제외하고 본문의 내용을 담는 영역을 main으로 사용

          하지만 보통의 시멘틱구조와는 성향이 다르므로 쉽게 쓰기 어렵다.

    figure : img 요소의 단점을 극복하기위해 생겨난 요소, figcaption과 함께 사용

----------------------------------------------------------------------------------------

- semantic.html 코드

<div id="wrap">

    <header id="headBox">

      <h1><a href="./all_contents.html">웹 기초</a></h1>

 

      <nav id="navBox">

        <div class="user_navigation"></div>

        <div class="global_navigation"></div>

      </nav>

    </header> <!-- // headBox ============================= -->

    

    <main class="page_wrap">

      <section id="viewBox">

        <h2>광고 영역</h2>

      </section> <!-- // viewBox ============================= -->

      

      <aside id="sideBox">

        <h2>보조내용</h2>

      </aside> <!-- // sideBox =============================== -->

 

      <article id="contentBox">

        <h2>최신 또는 인기항목</h2>

      </article> <!-- // contentBox ============================= -->

    </main>

 

    <footer id="footBox">

 

    </footer> <!-- // footBox ============================= -->

  </div>