Figures
Figures (그림)
이미지와 텍스트를 함께 보여줄 때 쓰는 figure 컴포넌트의 문서와 예시를 다룹니다.
출처: 문서
본문
이미지에 캡션을 붙이는 등 한 덩어리의 콘텐츠를 보여줘야 할 때가 있다면 <figure>를 써 보세요.
포함된 .figure, .figure-img, .figure-caption 클래스를 사용하면 HTML5의 <figure>와 <figcaption> 요소에 기본적인 스타일을 적용할 수 있습니다. figure 안의 이미지는 명시적인 크기가 없으므로 반응형으로 만들려면 <img>에 .img-fluid 클래스를 꼭 추가해 주세요.
<figure class="figure">
<img src="..." class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
figure의 캡션 정렬은 텍스트 유틸리티로 쉽게 할 수 있습니다.
<figure class="figure">
<img src="..." class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
</figure>
CSS
Sass 변수
$figure-caption-font-size: $small-font-size;
$figure-caption-color: var(--#{$prefix}secondary-color);