figure element - by. UXKM

2025-05-16

요약 설명
<figure> 요소는 독립적인 시각적 콘텐츠를 그룹화하는 시맨틱 태그로, 이미지, 다이어그램, 코드 샘플, 차트 등의 부가적인 콘텐츠를 포함합니다.
본문과는 별도로 참조 가능한 콘텐츠 블록을 나타내며, <figcaption> 요소와 함께 사용하여 설명이나 캡션을 추가할 수 있습니다. 또한, 문서의 주요 흐름과 구조적으로 구분되며, 이동하거나 반복 사용이 가능하다는 특징이 있습니다.

주요 역할 및 특징

독립적인 콘텐츠 그룹화
- <figure>는 이미지, 도표, 차트 등과 같은 콘텐츠를 그룹화하여 문서의 의미를 명확히 합니다.
- 문서의 주요 흐름과 관련된 부가적인 정보를 제공하지만, 독립적으로 사용할 수도 있습니다.
<figcaption>와 함께 사용
- <figure> 내부에 <figcaption>를 추가하여 콘텐츠에 대한 설명이나 제목을 제공할 수 있습니다.
- <figcaption>는 선택적 요소이며, <figure>의 첫 번째 또는 마지막 요소로 배치됩니다.
독립적 사용 가능
<figure>에 포함된 콘텐츠는 문서의 나머지 부분과 독립적으로 사용할 수 있으며, 제거하더라도 문서의 의미가 손상되지 않아야 합니다.
다양한 콘텐츠 지원
이미지(<img>), 비디오(<video>), 오디오(<audio>), 코드 블록(<pre>), 차트 등 다양한 콘텐츠를 포함할 수 있습니다.

CSS 기본 값

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

							figure {
								display: block;
							}

기본 문법

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

속성

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

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

예제

이미지와 설명

								<figure>
									<img src="mountain.jpg" alt="산의 풍경">
									<figcaption>아름다운 산의 풍경</figcaption>
								</figure>

코드 블록과 설명

								<figure>
									<pre>
										<code>
											console.log('Hello, World!');
										</code>
									</pre>
									<figcaption>간단한 JavaScript 출력 예제</figcaption>
								</figure>

동영상과 캡션

								<figure>
									<video controls>
										<source src="video.mp4" type="video/mp4">
										동영상을 지원하지 않는 브라우저입니다.
									</video>
									<figcaption>웹 개발에 대한 동영상 설명.</figcaption>
								</figure>

표와 설명

								<figure>
									<table>
										<tr>
											<th>이름</th>
											<th>점수</th>
										</tr>
										<tr>
											<td>홍길동</td>
											<td>90</td>
										</tr>
										<tr>
											<td>김철수</td>
											<td>85</td>
										</tr>
									</table>
									<figcaption>학생들의 시험 점수</figcaption>
								</figure>

중첩된 figure

								<figure>
									<img src="nature.jpg" alt="아름다운 자연 풍경" width="600">
									<figcaption>자연 풍경 사진: 산과 호수</figcaption>

									<figure>
										<img src="mountain.jpg" alt="눈 덮인 산" width="300">
										<figcaption>눈 덮인 산</figcaption>
									</figure>

									<figure>
										<img src="lake.jpg" alt="맑은 호수" width="300">
										<figcaption>맑은 호수</figcaption>
									</figure>
								</figure>

접근성을 고려한 콘텐츠

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

주의사항

<figure>에 포함된 콘텐츠는 문서의 주요 흐름과 독립적으로 사용될 수 있어야 하며, 제거하더라도 문서의 의미가 훼손되지 않아야 합니다.
<figcaption>은 <figure>의 필수 요소는 아니지만, 시각적 콘텐츠에 대한 설명이 필요할 경우 추가하여 접근성을 향상시킬 수 있습니다.