GWCoding HOME
Tech Stack/BootStrap

[Bootstrap] 08. Collapse와 Carousel 이해하기

2026. 6. 26. 20:00

[Bootstrap] 08. Collapse와 Carousel 이해하기

이전 글에서는 Dropdown, Tooltip, Popover처럼 화면 위에 추가 정보를 보여주는 컴포넌트를 정리했습니다. 이번 글에서는 내용을 접고 펼치는 Collapse와 여러 콘텐츠를 슬라이드처럼 넘겨 보여주는 Carousel을 살펴보겠습니다.

Collapse와 Carousel은 화면 공간을 효율적으로 사용할 때 유용합니다. 자주 묻는 질문, 상세 설명, 메뉴 펼치기, 이미지 슬라이드, 소개 배너 같은 화면에서 자주 사용됩니다.

1. Collapse란?

Collapse는 특정 영역을 접었다가 펼칠 수 있게 해주는 Bootstrap 컴포넌트입니다. 처음부터 모든 내용을 보여주지 않고, 사용자가 필요할 때만 내용을 확인하게 만들 수 있습니다.

예를 들어 FAQ, 상세 설명, 필터 영역, 모바일 메뉴처럼 숨겨두었다가 필요한 순간에 보여주는 UI에 잘 어울립니다.


<p>
  <button class="btn btn-primary" type="button"
    data-bs-toggle="collapse"
    data-bs-target="#collapseExample">
    내용 보기
  </button>
</p>

<div class="collapse" id="collapseExample">
  <div class="card card-body">
    버튼을 클릭하면 이 내용이 펼쳐집니다.
  </div>
</div>

버튼의 data-bs-target 값과 펼쳐질 영역의 id 값이 서로 연결됩니다. 위 예시에서는 버튼이 #collapseExample을 대상으로 삼고 있습니다.

2. Collapse 기본 구조

속성 또는 클래스 역할
data-bs-toggle="collapse" Collapse 기능을 사용할 대상임을 지정
data-bs-target="#id값" 펼치거나 접을 영역을 지정
collapse 접고 펼쳐질 실제 영역
show 처음부터 펼쳐진 상태로 표시

Collapse는 Bootstrap JavaScript가 있어야 정상적으로 동작합니다. CSS만 연결하면 모양은 일부 적용될 수 있지만, 클릭해서 접고 펼치는 동작은 작동하지 않습니다.

3. 처음부터 열린 Collapse

Collapse 영역을 처음부터 펼쳐진 상태로 보여주고 싶다면 show 클래스를 함께 사용합니다.


<div class="collapse show" id="openedCollapse">
  <div class="card card-body">
    이 영역은 처음부터 열려 있습니다.
  </div>
</div>

공지사항, 기본 안내문, 현재 선택된 항목처럼 처음부터 보여주는 것이 자연스러운 내용에 사용할 수 있습니다.

4. 여러 버튼으로 같은 Collapse 제어하기

하나의 Collapse 영역을 여러 버튼에서 열고 닫을 수도 있습니다. 중요한 점은 여러 버튼의 data-bs-target이 같은 id를 바라보게 만드는 것입니다.


<button class="btn btn-primary" type="button"
  data-bs-toggle="collapse"
  data-bs-target="#multiControl">
  첫 번째 버튼
</button>

<button class="btn btn-secondary" type="button"
  data-bs-toggle="collapse"
  data-bs-target="#multiControl">
  두 번째 버튼
</button>

<div class="collapse mt-3" id="multiControl">
  <div class="card card-body">
    두 버튼 모두 이 영역을 열고 닫을 수 있습니다.
  </div>
</div>

같은 콘텐츠를 여러 위치에서 제어해야 할 때 사용할 수 있습니다. 다만 버튼이 너무 많으면 사용자가 어떤 영역이 열리는지 헷갈릴 수 있으므로 위치와 문구를 명확하게 잡는 것이 좋습니다.

5. Accordion이란?

Accordion은 Collapse를 활용한 대표적인 UI 패턴입니다. 여러 항목 중 하나를 클릭하면 해당 내용이 펼쳐지고, 다른 항목은 접히는 구조입니다.

FAQ, 고객센터, 설정 화면, 강의 목차처럼 항목이 여러 개 있을 때 자주 사용합니다.


<div class="accordion" id="faqAccordion">

  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button"
        data-bs-toggle="collapse"
        data-bs-target="#faqOne">
        첫 번째 질문입니다.
      </button>
    </h2>

    <div id="faqOne" class="accordion-collapse collapse show"
      data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        첫 번째 질문에 대한 답변입니다.
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button"
        data-bs-toggle="collapse"
        data-bs-target="#faqTwo">
        두 번째 질문입니다.
      </button>
    </h2>

    <div id="faqTwo" class="accordion-collapse collapse"
      data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        두 번째 질문에 대한 답변입니다.
      </div>
    </div>
  </div>

</div>

Accordion에서 data-bs-parent를 사용하면 같은 그룹 안에서 하나의 항목만 열리도록 만들 수 있습니다.

6. Collapse 사용 시 자주 하는 실수

  • data-bs-target의 id와 실제 collapse 영역의 id가 일치하지 않는 경우
  • id 앞에 #을 빼먹는 경우
  • Bootstrap JavaScript를 연결하지 않은 경우
  • 너무 많은 영역을 접어 사용자가 내용을 찾기 어려워지는 경우
  • 열리는 영역과 버튼 위치가 멀어서 어떤 내용이 열렸는지 헷갈리는 경우

Collapse는 화면을 깔끔하게 만들어주지만, 중요한 정보를 무조건 숨기는 데 사용하면 오히려 사용성이 떨어질 수 있습니다. 처음부터 보여줘야 하는 정보와 접어도 되는 정보를 구분하는 것이 중요합니다.

7. Carousel이란?

Carousel은 여러 콘텐츠를 슬라이드처럼 넘겨 보여주는 컴포넌트입니다. 이미지 배너, 메인 소개 영역, 상품 이미지, 후기 목록, 이벤트 배너 등에 자주 사용됩니다.

한 화면에 여러 콘텐츠를 모두 보여주기 어렵거나, 대표 이미지를 순서대로 보여주고 싶을 때 사용할 수 있습니다.


<div id="mainCarousel" class="carousel slide">
  <div class="carousel-inner">

    <div class="carousel-item active">
      <img src="image1.jpg" class="d-block w-100" alt="첫 번째 이미지">
    </div>

    <div class="carousel-item">
      <img src="image2.jpg" class="d-block w-100" alt="두 번째 이미지">
    </div>

    <div class="carousel-item">
      <img src="image3.jpg" class="d-block w-100" alt="세 번째 이미지">
    </div>

  </div>
</div>

Carousel은 바깥 영역에 고유한 id를 주고, 내부에 carousel-inner와 carousel-item을 배치하는 구조입니다. 첫 번째로 보여줄 항목에는 active 클래스를 붙여야 합니다.

8. Carousel 기본 클래스

클래스 역할
carousel Carousel 전체 영역
slide 슬라이드 전환 효과 적용
carousel-inner 슬라이드 항목을 감싸는 영역
carousel-item 각 슬라이드 항목
active 처음 표시될 슬라이드

active 클래스가 없으면 어떤 슬라이드를 먼저 보여줘야 하는지 알 수 없기 때문에 화면이 의도대로 보이지 않을 수 있습니다.

9. 이전/다음 버튼 추가하기

Carousel에는 사용자가 직접 이전 또는 다음 슬라이드로 이동할 수 있는 버튼을 추가할 수 있습니다.


<div id="mainCarousel" class="carousel slide">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="image1.jpg" class="d-block w-100" alt="첫 번째 이미지">
    </div>

    <div class="carousel-item">
      <img src="image2.jpg" class="d-block w-100" alt="두 번째 이미지">
    </div>
  </div>

  <button class="carousel-control-prev" type="button"
    data-bs-target="#mainCarousel"
    data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>

  <button class="carousel-control-next" type="button"
    data-bs-target="#mainCarousel"
    data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

이전 버튼은 data-bs-slide="prev", 다음 버튼은 data-bs-slide="next"를 사용합니다. 버튼의 data-bs-target은 Carousel 전체 영역의 id와 연결되어야 합니다.

10. Indicator 추가하기

Indicator는 현재 몇 번째 슬라이드를 보고 있는지 알려주는 작은 버튼입니다. 슬라이드가 여러 개일 때 사용자가 위치를 파악하기 쉽게 도와줍니다.


<div id="bannerCarousel" class="carousel slide">

  <div class="carousel-indicators">
    <button type="button" data-bs-target="#bannerCarousel"
      data-bs-slide-to="0" class="active"></button>

    <button type="button" data-bs-target="#bannerCarousel"
      data-bs-slide-to="1"></button>

    <button type="button" data-bs-target="#bannerCarousel"
      data-bs-slide-to="2"></button>
  </div>

  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="banner1.jpg" class="d-block w-100" alt="첫 번째 배너">
    </div>

    <div class="carousel-item">
      <img src="banner2.jpg" class="d-block w-100" alt="두 번째 배너">
    </div>

    <div class="carousel-item">
      <img src="banner3.jpg" class="d-block w-100" alt="세 번째 배너">
    </div>
  </div>

</div>

data-bs-slide-to는 이동할 슬라이드 번호를 의미합니다. 번호는 0부터 시작하므로 첫 번째 슬라이드는 0, 두 번째 슬라이드는 1입니다.

11. Caption 넣기

Carousel 이미지 위에 제목이나 설명을 올리고 싶다면 carousel-caption을 사용할 수 있습니다.


<div class="carousel-item active">
  <img src="banner1.jpg" class="d-block w-100" alt="첫 번째 배너">

  <div class="carousel-caption d-none d-md-block">
    <h5>첫 번째 배너 제목</h5>
    <p>배너에 대한 간단한 설명입니다.</p>
  </div>
</div>

d-none d-md-block을 사용하면 작은 화면에서는 caption을 숨기고, md 크기 이상에서만 보여줄 수 있습니다. 모바일에서 이미지 위 텍스트가 너무 복잡해지는 것을 줄일 수 있습니다.

12. 자동 재생 설정

Carousel은 자동으로 슬라이드가 넘어가도록 설정할 수 있습니다. data-bs-ride="carousel"을 사용하면 페이지가 로드된 뒤 자동 전환이 시작됩니다.


<div id="autoCarousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="image1.jpg" class="d-block w-100" alt="첫 번째 이미지">
    </div>

    <div class="carousel-item">
      <img src="image2.jpg" class="d-block w-100" alt="두 번째 이미지">
    </div>
  </div>
</div>

자동 재생은 메인 배너에서 자주 사용됩니다. 하지만 너무 빠르게 넘어가면 사용자가 내용을 읽기 어렵기 때문에 전환 속도와 콘텐츠 길이를 함께 고려해야 합니다.

13. Carousel 사용 시 주의할 점

  • 첫 번째 carousel-item에는 active 클래스를 반드시 붙여야 한다.
  • 버튼과 indicator의 data-bs-target은 Carousel id와 일치해야 한다.
  • 이미지마다 alt 속성을 작성하는 것이 좋다.
  • 자동 재생 속도가 너무 빠르면 사용자가 내용을 놓칠 수 있다.
  • 중요한 정보를 Carousel 안에만 숨기면 사용자가 보지 못할 수 있다.
  • 모바일 화면에서 caption이 이미지와 겹쳐 보이지 않는지 확인해야 한다.

Carousel은 시각적으로 좋아 보이지만, 모든 콘텐츠를 슬라이드 안에 넣는 방식은 좋지 않을 수 있습니다. 꼭 보여야 하는 핵심 정보는 화면에 바로 보이게 두고, Carousel은 보조적인 소개나 이미지 전환에 사용하는 편이 안전합니다.

14. Collapse와 Carousel 비교

구분 Collapse Carousel
주요 역할 내용을 접고 펼침 콘텐츠를 슬라이드로 전환
사용 예시 FAQ, 상세 설명, 필터 배너, 이미지 목록, 소개 화면
핵심 연결 버튼과 collapse id 연결 버튼과 carousel id 연결
주의점 중요 정보를 과하게 숨기지 않기 핵심 정보를 슬라이드 안에만 두지 않기

15. 정리

  • Collapse는 내용을 접고 펼칠 수 있게 해주는 컴포넌트다.
  • data-bs-target과 id를 연결해 어떤 영역을 열고 닫을지 지정한다.
  • Accordion은 Collapse를 활용한 대표적인 UI 패턴이다.
  • Carousel은 여러 콘텐츠를 슬라이드처럼 넘겨 보여주는 컴포넌트다.
  • carousel-item 중 처음 보여줄 항목에는 active 클래스가 필요하다.
  • Carousel에는 이전/다음 버튼, indicator, caption을 추가할 수 있다.
  • 두 컴포넌트 모두 Bootstrap JavaScript가 있어야 정상적으로 동작한다.

이번 글에서는 Bootstrap의 Collapse와 Carousel을 정리했습니다. Collapse는 화면을 접고 펼쳐 정보량을 조절할 때 유용하고, Carousel은 여러 이미지나 소개 콘텐츠를 순서대로 보여줄 때 유용합니다.

다음 글에서는 Bootstrap에서 화면 옆에서 열리는 Offcanvas와 간단한 알림을 보여주는 Toast를 정리해보겠습니다.

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

[Bootstrap] 10. List Group, Table, Pagination 이해하기  (0) 2026.06.28
[Bootstrap] 09. Offcanvas와 Toast 이해하기  (0) 2026.06.27
[Bootstrap] 07. Dropdown, Tooltip, Popover 이해하기  (0) 2026.06.25
[Bootstrap] 06. 알림창(Alert), 배지(Badge), 진행바(Progress)  (0) 2026.05.22
[Bootstrap] 05. 유틸리티 클래스 이해하기  (0) 2026.05.18
Tech Stack/BootStrap 카테고리의 다른 글 더보기

티스토리툴바