[html] figure & figcaption

http://rwdb.kr/mouseoverinteraction/

위 사이트를 둘러보며 html, css 관련 새로 알게 된 것들을 포스팅해보려고 한다.

화려하고 재미있는 애니메이션들이 잘 정리되어있는 페이지인 것 같다.

 

---

figure & figcaption 태그

 

figure

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

- 사진, 도표, 이미지, 오디오, 비디오 등을 담는 콘테이너 역할을 한다.

- figure 요소는 문서 내에서 자기완결적이고, 하나의 단위로서 참조되는 콘텐츠를 표현한다.

예를 들어, 아래와 같이 문장 안에 들어있는 이미지에 <figure> 태그를 사용하는 것은 부적절하다.

 

figcaption

- 위 콘텐츠에 대한 설명 문구를 담는 태그이다. figure 요소 안에 사용하며, 한 번만 사용할 수 있다.

 

 

사용예시

<figure>
  <img src="https://picsum.photos/seed/picsum/200/300" alt="">
  <figcaption>사진 설명을 해줍니다.</figcation>
</figure>