<figure>

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

속성 (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>

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

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>

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

사양

브라우저 호환성

같이 보기

• <figcaption>