figure 엘리먼트 알아보기


썸네일

<figure> 엘리먼트는 이미지, 도표, 사진, 코드 블록 등의 콘텐츠를 담는 컨테이너 역할을 한다. <figure> 엘리먼트는 <figcaption> 엘리먼트와 함께 사용되어 해당 콘텐츠에 대한 설명을 제공한다.

예제

이미지 설명
이미지 설명
<figure>
  <img src="https://via.placeholder.com/150" alt="이미지 설명">
  <figcaption>이미지 설명</figcaption>
</figure>

접근성

<figure> 엘리먼트는 이미지나 도표 등의 콘텐츠에 대한 설명을 제공할 수 있기 때문에 웹 접근성을 높일 수 있습니다. <figcaption> 엘리먼트는 부모 엘리먼트인 <figure> 엘리먼트에 대한 설명을 제공하므로 스크린 리더 사용자에게 해당 콘텐츠에 대한 정보를 제공할 수 있습니다.

참고 자료