figcaption element - by. UXKM

2025-05-16

요약 설명
<figcaption> 요소는 <figure> 요소 내부에서 해당 시각 콘텐츠(예: 이미지, 그래프, 코드 등)에 대한 설명 또는 캡션을 제공하는 시맨틱 태그입니다.
<figure>의 첫 번째 또는 마지막 자식 요소로 위치하며, 그 콘텐츠가 무엇을 의미하는지 설명하거나 출처 등을 명시하는 데 사용됩니다. 시각 콘텐츠에 의미를 부여하고, 접근성을 높이는 데 중요한 역할을 합니다.

주요 역할 및 특징

콘텐츠에 대한 설명 제공
- <figcaption>은 <figure> 내 콘텐츠에 대한 제목이나 부연 설명을 제공합니다.
- 예: 이미지의 제목, 차트의 설명, 코드 블록의 부연 설명 등.
<figure>와 함께 사용
- <figcaption>는 반드시 <figure> 요소의 자식으로 사용되어야 하며, 독립적으로 사용할 수 없습니다.
- <figure> 내에서 첫 번째 또는 마지막 요소로 배치됩니다.
의미론적 역할
- <figcaption>은 콘텐츠의 설명을 구조적으로 제공하며, 접근성과 SEO 측면에서 유리합니다.
- 스크린 리더는 <figcaption> 내용을 캡션으로 인식하여 사용자에게 전달합니다.
포함 가능한 콘텐츠
- 텍스트와 인라인 요소를 포함할 수 있습니다.
- 블록 요소는 포함할 수 없으므로 간단한 설명이나 텍스트로 구성하는 것이 좋습니다.

CSS 기본 값

<figcaption> 요소는 기본적으로 블록 레벨 요소입니다.

							figcaption {
								display: block;
							}

기본 문법

							<figure>
								<img src="example.jpg" alt="예시 이미지">
								<figcaption>이미지에 대한 설명</figcaption>
							</figure>

속성

<figcaption> 요소는 고유 속성을 가지지 않으며, 글로벌 속성(class, id, style, aria-*, data-* 등)만 사용할 수 있습니다.

							<figure>
								<img src="example.jpg" alt="예시 이미지">
								<figcaption id="image-caption" class="caption">이미지에 대한 설명</figcaption>
							</figure>

예제

이미지와 함께 설명 제공

								<figure>
									<img src="sunset.jpg" alt="저녁 노을" width="600">
									<figcaption>저녁 노을: 평화로운 해질녘의 풍경</figcaption>
								</figure>

비디오와 함께 설명 제공

								<figure>
									<video width="600" controls>
										<source src="documentary.mp4" type="video/mp4">
										<p>이 브라우저는 비디오를 지원하지 않습니다.</p>
									</video>
									<figcaption>자연 다큐멘터리: 지구의 아름다운 생태계를 탐험하는 영상</figcaption>
								</figure>

차트나 데이터 시각화와 함께 설명 제공

								<figure>
									<img src="sales-chart.png" alt="2025년 판매 차트" width="600">
									<figcaption>2025년 상반기 판매 차트: 상승하는 판매 추세</figcaption>
								</figure>

접근성을 고려한 설명

								<figure aria-labelledby="fig1-caption">
									<img src="chart.png" alt="2025년 IT 트렌드 그래프">
									<figcaption id="fig1-caption">2025년 주요 IT 트렌드 차트 설명.</figcaption>
								</figure>

주의사항

<figcaption>은 반드시 <figure> 요소 내부에 위치해야 하며, 단독으로 사용할 수 없습니다.
<figcaption>은 <figure> 안에서 첫 번째 또는 마지막 자식 요소로 배치해야 합니다.
<figcaption>의 내용이 해당 콘텐츠와 관련이 있음을 명확히 작성해야 합니다.