3.2 section, header, nav 요소(Element)를 이용한 좌측면 구성

3.2 section, header, nav 요소(Element)를 이용한 좌측면 구성

header, nav 요소는 방금 전 그 사용 방법에 대해서 알아보았으므로 section 요소의 사용 형식을 알아보면 section 요소는 보통 header요소와 함께 사용하며 페이지 내에서 논리적인 영역을 구분하는 요소로 컨텐츠를 보다 쉽게 구분할 수 있도록 하며 사용하는 형식은 다음과 같습니다.

위와 같이 section 요소 블록 안에는 header 요소를 시작으로 nav, article, aside 등과 같은 다양한 요소들이 각각 나타나거나 같이 포함되어 나타날 수 있습니다. 이제 전체적인 그림에서 좌측편에 나타난 ②에 해당하는 부분을 만들어봅니다. </body> 마침 태그 위에 다음과 같이 코드를 작성합니다.

  <section id="sidebar">
    <header>
      <h3>최근 기사</h3>
    </header>
    <nav>
      <ul>
        <li><a href="http://fromyou.tistory.com/392">Windows Phone 7에서...</a></li>
        <li><a href="http://fromyou.tistory.com/391">Windows 8 관련하여...</a></li>
        <li><a href="http://fromyou.tistory.com/389">Windows 8 preview 설치하기</a></li>
      </ul>
    </nav>
  </section> 
</body>

웹페이지 내에서 HTML 요소(Element)의 구별하는데 사용하는데 사용하는 id 속성을 “sidebar”로 설정합니다. 그 다음 section 요소 블록 내에 header 요소 시작, 마침 태그 안에 <h3> 크기로
제목을 “최근 기사”로 작성합니다.
마지막으로 nav, ul, li 요소 태그를 이용하여 이동할 웹페이지들에 대해서 설정해줍니다. 위와 같이 작성한 후 브라우저를 통해 보면 다음과 같이 나타나게 됩니다.

다음으로 전체적인 웹페이지 그림에서와 같이 좌측에 위치하도록 위해서 다음과 같이 id가 “sidebar”인 section 요소에 대해서 다음과 같이 스타일을 적용합니다.

<style type="text/css">
    a:link { text-decoration: none;}
    a:hover { text-decoration: underline;}

    section#sidebar{
      float: left;
      width: 25%;
    }
</style>

위 코드의 의미는 section 요소중에서 id 속성값이 “sidebar”로 설정된 section 요소를 float 속성을 이용하여 왼쪽(left)에 배치하고 width 속성을 이용하여 전체 가로길이의 25%로 차지하도록 설정한 것입니다.

- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 HTML5 요소(Element)에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인 학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기 바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를 비밀댓글로 남겨주시면 연락드리겠습니다.

끝으로 책 한권 분량에 대한 목차(링크 포함)은 "http://fromyou.tistory.com/581"에서 다운로드 받아서 필요하신 학습을 하실 수 있으며 조금이나마 도움이 되셨으면 합니다.