[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>
<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>
<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>
<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
반응형
'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 |
댓글