9. 정보를 더 깔끔하게! Bootstrap 카드와 리스트 그룹 활용하기

안녕하세요! 오늘은 웹페이지에서 정보를 깔끔하게 정리할 수 있는 Bootstrap의 카드와 리스트 그룹 컴포넌트에 대해 알아보려고 해요. 카드는 내용, 이미지, 버튼 등을 한 영역에 정리하여 보여줄 수 있는 컴포넌트로, 다양한 정보를 시각적으로 정리하는 데 유용합니다. 리스트 그룹은 여러 항목을 나열하거나 정리할 때 깔끔하게 활용할 수 있죠. 이 글에서는 카드 컴포넌트 기본 구조, 이미지 포함 카드, 리스트 그룹 활용 방법을 다루어 보겠습니다.

1. 카드 컴포넌트 구조

Bootstrap의 카드 컴포넌트는 card 클래스를 사용해 구성할 수 있으며, card-body, card-title, card-text 등을 사용해 내용을 정리할 수 있습니다. 카드 구조를 간단한 예제로 만들어보겠습니다.

 

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">카드 제목</h5>
    <p class="card-text">여기에 카드 내용이 들어갑니다. 간단한 설명을 적어보세요.</p>
    <a href="#" class="btn btn-primary">자세히 보기</a>
  </div>
</div>

 

위 코드에서 각 요소의 역할을 살펴보면:

• card: 카드 전체를 감싸는 클래스입니다.
• card-body: 카드의 본문을 구성하는 영역으로, 카드의 제목, 텍스트, 버튼이 들어갑니다.
• card-title: 카드의 제목을 지정합니다.
• card-text: 카드의 설명 텍스트를 구성합니다.

이 기본적인 구조만으로도 카드 안에 제목, 설명, 버튼을 간단히 배치할 수 있어요.

2. 이미지 포함 카드

카드에 이미지를 추가하려면 card-img-top 클래스를 사용해 카드 상단에 이미지를 넣을 수 있습니다. 이 방법을 통해 이미지가 포함된 깔끔한 카드 디자인을 만들 수 있어요.

 

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/150" 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: 카드의 상단에 이미지를 추가할 때 사용합니다. 이 클래스는 이미지가 카드의 너비와 맞게 자동 조절되도록 합니다.

이미지를 추가한 카드는 제품 소개나 포트폴리오, 서비스 설명 등 다양한 용도로 활용할 수 있어요.

3. 리스트 그룹 활용

리스트 그룹은 여러 항목을 나열할 때 유용하게 사용할 수 있는 컴포넌트입니다. Bootstrap에서는 list-group 클래스를 사용해 리스트 그룹을 만들고, 각 항목에는 list-group-item 클래스를 적용해 스타일링할 수 있습니다.

(1) 기본 리스트 그룹

기본 리스트 그룹을 만드는 방법을 아래 코드로 살펴보세요.

 

<ul class="list-group">
  <li class="list-group-item">항목 1</li>
  <li class="list-group-item">항목 2</li>
  <li class="list-group-item">항목 3</li>
</ul>

 

이 예제에서는 list-group 클래스가 전체 리스트 그룹을 감싸고 있으며, list-group-item이 각각의 리스트 항목에 적용되었습니다. 기본적으로 가로로 구분선이 들어가 깔끔한 스타일의 목록이 만들어져요.

(2) 리스트 그룹과 링크 결합

리스트 그룹 항목을 링크로 구성해 클릭 가능한 메뉴처럼 만들 수도 있습니다. 이때는 <ul> 대신 <div>를 사용하고, 각각의 항목에 list-group-item list-group-item-action 클래스를 적용해 보세요.

 

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">활성화된 항목</a>
  <a href="#" class="list-group-item list-group-item-action">항목 1</a>
  <a href="#" class="list-group-item list-group-item-action">항목 2</a>
  <a href="#" class="list-group-item list-group-item-action">항목 3</a>
</div>

 

• list-group-item-action: 리스트 항목이 클릭 가능한 링크임을 표시하는 클래스입니다.
• active: 현재 선택된 항목을 나타내는 스타일입니다.

이렇게 링크와 결합된 리스트 그룹은 네비게이션 메뉴나 옵션 선택창으로 유용하게 사용할 수 있어요.

4. 카드와 리스트 그룹 결합

카드와 리스트 그룹을 결합해 더욱 다양한 콘텐츠를 포함한 카드를 만들 수 있습니다. 리스트 그룹이 카드 내부에 배치되어 항목을 깔끔하게 나열할 수 있어요.

 

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">리스트 그룹 포함 카드</h5>
    <p class="card-text">카드와 리스트 그룹을 결합하여 더 많은 정보를 정리할 수 있습니다.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">리스트 항목 1</li>
    <li class="list-group-item">리스트 항목 2</li>
    <li class="list-group-item">리스트 항목 3</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">카드 링크 1</a>
    <a href="#" class="card-link">카드 링크 2</a>
  </div>
</div>

 

• list-group-flush: 카드 내부에 리스트 그룹을 삽입할 때 사용하며, 리스트와 카드 경계가 자연스럽게 이어지도록 해줍니다.
• card-link: 카드 내부에서 링크를 깔끔하게 배치하는 데 사용합니다.

리스트 그룹을 포함한 카드는 여러 정보를 나열하거나, 분류된 정보를 한눈에 보여줄 때 유용하게 활용할 수 있습니다.

요약 및 다음 단계

Bootstrap의 카드 컴포넌트는 정보를 깔끔하게 정리해 보여줄 수 있는 강력한 도구입니다. 기본 카드 구조부터 이미지 포함 카드, 리스트 그룹과 결합된 카드까지 다양하게 활용할 수 있어요. 다음 단계로는 카드와 리스트 그룹을 실제 프로젝트에 적용해보고, 다른 Bootstrap 컴포넌트와 조합해 더 풍부한 디자인을 완성해보세요!