<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 |
특성
이 요소는 전역 특성만 포함합니다.
사용 일람
예제
html
<footer> Some copyright info or perhaps some author info for an <article>? </footer> 접근성 고려사항
VoiceOver 스크린 리더는 랜드마크 로터에서 푸터의 랜드마크 역할을 표현하지 않는 문제가 있습니다. 해결하려면 <footer>에 role="contentinfo"를 추가하세요.
명세
| Specification |
|---|
| HTML # the-footer-element |
브라우저 호환성
Loading…