MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

<figure>

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

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

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

속성 (Attributes)

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

사용 유의사항

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

예제

예제 1

<!-- figure 만 사용 -->
<figure>
  <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">
</figure>
<p></p>
<!-- figcaption 을 함께 사용 -->
<figure>
  <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">	
  <figcaption>Fig1. MDN 로고</figcaption>
</figure>
<p></p>
MDN Logo
MDN Logo
Fig1. MDN 로고

예제 2

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

예제 3 

<figure>
  <figcaption><cite>Edsger Dijkstra :-</cite></figcaption>
  <p>"If debugging is the process of removing software bugs, <br /> then programming must be the process of putting them in"</p>
</figure>
Edsger Dijkstra :-

"If debugging is the process of removing software bugs,
then programming must be the process of putting them in"

예제 4

<figure> 요소는 시(poem) 을 마크업 할때 사용할 수 있습니다.

<figure>
 <p>
  Depression is running through my head,<br>
  These thoughts make me think of death,<br>
  A darkness which blanks my mind,<br>
  A walk through the graveyard, what can I find?....
 </p>
 <figcaption><cite>Depression</cite>. By: Darren Harris</figcaption>
</figure>

사양

Specification Status Comment
WHATWG HTML Living Standard
The definition of '<figure>' in that specification.
Living Standard  
HTML5
The definition of '<figure>' in that specification.
Recommendation  

브라우저 호환성

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 8 4.0 (2.0) 9.0 11.10 5.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 3.0 4.0 (2.0) 9.0 11.0 5.1 (iOS 5.0)

같이 보기

문서 태그 및 공헌자

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