[HTML] figure / figcaption

HTML5에서 새롭게 추가된 태그와 요소이다.

보통 여러가지 요소들을 묶을 때 div를 많이 사용했으나 figure태그를 통해 웹 접근성을 높일 수 있다.

figure가 '형태'라는 뜻으로 여러가지 요소들을 묶어 한 형태로 만들어 놓는 것이라고 볼 수 있다.

 

<figure> 태그 - 설명 글을 붙일 대상 지정

- 설명 글을 붙여야 할 대상을 지정하거나 웹 문서에서 오디오나 비디오 같은 멀티미디어 파일을 비롯해 사진이나 표, 소스 코드 등 웹 문서 안에서 한 단위가 되는 요소를 묶을 때 사용한다.

- 만약 이미지 태그만 사용한다면 굳이 <figure> 태그를 사용하지 않아도 되지만 이미지에 설명 글을 넣으려면 <figure> 태그로 묶어줘야 한다.

 

<figcaption> 태그 - 설명 글 붙이기

- figure 요소 안에서의 콘텐츠에 대한 제목 출력

 

See the Pen by seyoungjoy (@seyoungjoy) on CodePen.