---
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>&lt;figure&gt;</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>&lt;figcaption&gt;</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>&lt;figure&gt;</code>는 주 문서 플로우가 참조하지만, 다른 부분이나 부록으로 이동해도 문제 없는 이미지, 삽화, 도표, 코드 조각 등을 맡습니다.</li>
 <li><code>&lt;figure&gt;</code>는 구획 루트이므로 <code>&lt;figure&gt;</code> 요소의 콘텐츠는 문서의 주 개요에서 제외됩니다.</li>
 <li>안에 (처음이나 마지막 자식으로) {{HTMLElement("figcaption")}}을 넣어서 설명을 덧붙일 수 있습니다. 제일 처음 <code>&lt;figcaption&gt;</code>을 설명으로 사용합니다.</li>
</ul>

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

<h3 id="이미지">이미지</h3>

<pre class="brush: html"><code>&lt;!-- Just an image --&gt;
&lt;figure&gt;
  &lt;img
  src="https://developer.mozilla.org/static/img/favicon144.png"
  alt="A robotic monster over the letters MDN."&gt;
&lt;/figure&gt;

&lt;!-- Image with a caption --&gt;
&lt;figure&gt;
  &lt;img
  src="https://developer.mozilla.org/static/img/favicon144.png"
  alt="A robotic monster over the letters MDN."&gt;
  &lt;figcaption&gt;MDN Logo&lt;/figcaption&gt;
&lt;/figure&gt;</code>
</pre>

<p>{{EmbedLiveSample("이미지", "100%", 250)}}</p>

<h3 id="코드_조각">코드 조각</h3>

<pre class="brush: html">&lt;figure&gt;
  &lt;figcaption&gt;&lt;code&gt;navigator&lt;/code&gt;를 이용하여 브라우저 정보 얻기&lt;/figcaption&gt;
  &lt;pre&gt;
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;
}
  &lt;/pre&gt;
&lt;/figure&gt;
</pre>

<p>{{EmbedLiveSample("코드_조각", "100%", 250)}}</p>

<h3 id="인용문">인용문</h3>

<figure>
<pre class="brush: html"><code>&lt;figure&gt;
  &lt;figcaption&gt;&lt;cite&gt;Edsger Dijkstra:&lt;/cite&gt;&lt;/figcaption&gt;
  &lt;blockquote&gt;If debugging is the process of removing software bugs,
  then programming must be the process of putting them in.&lt;/blockquote&gt;
&lt;/figure&gt;</code>
</pre>

<p>{{EmbedLiveSample("인용문")}}</p>
</figure>

<h3 id="시">시</h3>

<figure>
<pre class="brush: html"><code>&lt;figure&gt;
  &lt;p style="white-space:pre"&gt;
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.&lt;/p&gt;
  &lt;figcaption&gt;&lt;cite&gt;Venus and Adonis&lt;/cite&gt;,
    by William Shakespeare&lt;/figcaption&gt;
&lt;/figure&gt;</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', '&lt;figure&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.2', 'grouping-content.html#the-figure-element', '&lt;figure&gt;')}}</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', '&lt;figure&gt;')}}</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>