본문 바로가기
html

[html5] footer 태그

by 지구별에 2015. 1. 7.

 

 

[html5] footer 태그

 

footer 요소는 문서에 대한 꼬릿말로서, 그 문서에 대한 정보를 담고 있어야 합니다.

 

대체로 footer가 문서의 끝에 오는 경우가 많지만, 꼭 끝에 올 필요는 없습니다.

 

▶사용 예

 

글쓴이 정보, 저작권 정보, 연락처 정보, 사이트 맵, 맨 위로 돌아가기, 관계된 문서 등.

 

참고로, 글쓴이에 대한 연락처 정보는 address 요소에 속합니다. 

 

 

한 문서에 여러 개의 footer 요소를 지닐 수 있습니다.

 

footer 요소는 문서의 영역을 구분짓는 sectioning 요소가 아닙니다. 새로운 문서를 소개하지는 않으니까요.

 

▶브라우저 지원 

 

ie9.0+, chrome 6.0+, firefox 4.0+, safari 5.0+, opera 11.1+

 

 

 

▶html/css 적용 예를 보겠습니다

 

사용 예 1

 

<body>
 <footer><a href="#">목차로 가기</a></footer>
 <div>
  <h1>FOOTER ELEMENT</h1>
  <p>본문 내용</p>
</div>
<footer><a href="#">목차로 가기</a></footer>
</body>

 

 

사용 예 2

 

 <body>
<article>
<footer>
<p><a href="#">Back to index</a></p>
</footer>
<h3> Footer Element </h3>
<p>The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element.</p>

...

... 

</article>
<footer class="footer">
<p><a href="#">About us</a>
<a href="#">Terms of Service</a>
<a href="#">Sitemap</a></p>
<p>Copyright  © 2015 지구별 안내서 </p>
</footer>
</body>

 

▶실행화면

footer.html

 

 

Back to index와 회색 배경색 칠해진 부분은 footer 요소로 만든 것입니다.

 

참조 : http://www.w3.org/wiki/HTML/Elements/footer

 

   

header 태그

 

[html5] nav 태그

 

[html5] aside 태그

 

html5shiv 삽입하기 (ie6-8에서 html5 적용하기)

반응형

'html' 카테고리의 다른 글

[html5] main 태그  (0) 2015.01.14
meta viewport (메타 뷰포트 태그) 사용법  (13) 2015.01.09
[html5] aside 태그  (2) 2015.01.06
[html5] nav 태그  (4) 2015.01.05
[html5] header 태그  (1) 2015.01.02

댓글