<figure>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

HTML <figure> 요소는 독립적인 콘텐츠를 표현합니다. <figcaption> 요소를 사용해 설명을 붙일 수 있습니다. 피규어, 설명, 콘텐츠는 하나의 단위로 참조됩니다.

시도해보기

콘텐츠 카테고리 플로우 콘텐츠, 구획 루트, 뚜렷한 콘텐츠.
가능한 콘텐츠

<figcaption>과 뒤따르는 플로우 콘텐츠.
혹은 플로우 콘텐츠를 뒤따르는 <figcaption>.
혹은 플로우 콘텐츠.

태그 생략 불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다.
가능한 부모 요소 플로우 콘텐츠를 허용하는 모든 요소.
가능한 ARIA 역할 group, presentation
DOM 인터페이스 HTMLElement

특성

이 요소는 전역 특성만 포함합니다.

사용 일람

  • 보통 <figure>는 주 문서 플로우가 참조하지만, 다른 부분이나 부록으로 이동해도 문제 없는 이미지, 삽화, 도표, 코드 조각 등을 맡습니다.
  • <figure>는 구획 루트이므로 <figure> 요소의 콘텐츠는 문서의 주 개요에서 제외됩니다.
  • 안에 (처음이나 마지막 자식으로) <figcaption>을 넣어서 설명을 덧붙일 수 있습니다. 제일 처음 <figcaption>을 설명으로 사용합니다.

예제

이미지

html
<!-- Just an image -->
<figure>
  <img
    src="https://developer.mozilla.org/static/img/favicon144.png"
    alt="A robotic monster over the letters MDN." />
</figure>

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

코드 조각

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>

인용문

html
<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>

html
<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>

명세

Specification
HTML
# the-figure-element

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
figure

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

같이 보기