HTML <figure> 태그

figure 태그

figure 태그는
주변 콘텐츠의 이해나 흐름과 관련된 이미지, 그림, 도표, 사진, 코드 목록 또는 기타 관련 콘텐츠 등의 독립된 콘텐츠를 나타내는 태그입니다.
선택적으로 figcaption 태그를 사용해서 이 콘텐츠를 참조할 수 있는 캡션(설명)을 추가할 수 있습니다.

사용법 참고 사항

figure 태그를 단순히 이미지나 사진, 도표, 코드 목록 또는 기타 관련 콘텐츠를 구성하는 태그라고 생각하지 마세요.
figure 태그의 콘텐츠는 주변 콘텐츠의 이해를 돕기위해 내용 흐름과 관련되어야 하지만, figure 태그가 없더라도 주변의 흐름에 지장을 주지 않는 독립적인 콘텐츠입니다. 즉, 주변 콘텐츠의 이해나 흐름과 관련된 이미지나 사진, 도표, 코드 목록 또는 기타 미디어 등의 독립된 콘텐츠입니다.
여기에서 '독립된 콘텐츠'는 '반드시 독립적인 별개의 콘텐츠'를 의미하지 않습니다.
'독립된 콘텐츠'라는 의미는 주변 콘텐츠에서 figure 태그로 표현된 콘텐츠가 없어도 맥락의 흐름에 지장이 없이 이해나 흐름과 관련된 자체적인 콘텐츠를 의미합니다.
만약 주변 콘텐츠의 내용 흐름과 별개인 콘텐츠의 경우에는 aside 태그가 더 적합합니다.

사용 예제

일반적인 이미지로만 구성된 예제

<p>인류가 살고 있는 지구는 아름답습니다.</p>
<figure>
    <img src="earth.jpg" alt="우주에서 둥글고 푸른빛으로 빛나는 지구">
</figure>

figcaption 태그를 사용해서 캡션 추가

<p>인류가 살고 있는 지구는 아름답습니다.</p>
<figure>
    <img src="earth.jpg" alt="우주에서 둥글고 푸른빛으로 빛나는 지구">
    <figcaption>우주에서 바라본 지구</figcaption>
</figure>

figcaption 태그 사용 시 주의할 점
figcaption 태그는 오직 부모 요소인 figure 태그의 콘텐츠를 참조할 수 있는 캡션(설명)이나 범례를 나타내기 위해 사용하는 태그입니다.
선택적으로 사용할 수 있지만, 사용할 경우에는 figure 태그의 첫 번째 자식 요소나 마지막 자식 요소로만 사용되어야 합니다.

CSS로 배경 이미지를 활용한 콘텐츠

<p>인류가 살고 있는 지구는 아름답습니다.</p>
<figure></figure>

figure {
    background-image: url("earth.jpg");
}

비디오를 활용한 콘텐츠

<p>인류가 살고 있는 지구는 아름답습니다.</p>
<figure>
    <video src="earth.mp4" muted autoplay playsinline loop></video>
</figure>

코드 조각

코드 조각은 개발 문서 등에 많이 활용됩니다. 개발 문서의 내용을 이해하기 쉽게 figure 태그에 코드 조각을 콘텐츠로 사용한 예제입니다.

<p>typeof 연산자는 피연산자의 데이터 타입을 문자열로 반환하는 연산자입니다.</p>
<figure>
    <figcaption>typeof 연산자의 기본 예제</figcaption>
    <pre>
        <code>
            let a;
            console.log(typeof a); // 출력: "undefined"
        </code>
    </pre>
</figure>

위의 예제들처럼 figure 태그는 주변 콘텐츠의 이해나 흐름관 관련된 이미지, 그림, 도표, 사진, 코드 목록 또는 기타 관련 콘텐츠 등의 독립된 콘텐츠를 나타내는 모든 곳에 활용 수 있습니다.