[html5] figure 태그, figcaption 태그

 

 

[html5] figure 태그, figcaption 태그

 

책이나 잡지에서 이미지, 차트 등이 나올 때 이를 설명하는 문구와 함께 소개됩니다.

 

figure 요소는 이처럼 사진, 도표, 삽화, 오디오, 비디오, 코드 등을 담는 컨테이너 역할을 하는 태그이고,

 

figcaption 요소는 이에 대한 설명하는 문구를 담는 태그 입니다.

 

figcaption 요소는 선택적이며, figure 요소 안에 사용합니다 (내용 앞 뒤로 올 수 있음)

 

figcaption 요소는 figure 요소에서 한 번만 사용할 수 있으며

 

figure 안에는 여러 가지의 자식 요소(img, code 등)을 포함할 수 있습니다. 
 

 

▷ 브라우저 지원

 

 

ie 9.0+, chrome 6.0+, firefox 4.0+, safari 5.0+, opera 11.1+

 

 

 

사용 예 1.

 

<figure>
  <img src="zoo.jpg" alt="zoo">
</figure> 

 

 

사용 예 2.

 

<figure>
  <img src="monkey.jpg" alt="monkey in the trees">
  <figcaption>나무에 있는 원숭이 무리 (사진:지구별에)</figcaption>
</figure>

 

 

사용 예 3.

 

<figure id="zoo">
  <img src="lion.png" alt="lion">
  <img src="tigar.png" alt="tigar">
  <img src="bear.png" alt="bear">
  <figcaption>동물원 동물들. 왼쪽에서 오른쪽으로 사자, 호랑이, 곰</figcaption>
</figure>

 

 

 

▷html, css 작성 예를 보겠습니다.

 

html

<article>  
<h3>Cheetah</h3>
<p>Cheetahs have adorned the courts of kings, queens, and empero...
 </p>
<figure>
<img src="cheetah.png" alt="cheetah">
<figcaption>지구별 동물원의 치타</figcaption>

</figure>

</article>

 

 

css

figure{background-color:#E4F7BA; padding:10px;}

 

 

▷실행화면

 

 figure 와 figcaption은 둘 다  블록 요소입니다.

 

 

▷ figure와 aside 차이

 

내용이 단순히 관련돼(느슨하게) 있고, 필수적인 내용이 아니면 aside

내용이 직접적인 관련이 있지만, 문맥상  그것의 위치가 중요하지 않으면 figure

 

 

[html5] aside 태그

 

[html5] article vs section 차이

 

웹사이트 운영자라면 알아야할 html, css 상식

 

HTML5 기본 레이아웃