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>요소는 구획 콘텐츠가 아니므로 개요에 새로운 구획을 추가하지 않습니다.
예제
<footer>
Some copyright info or perhaps some author info for an <article>?
</footer>
접근성 고려사항
VoiceOver 스크린 리더는 랜드마크 로터에서 푸터의 랜드마크 역할을 표현하지 않는 문제가 있습니다. 해결하려면 <footer>에 role="contentinfo"를 추가하세요.
같이 보기
- 다른 구획 관련 요소들:
<body>,<nav>,<article>,<aside>,<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,<hgroup>,<header>,<section>,<address>