Movatterモバイル変換


[0]ホーム

URL:


  1. 개발자를 위한 웹 기술
  2. HTML: Hypertext Markup Language
  3. HTML 참고서
  4. HTML 요소 참고서
  5. <footer>

This page was translated from English by the community.Learn more and join the MDN Web Docs community.

View in EnglishAlways switch to English

<footer>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015년 7월⁩.

HTML<footer> 요소는 가장 가까운구획 콘텐츠구획 루트의 푸터를 나타냅니다. 푸터는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담습니다.

시도해 보기

<article>  <h1>How to be a wizard</h1>  <ol>    <li>Grow a long, majestic beard.</li>    <li>Wear a tall, pointed hat.</li>    <li>Have I mentioned the beard?</li>  </ol>  <footer>    <p>© 2018 Gandalf</p>  </footer></article>
article {  min-height: 100%;  display: grid;  grid-template-rows: auto 1fr auto;}footer {  display: flex;  justify-content: center;  padding: 5px;  background-color: #45a1ff;  color: #fff;}
콘텐츠 카테고리플로우 콘텐츠, 뚜렷한 콘텐츠.
가능한 콘텐츠플로우 콘텐츠. 단,<header>와 다른<footer>는 자손이 될 수 없습니다.
태그 생략불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다.
가능한 부모 요소플로우 콘텐츠를 허용하는 모든 요소. 단,<footer> 요소는<address>,<header>, 혹은 다른<footer>의 자손일 수 없습니다.
가능한 ARIA 역할group,presentation
DOM 인터페이스HTMLElement

특성

이 요소는전역 특성만 포함합니다.

사용 일람

  • <address> 요소로 감싼 작성자 정보를<footer> 요소에 배치하세요.
  • <footer> 요소는 구획 콘텐츠가 아니므로개요에 새로운 구획을 추가하지 않습니다.

예제

html
<footer>  Some copyright info or perhaps some author info for an &lt;article&gt;?</footer>

접근성 고려사항

VoiceOver 스크린 리더는 랜드마크 로터에서 푸터의 랜드마크 역할을 표현하지 않는 문제가 있습니다. 해결하려면<footer>role="contentinfo"를 추가하세요.

명세

Specification
HTML
# the-footer-element

브라우저 호환성

같이 보기

Help improve MDN

Learn how to contribute

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2025 Movatter.jp