3.3 section, header, footer, article, aside 요소(Element)를 이용한 우측면 구성

3.3 section, header, footer, article, aside 요소(Element)를 이용한 우측면 구성

section, header요소에 대한 사용형식은 이미 조금 전에 설명했으므로 footer 요소부터 보면 footer 요소는 일반적으로 글이나 컨텐츠에 대한 저작권을 나타내는 정보를 나타내거나 nav 요소를 이용하여 탐색 정보를 나타내는데 사용하는 요소로 다음과 같은 형식을 사용하게 됩니다.

위에서 address 요소는 문서의 저자(작가)나 소유권자에 대한 연락 정보를 명시할 때 사용하는 요소로 보통 웹페이지의 헤더(header)나 꼬리말(footer) 부분에 명시되게 되며 어떤 경우는 article 요소 내에도 명시될 수 있는데 이런 경우 article 요소에 대한 저자(작가)나 소유권자임을 명시하게 됩니다.

다음으로 article 요소는 완전한 컨텐츠를 정의할 때 사용하는 요소로 예를 들어 뉴스 기사(article)나, 사용자의 논평(comment) 등과 같이 독립적인 컨텐츠를 나타내고자 할 때 사용하는 요소이며 다음과 같은 형식을 사용할 수 있습니다.

위와 같이 article 요소 내에에는 일반적으로 머리말 부분에 해당하는 헤더(header)와 맺음말 부분에 해당하는 footer 요소 그리고 본문에 해당하는 section 요소나 또다른 임베디된 article 요소 등을 포함하는 형태의 완전한 독립적인 컨텐츠 구조를 만들 수 있습니다.

마지막으로 aside 요소는 본문 내용 옆에 광고나 사이드바를 위치시키고자 할 때 사용하는 요소로 다음과 같은 형식을 사용합니다.

이제 기본적인 설명을 마쳤으므로 예제를 해보도록 합니다. 메모장으로 “SectionEx_first.html”을 열고 다음과 같이 id 속성값이 “sidebar”인 section 요소의 마침 태그(</section>) 다음 라인에 id속성값이 “posts”인 section 요소와 그 안에 방금 전 설명한 요소들이 포함되는 형태로 아래와 같이 코드를 작성합니다.

  <section id="posts">

    <header>

      <h1>HTML5 Preview </h1>

    </header>

    <article class="post">

      <header>

        <hgroup>

          <h2>HTML5</h2>

          <h3>HTML5에서 가장 관심이 가는 요소(Element)</h3>

        </hgroup>

      </header>         

 

      <aside>

        <p>

        &quot;HTML5 응용 프로그램 개발시대&quot;

        </p>

      </aside>

     

      <p>

            W3C에서 현재 진행중인 HTML5 명세(specification)는 현재 최종 명세가

            아니지만 벌써 웹이나 스마트폰같은 부분에서 다양하게 적용되고 있는

            상황입니다. 기존의 HTML4.01 버전에 비해서 괄목할만한 기능들이 많이

            포함되었고 그중 주목받고 있는 부분이 바로 canvas인 것 같습니다.

           

      </p>

      <p>

           여러분들은 HTML5 캔버스(canvas) 요소를 이용하여 그래픽 관련한 다양한

           작업들을 쉽게 처리할 수 있습니다.

      </p>

     

      <footer>

        <address> Written by <a href="mailto:cywon11@empal.com">체르니</a><br />

        </address>

      </footer>

    </article>

    <footer>

      <p> 3번의 마지막 footer 인데 공백으로 두었음</p>

    </footer>

  </section> 

</body>

메모장의 메뉴에서 다른 이름으로 저장을 선택하고 “SectionEx_3rdand4th.html”로 입력하여 저장한 후 IE9를 이용하여 열어보면 다음과 같이 나타나게 됩니다.

결과에서 보는 것처럼 전체적인 그림과는 다른 결과를 나타내주는데 이를 해결하기 위해서 <style> … </style> 블록 내에 다음과 같이 코드를 추가합니다.

   section#posts{

      float: right;

      width: 74%;

    }

    section#posts aside{

      float: right;

      width: 35%;

      margin-left: 5%;

      font-size: 20px;

      line-height: 40px;

    }   

  </style>

위에서 section 요소의 id 속성값이 “posts”인 section 요소의 전체적인 스타일을 설정하는데 위치를 나타내는 속성인 float 속성을 이용하여 우측(right)에 배치하고 section의 너비(width)를 74% 만큼을 차지하도록 설정합니다.
그 다음 id 속성값이 “posts”인 section 요소 안의 포함된 aside 요소의 스타일을 역시 float 속성을 우측(right)으로 설정하고 너비(width)는 35%, 좌측 여백(left-margin)을 5%, 글자 크기를 20픽셀(pixel), 마지막으로 라인의 높이(line-height)를 40픽셀(pixel)로 설정합니다.
이제 저장하고 IE9로 다시 열어보면 다음과 같이 조금 전과 달리 전체 그림에 맞는 결과를 나타내주게 됩니다.

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

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