HTML <figure> 태그 – 올바른 이해와 사용 방법

`<figure>` 태그

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

사용법 참고 사항

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

사용 예제

다음의 예제들 살펴보면 <figure> 태그가 어떻게 사용되었는지를 쉽게 파악할 수 있습니다.

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

다음은 주변 콘텐츠의 이해를 돕기위해 <img> 태그로 이미지를 콘텐츠로 사용한 <figure> 태그의 예제입니다.

HTML

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

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

다음의 예제는 <figcaption> 태그를 사용해서 이 콘텐츠를 참조할 수 있는 캡션(설명)을 추가했습니다.

부연설명
<figcaption> 태그는 오직 부모 요소인 <figure> 태그의 콘텐츠를 참조할 수 있는 캡션(설명)이나 범례을 나타내기 위해 사용하는 태그입니다.

HTML

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

<figcaption> 태그 사용 시 주의할 점이 있습니다.

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

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

<figure> 태그 내부에 반드시 콘텐츠가 있어야 하는 것은 아닙니다.
다음은 <figure> 태그에 콘텐츠가 없이 CSS background-image 속성으로 배경 이미지를 구현한 예입니다.

위 예제를 보고 의아해 할 수 있습니다. <figure> 태그는 주변 콘텐츠의 이해나 흐름관 관련된 독립적인 콘텐츠를 나타냅니다. 위 예제와 같은 사용은 웹 콘텐츠의 접근성을 고려해서 이미지 등에 주요 정보가 포함되어 있지 않는 시각적 장식용으로, 시각장애인에게 불편을 주지 않는 경우에 한정되게 사용할 수 있습니다.

비디오를 활용한 콘텐츠

다음은 주변 콘텐츠의 이해를 돕기위해 <video> 태그로 동영상을 콘텐츠로 사용한 <figure> 태그의 예제입니다.

HTML <video> 태그 자동 재생 완벽가이드

코드 조각

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

HTML

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

코드 부연설명
<pre> 태그는 작성한 서식을 유지한 텍스트 블록을 나타낼때 사용합니다.
즉, 이 태그를 사용하면 들여쓰기, 줄바꿈, 공백 등 작성한 그대로의 원본 서식이 브라우저에 표시됩니다.

코드 부연설명
<code> 태그는 컴퓨터 코드의 일부를 나타냅니다.

실제 적용된 모습