HTML <figure> 요소는 독립적인 콘텐츠를 표현합니다. 흔히 설명(<figcaption>) 과 함께 사용되며, 보통 단일적으로 참조됩니다.

콘텐츠 범주 플로우 콘텐츠, sectioning root, palpable content.
허용된 콘텐츠 플로우 콘텐츠 다음의 <figcaption>요소, 또는 <figcaption> 다음의 플로우 콘텐츠, 또는 플로우 콘텐츠.
태그 생략 None, both the starting and ending tag are mandatory.
허용된 부모 요소 플로우 콘텐츠를 허용하는 모든 요소.
혀용된 ARIA 역할 group, presentation
DOM 인터페이스 HTMLElement

속성

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

사용 유의사항

  • 보통 <figure>는 주 문서에 영향을 주지 않으면서 다른 부분이나 부록으로 옮길 수 있는, 주 문서에서 참조하는 이미지나 삽화, 도표, 코드 조각 등입니다.
  • <figure>는 섹션 루트로, 안쪽 내용은 주 문서의 내용에서 배제됩니다.
  • 안에 (첫번째나 마지막 자식으로) <figcaption>을 넣어서 설명을 <figure> 요소와 연관지을 수 있습니다.

예제

이미지

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

코드 조각

<figure>
  <figcaption>navigator를 이용하여 브라우저 정보 얻기</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>

인용문

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

<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 Status Comment
HTML Living Standard
The definition of '<figure>' in that specification.
Living Standard  
HTML 5.2
The definition of '<figure>' in that specification.
Recommendation No changes from HTML 5.0.
HTML5
The definition of '<figure>' in that specification.
Recommendation  

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 8Edge Full support YesFirefox Full support 4IE Full support 9Opera Full support 11Safari Full support 5.1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support 11Safari iOS Full support 5.1Samsung Internet Android Full support Yes

Legend

Full support  
Full support

같이 보기

문서 태그 및 공헌자

이 페이지의 공헌자: urty5656, hyeonseok, Kei_
최종 변경자: urty5656,