피규어

// Figures

Bootstrap에서 피규어 컴포넌트를 사용하여 관련 이미지 및 텍스트를 표시하기 위한 문서 및 예시입니다.

선택적 캡션이 있는 이미지와 같은 콘텐츠를 표시해야 할 때마다 <figure>를 사용하는 것을 고려해보세요.

포함된 .figure, .figure-img, .figure-caption 클래스를 사용하여 HTML5 <figure> 및 <figcaption> 요소에 대한 일부 기본 스타일을 제공합니다. Figure의 이미지에는 명시적인 크기가 없으므로 <img>에 .img-fluid 클래스를 추가하여 반응하도록 해야합니다.

A caption for the above image.

html

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

텍스트 유틸리티를 사용하면 피규어의 캡션을 쉽게 정렬할 수 있습니다.

A caption for the above image.

html

<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>

Sass

변수

$figure-caption-font-size:          $small-font-size;
$figure-caption-color:              $gray-600;