Figure & Figcaption

<figure>

가끔 캡션이 있는 이미지를 접하게 된다. HTML5는 이미지와 캡션이 연결되도록 이미지와 캡션을 포함하는 새로운 <figure> 요소를 도입했다.

<figure> 요소 안에 하나 이상의 이미지를 포함시켜 동일한 캡션을 공유할 수도 있다. (즉 figure 태그 안에 여러 개의 img 태그를 사용하면 여러 장의 그림에 하나의 설명글을 붙일 수도 있다.)




<figcaption>

<figcaption>요소는 웹 페이지 제작자가 이미지에 캡션을 추가할 수 있도록 HTML5에 추가했다.

이들 요소가 있기 전에는 요소와 해당 캡션을 연결할 수 있는 방법이 없었다.

HTML5 요소를 지원하지 못하는 예전 브라우저는 새로운 요소를 무시하고 요소의 내용만 표시한다.

물위에 떠 있는 두마리의 수달 사진
바다 수달은 서로 떨어지지 않도록 잠잘 때 손을 잡는다.
						<figure>
							<img src="/florakid_lib/images/sample/otters.jpg" alt="물위에 떠 있는 두마리의 수달 사진" />
							<figcaption>
								바다 수달은 서로 떨어지지 않도록 잠잘 때 손을 잡는다.
							</figcaption>
						</figure>