HTML5에서 추가된 유용한 태그 <figure>

이 포스트에서는 HTML5에서 추가된 <figure> … </figure> 태그에 관한 내용입니다.

이 태그는 HTML5에서 본문 내용 안에 첨부자료(사진, 그래프 등)를 삽입하기 위한 태그입니다. 이 태그 안에 첨부자료를 삽입하는 태그를 넣고 추가적으로 설명문(caption)을 넣어서 씁니다. 신문 등을 보면 본문 중간에 사진이 있고 그 밑으로 사진의 설명문이 있는 것을 볼 수 있는데 <figure> 태그가 바로 이런 형태를 구현하기 위한 태그입니다.

일단, 다음 태그를 봅시다.

<figure>
	<img src="cov_glass.jpg" width="200" height="200" />
	<figcaption>여자친구의 미니 1집 &lt;Season of Glass&gt;</figcaption>
</figure>

이 태그의 실행 결과는 다음과 같습니다.

이렇게 사진과 설명문이 함께 표시됩니다.

여기서 <figcaption> … </figcaption> 태그가 <figure> 안의 자료에 설명문을 넣기 위한 태그입니다. <figcaption> 태그는 하나의 <figure> 안에 하나씩만 사용할 수 있습니다.

물론 CSS를 이용하면 다음과 같은 구현도 가능합니다.

<h2>유리구슬 (Glass of Bead)</h2>

<figure style="float: right; text-align: center;">
	<img src="cov_glass.jpg" width="200" height="200" />
	<figcaption>여자친구의 미니 1집<br />&lt;Season of Glass&gt;</figcaption>
</figure>

<p>투명한 유리구슬처럼 보이지만 그렇게 쉽게 깨지진 않을 거야<br />
사랑해 너만을 변하지 않도록 영원히 널 비춰줄게</p>

<p>내가 약해 보였나요 언제나 걱정됐나요<br />
달빛에 반짝이는 저 이슬처럼 사라질 것만 같나요</p>

<p>불안해마요 꿈만 같나요 널 위해서 빛나고 있어<br />
떨리는 그대 손을 꽉 잡아줄게요 따스히 감싸줄게요</p>

...

유리구슬 (Glass of Bead)

투명한 유리구슬처럼 보이지만 그렇게 쉽게 깨지진 않을 거야
사랑해 너만을 변하지 않도록 영원히 널 비춰줄게

내가 약해 보였나요 언제나 걱정됐나요
달빛에 반짝이는 저 이슬처럼 사라질 것만 같나요

불안해마요 꿈만 같나요 널 위해서 빛나고 있어
떨리는 그대 손을 꽉 잡아줄게요 따스히 감싸줄게요

…

이와 같이 HTML로 본문에 첨부자료를 삽입하는 태그를 구현할 수 있습니다.