Logo

<footer>

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

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

HTML
<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>
CSS
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;
}
콘텐츠 카테고리 플로우 콘텐츠, 뚜렷한 콘텐츠.
가능한 콘텐츠 플로우 콘텐츠. 단, `
`와 다른 <footer>는 자손이 될 수 없습니다.
태그 생략 불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다.
가능한 부모 요소 플로우 콘텐츠를 허용하는 모든 요소. 단, <footer> 요소는 `
`, `
`, 혹은 다른 <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"를 추가하세요.

명세

브라우저 호환성

같이 보기

  • 다른 구획 관련 요소들: <body>, <nav>, <article>, <aside>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup>, <header>, <section>, <address>
Previous <figure> Next <form>