[html 태그] figure, figcaption 태그

figure 태그와 figcaption 태그는 html5에 들어서 추가된 태그이며

이미지, 삽화, 도표 등의 내용을 담는 태그이다.

 

1. figure 태그

figure 태그는 문서의 내용과 상관은 있지만

figure 태그가 제거 되거나 다른 곳으로 이동해도 문서의 내용에 영향을 주지 않아야 한다.

 

<figure>
  <img src="./icecream.jpg" alt="바닐라 아이스크림이 녹는 모습">
</figure>

태그의 사용은 기본적으로 figure 태그 안에 img태그를 넣어 사용한다.

 

 

2. figcaption 태그

figcaption 태그는 이전에 table 태그에 대해 다룰 때 사용했던 caption 태그와 유사하게

figure 태그 안에 있는 내용에 대한 설명을 나타낸다.

 

즉, table태그 안에 caption태그는 table 내용을 설명하고

figure태그 안에 figcaption태그는 figure 태그 안에 있는 내용을 설명한다.

 

2021/01/27 - [Frontend/HTML] - [html 태그] caption 태그 (table 태그, summary 속성)

 

<figure>
  <figcaption>바닐라 아이스크림</figcaption>
  <img src="./icecream.jpg" alt="바닐라 아이스크림이 녹는 모습">
</figure>

태그의 사용은 figure 태그 안에 사용하고

figure 태그 안에 제일 처음 혹은 제일 마지막 자식으로 위치할 수 있다.

 

[!] 여러개의 figcaption 태그가 들어가게 되면 가장 첫 번째 자식으로 오는 figcaption 태그의 설명을 사용한다.

 

 

 

---

참고

developer.mozilla.org/ko/docs/Web/HTML/Element/figure