HTML <figure>: 독립 콘텐츠 요소

HTML <figure> 요소는 독립적인 콘텐츠를 나타냅니다. 선택적으로 <figcaption>을 사용해 설명을 제공할 수 있습니다.

<figure>
  <img src="/assets/plumbing.jpg" alt="복잡한 배관 사진." />
  <figcaption>모범 사례</figcaption>
</figure>

figure {
  background: #fff;
  border: 1px solid #000;
  color: #000;
  max-width: 320px;
  text-align: center;
  padding: 8px;
}
img {
  width: 100%;
}
figcaption {
  font-size: 12px;
}

특성

전역 특성만 포함합니다.

사용 일람

• <figure>는 이미지, 삽화, 도표, 코드 조각 처럼, 문서의 주요 맥락에서 참조하지만 다른 위치나 부록으로 이동해도 영향을 주지 않는 부분을 표현합니다.
• <figcaption> 요소를 <figure>의 처음 또는 마지막 자식으로 포함해서 설명을 나타낼 수 있습니다. 복수의 <figcaption>이 존재하는 경우 가장 처음의 <figcaption>만 <figure>의 설명으로 취급합니다.

명세

HTML Living Standard

브라우저 호환성

같이 보기

• 독립 콘텐츠의 설명: <figcaption>