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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
|
---
title: <figure>
slug: Web/HTML/Element/figure
tags:
- Element
- HTML
- HTML grouping content
- Reference
translation_of: Web/HTML/Element/figure
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary"><strong>HTML <code><figure></code> 요소</strong>는 독립적인 콘텐츠를 표현합니다. {{htmlelement("figcaption")}} 요소를 사용해 설명을 붙일 수 있습니다.</span> 피규어, 설명, 콘텐츠는 하나의 단위로 참조됩니다.</p>
<div>{{EmbedInteractiveExample("pages/tabbed/figure.html","tabbed-shorter")}}</div>
<div 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.</div>
<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" title="HTML/Content_categories">콘텐츠 카테고리</a></th>
<td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠" title="HTML/Content categories#Flow content">플로우 콘텐츠</a>, 구획 루트, 뚜렷한 콘텐츠.</td>
</tr>
<tr>
<th scope="row">가능한 콘텐츠</th>
<td>
<p>{{htmlelement("figcaption")}}과 뒤따르는 <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐</a>츠.<br>
혹은 플로우 콘텐츠를 뒤따르는 <code><figcaption></code>.<br>
혹은 플로우 콘텐츠.</p>
</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>를 허용하는 모든 요소.</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>보통 <code><figure></code>는 주 문서 플로우가 참조하지만, 다른 부분이나 부록으로 이동해도 문제 없는 이미지, 삽화, 도표, 코드 조각 등을 맡습니다.</li>
<li><code><figure></code>는 구획 루트이므로 <code><figure></code> 요소의 콘텐츠는 문서의 주 개요에서 제외됩니다.</li>
<li>안에 (처음이나 마지막 자식으로) {{HTMLElement("figcaption")}}을 넣어서 설명을 덧붙일 수 있습니다. 제일 처음 <code><figcaption></code>을 설명으로 사용합니다.</li>
</ul>
<h2 id="예제">예제</h2>
<h3 id="이미지">이미지</h3>
<pre class="brush: html"><code><!-- Just an image -->
<figure>
<img
src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
alt="A robotic monster over the letters MDN.">
</figure>
<!-- Image with a caption -->
<figure>
<img
src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
alt="A robotic monster over the letters MDN.">
<figcaption>MDN Logo</figcaption>
</figure></code>
</pre>
<p>{{EmbedLiveSample("이미지", "100%", 250)}}</p>
<h3 id="코드_조각">코드 조각</h3>
<pre class="brush: html"><figure>
<figcaption><code>navigator</code>를 이용하여 브라우저 정보 얻기</figcaption>
<pre>
function NavigatorExample() {
var txt;
txt = "Browser CodeName: " + navigator.appCodeName;
txt+= "Browser Name: " + navigator.appName;
txt+= "Browser Version: " + navigator.appVersion ;
txt+= "Cookies Enabled: " + navigator.cookieEnabled;
txt+= "Platform: " + navigator.platform;
txt+= "User-agent header: " + navigator.userAgent;
}
</pre>
</figure>
</pre>
<p>{{EmbedLiveSample("코드_조각", "100%", 250)}}</p>
<h3 id="인용문">인용문</h3>
<figure>
<pre class="brush: html"><code><figure>
<figcaption><cite>Edsger Dijkstra:</cite></figcaption>
<blockquote>If debugging is the process of removing software bugs,
then programming must be the process of putting them in.</blockquote>
</figure></code>
</pre>
<p>{{EmbedLiveSample("인용문")}}</p>
</figure>
<h3 id="시">시</h3>
<figure>
<pre class="brush: html"><code><figure>
<p style="white-space:pre">
Bid me discourse, I will enchant thine ear,
Or like a fairy trip upon the green,
Or, like a nymph, with long dishevell'd hair,
Dance on the sands, and yet no footing seen:
Love is a spirit all compact of fire,
Not gross to sink, but light, and will aspire.</p>
<figcaption><cite>Venus and Adonis</cite>,
by William Shakespeare</figcaption>
</figure></code>
</pre>
<p>{{EmbedLiveSample("시", "100%", 250)}}</p>
</figure>
<h2 id="Specifications" name="Specifications">명세</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'semantics.html#the-figure-element', '<figure>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5.2', 'grouping-content.html#the-figure-element', '<figure>')}}</td>
<td>{{Spec2('HTML5.2')}}</td>
<td>No changes from HTML 5.0.</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-figure-element', '<figure>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("html.elements.figure")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li>{{HTMLElement("figcaption")}}</li>
</ul>
|
