HTML <figure> 태그

정의와 사용법

<figure> 태그는 그림, 차트, 사진, 코드 목록 등과 같은 내용을 자체 포함한 내용을 규정합니다。

다음은 <figure> 요소의 내용은 주요 내용과 관련이 있지만, 그 위치는 주요 내용 흐름에 독립적이며, 그를 제거하더라도 문서 흐름에 영향을 미치지 않아야 합니다。

ヒント：사용하십시오 <figcaption> 요소에 대해 위치에 대해 <figure> 요소에 제목을 추가합니다。

추가로 참조하십시오：

HTML DOM 참조 매뉴얼：Figure 객체

인스턴스

예제 1

<figure> 요소를 사용하여 문서의 사진을 표시하고, <figcaption> 요소를 사용하여 사진의 제목을 정의합니다：

<figure>
  <img src="trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>이탈리아 푸리아 지역의 Trulli.</figcaption>
</figure>

직접 테스트해 보세요

예제 2

CSS를 사용하여 <figure>과 <figcaption>의 스타일을 설정합니다：

<html>
<head>
<style>
figure {
  border: 1px #cccccc solid;
  padding: 4px;
  margin: auto;
}
figcaption {
  background-color: black;
  color: white;
  font-style: italic;
  padding: 2px;
  text-align: center;
}
</style>
</head>
<body>
<figure>
  <img src="trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>이탈리아 푸리아 지역의 Trulli.</figcaption>
</figure>
</body>
</html>

직접 테스트해 보세요

전역 속성

<figure> 태그는 또한 HTML에서의 전역 속성.

이벤트 속성을 지원합니다

<figure> 태그는 또한 HTML에서의 이벤트 속성.

기본 CSS 설정

대부분의 브라우저는 다음과 같은 기본 값으로 표시합니다 <figure> 요소:

figure {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

직접 테스트해 보세요

브라우저 지원

표에서의 숫자는 이 요소를 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
8.0 9.0 4.0 5.1 11.0

주석: <figure> 태그는 HTML 5에서 새로운 태그입니다.