수많은 블로거들의 블로그는 <div id="header">  <div id="footer">  <div id="content">  <div id="sidebar">  과 같은
요소들로 되어있을겁니다. 물론 제 블로그 또한 마찬가지 입니다. (저는 티스토리에서 제공해 주는 것을 그냥 쓸뿐.... )



 1. HTML4에서의 div를 이용한 구조



또 여기서 content 부분의 내용을 나누려고 친다면 아래와 같은 일들이 발생하지요.



'얘는 뭐 div로 다 해?' 이쯤되면 이런 생각이들겁니다. 그런데 정말로 진짜로 실제로 div로 다 했었죠.



거의 모든 웹사이트 들이 이런 비슷한 구조를 가지고 있습니다.
사용하는 사람의 선택에 따라서 id가 "branding", "info", "menu" 등 중요하게 생각하는 단어를 사용하기는 하겠지만요.
 
이렇게 div 같은 포괄적인 마크업은 같은 태그임에도 같은 페이지 내에서 너무나도 다양한 일을 해버리게 되죠.
이런 사용으로는 구조가 복잡해지고, 같은 div라도 어떤일을 하는 녀석인지 명확하게 구분이 되지 않아버립니다.



 2. HTML5에서의 새로운 요소들을 사용한 구조

HTML5는 이런 부분들을 해결하기 위해 논리적인 구분을 할 수 있는 특징적인 요소들을 가지고 있습니다.
구조적인 마크업을 위해 추가된 요소들이죠.

  • section은 태그는 일반적인 문서 및 애플리케이션 영역을 표시할 때 사용합니다.
      문서 구조를 가르키는 h1 ~ h6와 함께 사용할 수 있습니다.

  • article은 뉴스 기사나 블로그 글 같은 독립적인 컨텐츠 단위를 표시할 때 사용 합니다.

  • aside는 문서의 주요 부분을 표시하고 남은 부분의 컨텐츠를 표시할 때 사용합니다.

  • hgroup은 섹션 머리말을 표시할 때 사용합니다.

  • header은 문서 내 소개 및 네비게이션 메뉴 모음을 표시할 때 사용합니다.

  • footer는 문서 내 꼬리말 부분을 표시할 때 사용하며 문서 저자,
       저작권 정보 같은 것을 표시할 수 있습니다.

  • nav는 문서 내 네비게이션 요소들을 표시하기 위한 영역입니다.

  • figure는 그림이나 비디오 같은 임베딩 컨텐츠와 함께 캡션을 할때 사용 합니다.

    <figure>
     <video src=ogg>…</video>
     <legend>캡션 예제</legend>
    </figure>

     figcaption는 캡션에 사용 합니다.


  • 1의 HTML4에서의 상황을 HTML5로 바꾼다면 매우 알아보기 쉬운 형태로 바꿀 수 있습니다.
    무엇보다도, 이 요소가 어떤 영역인지를 다른 요소들과 확실하게 구분지을 수 있지요.





    기존과 비슷해 보이기도 하지만 좀 더 명확하게 구분할 수 있게 되었죠.
    같은 div에 id 만을 다르게 해서 (class, header, footer, content, article 등등) 사용하는 것과 비교해 생각한다면,
    각각의 요소들은 확실하게 자신을 나타낼 수 있게 되었습니다.










    Posted by croute

    댓글을 달아 주세요