files/ko/web/html/element/footer/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

---
title: <footer>
slug: Web/HTML/Element/footer
tags:
  - Element
  - HTML
  - HTML sections
  - Reference
translation_of: Web/HTML/Element/footer
---
<div>{{HTMLRef}}</div>

<p><strong>HTML <code>&lt;footer&gt;</code> 요소</strong>는 가장 가까운 <a href="/ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽">구획 콘텐츠</a>나 <a href="/ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽" title="Sections and Outlines of an HTML5 document#Sectioning root">구획 루트</a>의 푸터를 나타냅니다. 푸터는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담습니다.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/footer.html", "tabbed-standard")}}</div>

<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th>
   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
  </tr>
  <tr>
   <th scope="row">가능한 콘텐츠</th>
   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠" title="HTML/Content categories#Flow content">플로우 콘텐츠</a>. 단, {{htmlelement("header")}}와 다른 <code>&lt;footer&gt;</code>는 자손이 될 수 없습니다.</td>
  </tr>
  <tr>
   <th scope="row">태그 생략</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">가능한 부모 요소</th>
   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠" title="HTML/Content categories#Flow content">플로우 콘텐츠</a>를 허용하는 모든 요소. 단, <code>&lt;footer&gt;</code> 요소는 {{htmlelement("address")}}, {{htmlelement("header")}}, 혹은 다른 <code>&lt;footer&gt;</code>의 자손일 수 없습니다.</td>
  </tr>
  <tr>
   <th scope="row">가능한 ARIA 역할</th>
   <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td>
  </tr>
  <tr>
   <th scope="row">DOM 인터페이스</th>
   <td>{{domxref("HTMLElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="특성">특성</h2>

<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>

<h2 id="사용_일람">사용 일람</h2>

<ul>
 <li>{{HTMLElement("address")}} 요소로 감싼 작성자 정보를 <code>&lt;footer&gt;</code> 요소에 배치하세요.</li>
 <li><code>&lt;footer&gt;</code> 요소는 구획 콘텐츠가 아니므로 <a href="/ko/docs/Web/HTML/HTML5_%EB%AC%B8%EC%84%9C%EC%9D%98_%EC%84%B9%EC%85%98%EA%B3%BC_%EC%9C%A4%EA%B3%BD">개요</a>에 새로운 구획을 추가하지 않습니다.</li>
</ul>

<h2 id="예제">예제</h2>

<pre class="brush: html">&lt;footer&gt;
  Some copyright info or perhaps some author
  info for an &amp;lt;article&amp;gt;?
&lt;/footer&gt;
</pre>

<h2 id="Specifications" name="Specifications">접근성 고려사항</h2>

<p><a href="https://help.apple.com/voiceover/mac">VoiceOver</a> 스크린 리더는 랜드마크 로터에서 푸터의 랜드마크 역할을 표현하지 않는 문제가 있습니다. 해결하려면 <code>&lt;footer&gt;</code>에 <code>role="contentinfo"</code>를 추가하세요.</p>

<ul>
 <li><a href="https://bugs.webkit.org/show_bug.cgi?id=146930">WebKit Bugzilla: 146930 – AX: HTML native elements (header, footer, main, aside, nav) should work the same as ARIA landmarks, sometimes they don't</a></li>
</ul>

<h2 id="Specifications" name="Specifications">명세</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">명세</th>
   <th scope="col">상태</th>
   <th scope="col">주석</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'sections.html#the-footer-element', '&lt;footer&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'sections.html#the-footer-element', '&lt;footer&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>


<p>{{Compat("html.elements.footer")}}</p>

<h2 id="같이_보기">같이 보기</h2>

<ul>
 <li>다른 구획 관련 요소들: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("section")}}, {{HTMLElement("address")}}</li>
</ul>