HTML <figcaption> 태그

정의 및 사용법

<figcaption> 태그는 <figure> 요소는 제목을 정의합니다.

<figcaption> 요소는 다음 위치에 배치될 수 있습니다. <figure> 요소의 첫 번째 또는 마지막 자식 요소의 위치.

추가로 참조하십시오：

HTML DOM 참조 매뉴얼：Figcaption 객체

인스턴스

예제 1

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

<figure>
  <img src="tulip.jpg" alt="郁金香" style="width:300px">
  <figcaption>그림 1 - 풀밭, 리리아과, 다년생 관엽식물.</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="tulip.jpg" alt="郁金香" style="width:300px">
  <figcaption>그림 1 - 풀밭, 리리아과, 다년생 관엽식물.</figcaption>
</figure>
</body>
</html>

직접 시험해 보세요

전역 속성

<figcaption> 태그는 다음과 같은 이벤트 속성을 지원합니다 HTML에서의 전역 속성.

이벤트 속성

<figcaption> 태그는 다음과 같은 이벤트 속성을 지원합니다 HTML에서의 이벤트 속성.

기본 CSS 설정

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

figcaption {
  display: block;
}

브라우저 지원

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

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