[Bootstrap] 12. Image, Figure, Ratio 이해하기

이전 글에서는 Bootstrap의 Breadcrumb, Spinner, Placeholder를 정리했습니다. 이번 글에서는 화면에 이미지를 넣고, 설명과 함께 묶고, 일정한 비율로 콘텐츠를 보여줄 때 사용하는 Image, Figure, Ratio를 살펴보겠습니다.

웹페이지에서 이미지는 단순한 장식이 아니라 정보를 전달하는 중요한 요소입니다. 상품 이미지, 프로필 사진, 게시글 대표 이미지, 배너, 영상 영역처럼 다양한 곳에서 사용됩니다. Bootstrap은 이런 이미지와 미디어 콘텐츠를 더 안정적으로 배치할 수 있는 클래스를 제공합니다.

1. Bootstrap에서 이미지 다루기

HTML에서 이미지는 img 태그로 넣습니다. 하지만 이미지 원본 크기가 화면보다 크면 레이아웃이 깨질 수 있습니다.


<img src="sample.jpg" alt="샘플 이미지">

이렇게만 작성하면 이미지가 원본 크기 그대로 표시될 수 있습니다. 그래서 Bootstrap에서는 반응형 이미지를 만들기 위해 img-fluid 클래스를 자주 사용합니다.

2. 반응형 이미지: img-fluid

img-fluid는 이미지가 부모 영역의 너비를 넘지 않도록 만들어주는 클래스입니다. 화면이 작아지면 이미지도 자연스럽게 줄어듭니다.


<img src="sample.jpg" class="img-fluid" alt="반응형 이미지">

이미지를 사용할 때 가장 기본적으로 기억해야 할 클래스입니다. 특히 모바일 화면까지 고려한다면 img-fluid를 붙이는 습관을 들이는 것이 좋습니다.

3. 이미지에 테두리와 썸네일 효과 주기

이미지를 카드나 갤러리처럼 보여주고 싶을 때는 img-thumbnail 클래스를 사용할 수 있습니다.


<img src="sample.jpg" class="img-thumbnail" alt="썸네일 이미지">

img-thumbnail은 이미지에 얇은 테두리와 약간의 둥근 모서리를 적용합니다. 상품 목록, 프로필 목록, 첨부 이미지 미리보기 등에 사용할 수 있습니다.

4. 둥근 이미지 만들기

Bootstrap의 border radius 유틸리티를 함께 사용하면 이미지를 둥글게 만들 수 있습니다.


<img src="profile.jpg" class="img-fluid rounded" alt="둥근 이미지">

<img src="profile.jpg" class="img-fluid rounded-circle" alt="원형 프로필 이미지">

rounded: 모서리를 둥글게 만든다.
rounded-circle: 이미지를 원형으로 만든다.

rounded-circle은 프로필 이미지에 자주 사용됩니다. 단, 원형으로 자연스럽게 보이려면 원본 이미지의 가로와 세로 비율이 비슷한 편이 좋습니다.

5. 이미지 정렬하기

이미지를 가운데 정렬하고 싶다면 d-block과 mx-auto를 함께 사용할 수 있습니다.


<img src="sample.jpg" class="img-fluid d-block mx-auto" alt="가운데 정렬 이미지">

d-block은 이미지를 block 요소처럼 만들고, mx-auto는 좌우 margin을 자동으로 설정해 가운데 정렬합니다.

왼쪽이나 오른쪽으로 띄워서 배치하고 싶다면 float 유틸리티도 사용할 수 있습니다.


<img src="sample.jpg" class="rounded float-start" alt="왼쪽 이미지">
<img src="sample.jpg" class="rounded float-end" alt="오른쪽 이미지">

다만 float는 레이아웃 흐름이 복잡해질 수 있으므로, 요즘은 grid나 flex를 사용하는 경우가 더 많습니다.

6. 카드 안에 이미지 넣기

이미지는 Card 컴포넌트와 함께 자주 사용됩니다. 대표 이미지가 있는 게시글 카드나 상품 카드를 만들 때 유용합니다.


<div class="card">
  <img src="sample.jpg" class="card-img-top" alt="카드 이미지">

  <div class="card-body">
    <h5 class="card-title">카드 제목</h5>
    <p class="card-text">이미지가 포함된 카드 예시입니다.</p>
    <a href="#" class="btn btn-primary">자세히 보기</a>
  </div>
</div>

card-img-top은 카드 상단에 이미지를 배치할 때 사용합니다. 목록형 화면에서는 이미지 크기가 서로 다르면 카드 높이가 달라질 수 있으므로 비율 관리가 중요합니다.

7. Figure란?

Figure는 이미지와 이미지 설명을 하나의 의미 있는 묶음으로 표현할 때 사용합니다. HTML에서는 figure와 figcaption 태그를 사용합니다.


<figure>
  <img src="sample.jpg" alt="샘플 이미지">
  <figcaption>이미지에 대한 설명입니다.</figcaption>
</figure>

단순히 이미지만 넣는 것이 아니라, 이미지에 대한 설명이나 출처, 보조 정보를 함께 보여주고 싶을 때 적합합니다.

8. Bootstrap Figure 사용하기

Bootstrap에서는 figure, figure-img, figure-caption 클래스를 제공합니다.


<figure class="figure">
  <img src="sample.jpg" class="figure-img img-fluid rounded" alt="설명이 있는 이미지">
  <figcaption class="figure-caption">
    이미지에 대한 짧은 설명입니다.
  </figcaption>
</figure>

클래스	역할
figure	이미지와 설명을 묶는 전체 영역
figure-img	figure 안의 이미지 스타일
figure-caption	이미지 설명 문구
img-fluid	이미지를 반응형으로 표시

Figure 안의 이미지에도 img-fluid를 함께 사용하는 것이 좋습니다. 그래야 이미지가 부모 영역에 맞춰 자연스럽게 줄어듭니다.

9. Figure 설명 정렬하기

figure-caption은 텍스트 정렬 유틸리티와 함께 사용할 수 있습니다.


<figure class="figure">
  <img src="sample.jpg" class="figure-img img-fluid rounded" alt="샘플 이미지">
  <figcaption class="figure-caption text-center">
    가운데 정렬된 이미지 설명입니다.
  </figcaption>
</figure>

설명은 보통 이미지 아래에 짧게 작성합니다. 너무 긴 문장은 이미지보다 설명이 더 눈에 띄게 만들 수 있으므로 간결하게 작성하는 것이 좋습니다.

10. Ratio란?

Ratio는 콘텐츠의 가로세로 비율을 유지해주는 Bootstrap helper입니다. 영상, 지도, iframe, 이미지 박스처럼 일정한 비율이 필요한 영역에 사용합니다.

예를 들어 유튜브 영상을 넣을 때 화면 크기에 따라 iframe의 비율이 깨지면 보기 좋지 않습니다. 이때 ratio 클래스를 사용하면 일정한 비율을 유지할 수 있습니다.

11. 기본 Ratio 구조

ratio는 부모 요소에 적용합니다. 그 안에 iframe, video, img 같은 실제 콘텐츠를 넣습니다.


<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/..." title="영상" allowfullscreen></iframe>
</div>

위 예시는 16:9 비율의 영상 영역을 만드는 코드입니다. 반응형 영상이나 지도 영역을 만들 때 자주 사용합니다.

12. 자주 사용하는 Ratio 클래스

클래스	비율	사용 예시
ratio-1x1	1:1	정사각형 이미지, 프로필 영역
ratio-4x3	4:3	일반 이미지, 문서형 미디어
ratio-16x9	16:9	영상, 배너, 유튜브 iframe
ratio-21x9	21:9	넓은 배너, 시네마틱 영역


<div class="ratio ratio-1x1">
  <img src="profile.jpg" alt="정사각형 이미지">
</div>

<div class="ratio ratio-4x3">
  <img src="photo.jpg" alt="4대3 이미지">
</div>

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/..." title="영상"></iframe>
</div>

비율을 정해두면 이미지나 영상이 화면 크기에 따라 줄어들어도 전체 레이아웃이 안정적으로 유지됩니다.

13. Ratio와 이미지 함께 사용하기

카드 목록에서 이미지 높이를 일정하게 맞추고 싶다면 ratio를 사용할 수 있습니다.


<div class="card">
  <div class="ratio ratio-16x9">
    <img src="sample.jpg" class="object-fit-cover" alt="카드 이미지">
  </div>

  <div class="card-body">
    <h5 class="card-title">카드 제목</h5>
    <p class="card-text">이미지 비율이 고정된 카드입니다.</p>
  </div>
</div>

object-fit-cover는 이미지가 영역을 꽉 채우도록 보여줄 때 사용합니다. 다만 이미지 일부가 잘릴 수 있으므로 중요한 부분이 잘리지 않는지 확인해야 합니다.

14. 영상 iframe 넣기

외부 영상을 넣을 때는 iframe을 사용하는 경우가 많습니다. 이때 ratio-16x9를 사용하면 영상 영역이 자연스럽게 유지됩니다.


<div class="ratio ratio-16x9">
  <iframe
    src="https://www.youtube.com/embed/영상ID"
    title="YouTube video"
    allowfullscreen>
  </iframe>
</div>

영상은 대부분 16:9 비율이 잘 어울립니다. 강의 영상, 소개 영상, 홍보 영상, 포트폴리오 영상 영역에 자주 사용할 수 있습니다.

15. Image, Figure, Ratio 함께 사용하기

실제 화면에서는 이 세 가지를 함께 사용할 수 있습니다. 이미지는 img-fluid로 반응형 처리하고, 설명이 필요한 이미지는 figure로 묶고, 고정 비율이 필요한 영역은 ratio로 감싸면 됩니다.


<div class="container">
  <div class="row g-4">

    <div class="col-md-6">
      <figure class="figure">
        <img src="sample.jpg" class="figure-img img-fluid rounded" alt="게시글 대표 이미지">
        <figcaption class="figure-caption text-center">
          게시글 대표 이미지 설명입니다.
        </figcaption>
      </figure>
    </div>

    <div class="col-md-6">
      <div class="ratio ratio-16x9">
        <iframe src="https://www.youtube.com/embed/영상ID" title="소개 영상" allowfullscreen></iframe>
      </div>
    </div>

  </div>
</div>

왼쪽에는 설명이 있는 이미지, 오른쪽에는 비율이 유지되는 영상 영역을 배치한 예시입니다. 반응형 그리드와 함께 사용하면 모바일에서도 자연스럽게 세로로 쌓입니다.

16. 사용 시 주의할 점

이미지에는 alt 속성을 작성하는 것이 좋다.
큰 이미지는 img-fluid를 사용해 부모 영역을 넘지 않게 한다.
프로필 이미지는 rounded-circle을 사용할 수 있다.
이미지 설명이 필요하면 figure와 figcaption으로 묶는 것이 좋다.
영상이나 iframe은 ratio로 감싸 비율을 유지하는 것이 좋다.
카드 목록에서는 이미지 비율이 제각각이면 화면이 어수선해질 수 있다.
object-fit-cover는 이미지를 꽉 채우지만 일부가 잘릴 수 있다.

이미지는 화면의 분위기를 크게 좌우합니다. 하지만 원본 크기와 비율을 고려하지 않으면 레이아웃이 쉽게 깨질 수 있습니다. 따라서 반응형 처리, 설명 구조, 비율 관리를 함께 생각하는 것이 중요합니다.

17. 정리

img-fluid는 이미지를 부모 영역 안에서 반응형으로 보여준다.
img-thumbnail은 이미지에 썸네일 스타일을 적용한다.
rounded, rounded-circle로 이미지 모양을 조절할 수 있다.
figure는 이미지와 설명을 의미 있게 묶을 때 사용한다.
figure-caption은 이미지 설명 문구를 표시할 때 사용한다.
ratio는 영상, iframe, 이미지 영역의 비율을 유지할 때 사용한다.
ratio-16x9는 영상 영역에서 자주 사용된다.

이번 글에서는 Bootstrap의 Image, Figure, Ratio를 정리했습니다. 이미지를 단순히 넣는 것에서 끝내지 않고, 반응형 처리와 설명 구조, 비율 유지까지 함께 고려하면 훨씬 안정적인 화면을 만들 수 있습니다.

다음 글에서는 Bootstrap에서 아이콘을 사용하는 방법과 함께 Bootstrap Icons를 정리해보겠습니다.

'Tech Stack > BootStrap' 카테고리의 다른 글

[Bootstrap] 14. 실전 예제: 간단한 UI 섹션 만들기 (0)	2026.07.02
[Bootstrap] 13. Bootstrap Icons 이해하기 (0)	2026.07.01
[Bootstrap] 11. Breadcrumb, Spinner, Placeholder 이해하기 (0)	2026.06.29
[Bootstrap] 10. List Group, Table, Pagination 이해하기 (0)	2026.06.28
[Bootstrap] 09. Offcanvas와 Toast 이해하기 (0)	2026.06.27