figure, figcaption

이번 HTML5에 새롭게 추가된 태그이다.

HTML figure 요소는 독립적인 콘텐츠를 표현합니다. figcaption 요소를 사용해 설명을 붙일 수 있습니다.

developer.mozilla.org

이미지나 도표등을 넣을때 아래쪽에 간단하게 설명문구 (캡션)을 달수있게 해주는 CSS다.

기존에는 이미지를 넣을곳을 DIV로 감싸고 작업을 하였는데 접근성을 위해 추가된거 같다.

어렵진 않지만 생소한 태그라서 정리해둔다.

아래는 사용방법이다. 접근성부분은 최대한 활용하는게 좋으니 다음작업때 사용해야겠다.

// html

<body>
 <figure>
  <img src="sample.jpg" />
  <figcaption>샘플이미지 캡션입니다.</figcaption>
 </figure>
</body>

// css

figure {
  display: inline-block;
}

figcaption {
  text-align: center;
  margin-top: 10px;
}

마지막으로 결과물이다.

:focus-within (하위 요소에 focus된 객체가 있을 시) (0)	2022.10.22
pointer-events (포인터 이벤트 제어) (0)	2022.10.12
:root -- var (변수선언) (0)	2021.04.03
text-indent (0)	2020.03.30

댓글