<figure>

HTML <figure> 요소는 독립적인 콘텐츠를 표현합니다. 흔히 캡션(<figcaption>) 과 함께 사용되며, 보통 단일적으로 참조됩니다. 메인 플로우와 연관이 있지만, 이 요소는 플로우에서 독립적으로 위치할 수 있습니다. 보통 본문에서 참조하는 이미지, 일러스트레이션, 도표, 코드 스니펫 또는 스키마가 해당되며, 메인 플로우에 영향없는 다른 페이지나 부록(appendix)으로 옮기는 것도 가능합니다.  

속성 (Attributes)

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

예제 (Examples)

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