3.4 footer 요소(Element)를 이용한 꼬리말 구성

3.4 footer 요소(Element)를 이용한 꼬리말 구성

이제 마지막으로 footer 요소를 이용하여 현재 페이지의 꼬리말을 구성해봅니다.
메모장으로 “SectionEx_3rdand4th.html”을 열고 id 속성값이 “posts”인 section 요소의 마침 태그 다음 라인, 즉 body 요소의 마침태그(</body>)의 위에 다음과 같이 코드를 작성합니다.

  </section>

  <br/><br/>

  <footer id="page_footer">

    <nav>

      <ul>  

      <a href="advertising.html">광고안내 | </a>

      <a href="company_intro.html">회사소개 |</a>

      <a href="recruit.html">인재채용 |</a>

      <a href="cs.html">고객센터 |</a>

      <a href="infopolicy.html">개인정보취급방침 </a>

      </ul>

    </nav>

    <p>Copyright (c) edupicker.com. All rights reserved</p>

  </footer>   

</body>

위와 같이 작성한 후 메모장의 다른 이름으로 저장을 선택하여 “SectionEx_final.html”로 저장하고 IE9로 열어보면 다음과 같이 나타나게 됩니다.

위 결과에서 보는 것처럼 방금 전 코드로 추가한 페이지의 맺음말(bottom) 부분에 해당하는 내용들이 id값이 “sidebar”인 section의 밑에 붙어서 나타냅니다. 의도한 형태로 출력하기 위해서 스타일을 다음과 같이 <style> … </style> 블록 내에 코드를 추가합니다.

   footer#page_footer{

      clear:both;

      width:100%;

      display:block;

      text-align:center;

    }  

  </style>

위에서 clear 속성은 해당 요소 영역 부분에 좌측(left), 우측(right)에 어떤 요소도 배치하지 않도록 하기 위해서 clear로 속성값을 설정하였고 너비를 100%로 설정합니다.

그리고 요소(element)가 윈도우에 나타나는 방법을 설정하는 display 속성을 이용하여 일종의 블록(block) 박스 형태에 나타나도록 속성값을 block으로 설정합니다.
마지막으로 텍스트를 중앙(center)에 위치하도록 text-align 속성을 설정합니다.
이제 저장하고 IE9를 통해 열어보면 다음과 같이 페이지의 하단(bottom) 부분에 footer 요소 내에 명시한 nav, p 요소에 명시한 내용이 나타나게 됩니다.

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

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