This page was translated from English by the community.Learn more and join the MDN Web Docs community.
<figure>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.
HTML<figure> 요소는 독립적인 콘텐츠를 표현합니다.<figcaption> 요소를 사용해 설명을 붙일 수 있습니다. 피규어, 설명, 콘텐츠는 하나의 단위로 참조됩니다.
시도해 보기
<figure> <img src="/shared-assets/images/examples/elephant.jpg" alt="Elephant at sunset" /> <figcaption>An elephant at sunset</figcaption></figure>figure { border: thin #c0c0c0 solid; display: flex; flex-flow: column; padding: 5px; max-width: 220px; margin: auto;}img { max-width: 220px; max-height: 150px;}figcaption { background-color: #222; color: #fff; font: italic smaller sans-serif; padding: 3px; text-align: center;}| 콘텐츠 카테고리 | 플로우 콘텐츠, 구획 루트, 뚜렷한 콘텐츠. |
|---|---|
| 가능한 콘텐츠 |
|
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다. |
| 가능한 부모 요소 | 플로우 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 역할 | group,presentation |
| DOM 인터페이스 | HTMLElement |
특성
이 요소는전역 특성만 포함합니다.
사용 일람
- 보통
<figure>는 주 문서 플로우가 참조하지만, 다른 부분이나 부록으로 이동해도 문제 없는 이미지, 삽화, 도표, 코드 조각 등을 맡습니다. <figure>는 구획 루트이므로<figure>요소의 콘텐츠는 문서의 주 개요에서 제외됩니다.- 안에 (처음이나 마지막 자식으로)
<figcaption>을 넣어서 설명을 덧붙일 수 있습니다. 제일 처음<figcaption>을 설명으로 사용합니다.
예제
이미지
html
<!-- Just an image --><figure> <img src="/shared-assets/images/examples/favicon144.png" alt="A robotic monster over the letters MDN." /></figure><!-- Image with a caption --><figure> <img src="/shared-assets/images/examples/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> 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 |