부트스트랩 카드 컴포넌트: 완전한 소개

부트스트랩 카드는 웹 프로젝트에서 콘텐츠를 구성하고 제공하는 핵심 도구입니다. 다양한 기기에 매끄럽게 적응하는 시각적으로 매력적인 레이아웃을 만드는 간단하면서 다재다능한 방법을 제공합니다. 이 기사를 마치면 프로젝트에서 부트스트랩 카드 구성 요소를 효과적으로 사용하는 방법을 알게 될 것입니다.

부트스트랩을 선택하는 이유?

부트스트랩은 반응형 및 모바일 우선 웹 레이아웃을 구축하기 위한 가장 인기 있는 프레임워크 중 하나로 남아 있습니다. 주요 이점은 다음과 같습니다:

빠르고 쉬운 반응형 디자인: 멋진 레이아웃을 만들려면 기본적인 HTML 및 CSS 지식만 있으면 됩니다.
모바일 우선 접근 방식: 부트스트랩은 모바일 반응성을 최우선으로 생각합니다.
브라우저 호환성: 모든 주요 브라우저에서 원활하게 작동합니다.
Flexbox-Powered 그리드 시스템: 정렬 및 간격 작업을 간소화합니다.
다양한 구성 요소: 버튼, 모달, 카드 등 다양한 재사용 가능한 요소가 있습니다.

부트스트랩의 최신 버전은 Flexbox 지원 및 다양한 카드 구성 요소와 같은 중요한 개선 사항을 제공합니다. 이는 패널 및 섬네일과 같은 이전 컴포넌트를 대체합니다.

주요 요점

부트스트랩 카드는 조직화된 반응형 레이아웃을 만드는 다재다능한 도구입니다. 텍스트, 이미지 및 멀티미디어와 같은 다양한 유형의 콘텐츠를 세련된 컨테이너 내에 표시할 수 있습니다. 아래는 개발자에게 반가운 몇 가지 주요 기능들입니다:

사용 편의성: div class=”card-body”와 같은 요소들을 결합하여 빠르게 카드를 생성할 수 있습니다. 이는 콘텐츠 영역을 정의하는 곳이며, p class=”card-text”는 텍스트 정보가 있는 곳입니다.
여러 유형의 콘텐츠 지원: 카드 제목, 이미지 또는 목록 그룹을 추가하여 콘텐츠를 효과적으로 구성할 수 있습니다.
반응형: 부트스트랩의 그리드와 브레이크포인트를 사용하여 카드가 모바일부터 데스크톱까지 모든 기기 크기에 적응할 수 있습니다.
사용자 정의 가능한 디자인: 색상, 테두리, 텍스트 정렬을 포함한 모양을 손쉽게 조정할 수 있는 유틸리티 클래스를 사용할 수 있습니다.
고급 레이아웃: 카드 그룹, 덱, 마소네리 레이아웃과 같은 기능을 사용하여 매끄럽게 정렬하고 구성할 수 있습니다.

부트스트랩 카드 컴포넌트란?

부트스트랩은 다양하고 현대적인 UI 컴포넌트인 카드를 소개합니다. 카드는 다양한 유형의 콘텐츠를 표시하는 유연하고 세련된 컨테이너로 사용됩니다. 기본 스타일이 최소화된 상태에서, 부트스트랩 카드는 다양한 유틸리티 클래스를 사용하여 쉽게 향상시킬 수 있습니다.

이 구성 요소는 Flexbox를 기반으로 구축되어 정확한 정렬과 간격 조정이 가능합니다. 개발자는 여백과 패딩을 효과적으로 제어하기 위해 Bootstrap의 간격 유틸리티를 사용할 수 있습니다.

카드는 제목, 부제목, 본문 복사본, 이미지 등과 같은 다양한 유형의 콘텐츠를 편리하게 수용할 수 있으며 선택적 헤더 및 푸터 섹션을 포함할 수 있습니다. 필요에 따라 다양한 유형의 카드를 구성하기 위해 다른 섹션 (카드 블록)을 포함할 수도 있습니다.

주요 Bootstrap 카드 클래스

다음은 주요 Bootstrap 카드 유틸리티 클래스와 그 목적입니다:

card: 카드 컴포넌트를 정의하는 주요 컨테이너 클래스입니다.
card-body: 카드 내부의 주요 콘텐츠 영역을 생성합니다.
card-title: 카드 제목을 스타일링하며 일반적으로 <h5>와 같은 헤딩 태그와 함께 사용됩니다.
card-text: 카드 내의 표준 텍스트 콘텐츠에 사용됩니다.
card-header: 카드 상단에 스타일이 적용된 헤더 섹션을 추가합니다.
card-footer: 카드 하단에 스타일이 적용된 푸터 섹션을 추가합니다.
card-img-top: 카드 상단에 이미지를 배치합니다.
card-img-bottom: 카드 하단에 이미지를 배치합니다.
list-group: 카드 내에 목록 그룹을 생성합니다.
list-group-item: 목록 그룹 내 개별 항목을 스타일링합니다.
카드 그룹: 여러 카드를 동일한 너비와 높이로 그룹화합니다.
카드 덱: 여러 카드를 간격을 두고 정렬하며, Bootstrap 5에서 사용 중단되었습니다.
텍스트-*: 텍스트 색상 스타일링을 위한 유틸리티 클래스(예: text-primary, text-success).
배경-*: 배경 색상 스타일링을 위한 유틸리티 클래스(예: bg-light, bg-dark).

이 간결한 개요는 Bootstrap 카드를 구성하고 사용자 정의하는 데 사용되는 필수 클래스를 나열합니다.

프로젝트에 Bootstrap 포함하기

CDN(콘텐츠 배달 네트워크)에서 포함하거나 getbootstrap.com에서 필요한 파일을 다운로드하여 프로젝트에서 Bootstrap을 쉽게 사용할 수 있습니다.

이 예제에서는 Bootstrap 카드 컴포넌트를 포함하기 위해 CDN을 사용하여 간단한 HTML 페이지를 설정하는 방법을 보여줍니다. 이 방법을 사용하면 추가 구성 없이 신속하게 카드 생성 및 스타일링이 가능합니다.

아래 단계를 따라 index.html 파일을 만들고 Bootstrap 5.3.3을 포함하세요:

<!doctype html>
<html lang="en">
<head>
    <!-- 필수 메타 태그 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <title>Bootstrap Card Example</title>
</head>
<body>
    <div class="container mt-5">
        <div class="card" style="width: 18rem;">
            <div class="card-header bg-primary text-white">
                Example Card Header
            </div>
            <div class="card-body">
                <h5 class="card-title">Example Card Title</h5>
                <p class="card-text">This is an example card created using Bootstrap 5. It includes styling for the
                    header, title, and text.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>

    <!-- Popper와 함께하는 Bootstrap 번들 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
</body>
</html>

CDN을 통해 Bootstrap 파일을 포함하여 항상 최신 프레임워크 버전을 사용할 수 있습니다. 콘텐츠를 위한 기본으로 사용될 컨테이너 division이 추가되어 Bootstrap 카드 구성 요소를 사용하여 즉시 작업을 시작할 수 있습니다.

자세한 내용은 스타터 템플릿 문서를 참조하십시오.

기본적인 Bootstrap 카드 생성

간단한 카드를 만들려면 다음 단계를 따르십시오:

외부 컨테이너를 만들기 위해 .card 클래스와 <div> 태그를 사용하십시오.
카드 본문을 정의하기 위해 내부 <div> 태그에 .card-body 클래스를 추가하십시오.
카드 제목과 부제목을 추가하려면 제목 태그(<h5> 및 <h6>)에 .card-title 및 .card-subtitle 클래스를 사용하십시오.
텍스트 콘텐츠를 포함하려면 <p> 태그와 함께 .card-text 클래스를 사용하십시오.
이미지를 카드 상단에 추가하려면 <img> 태그와 함께 .card-img-top 클래스를 사용하십시오.

이것들은 기본적인 카드 레이아웃의 기본 구성 요소입니다. 다음은 예시입니다:

<div class="card" style="width: 30rem;">
   <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image">
   <div class="card-body">
      <h5 class="card-title">Card Title</h5>
      <h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
      <p class="card-text">This is a simple card example created using Bootstrap 5.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
   </div>
</div>

이 코드는 이미지, 제목, 부제목, 텍스트 및 버튼이 있는 카드를 생성하며, 부모 컨테이너의 너비에 맞게 조정됩니다. 그렇지 않으면 style=”width: 30rem;” 속성을 사용하여 지정해야 합니다.

이것은 결과의 스크린샷입니다:

부트스트랩에서 수평 카드

수평 카드는 콘텐츠를 나란히 배치하여 компакт하고 조직적인 디자인에 적합합니다. 반응형 동작을 위해 그리드 클래스를 사용하여 모든 장치에서 카드가 멋지게 보이도록 할 수 있습니다.

<div class="card mb-3" style="max-width: 540px;">
   <div class="row g-0">
      <div class="col-md-4">
         <img src="https://picsum.photos/id/0/800" class="img-fluid rounded-start" alt="Image">
      </div>
      <div class="col-md-8">
         <div class="card-body">
            <h5 class="card-title">Card Title</h5>
            <p class="card-text">This is a card with text beside an image, perfect for showcasing content
               side-by-side.
            </p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
         </div>
      </div>
   </div>
</div>

다음은 결과의 스크린샷입니다:

부트스트랩 카드의 목록 그룹

부트스트랩은 목록 그룹을 포함하여 카드를 향상시킬 수 있으며, 이를 통해 구조화되고 조직적인 콘텐츠를 더 쉽게 표시할 수 있습니다. list-group 및 list-group-flush 클래스는 카드 내에서 원활하게 통합되어 개발자가 시각적으로 매력적인 목록을 만들 수 있도록 합니다.

다음은 플러시 목록 그룹이 있는 카드를 만드는 방법입니다:

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

카드 기능 향상

헤더와 푸터 추가

헤더와 푸터를 .card-header 및 .card-footer 클래스를 사용하여 카드에 추가하여 향상시킬 수 있습니다. 다음은 예시입니다:

<div class="row">
    <div class="col-sm-3">
        <div class="card">
            <div class="card-header">
                This is a header
            </div>
            <img class="card-img-top" src="https://source.unsplash.com/daily" alt="Card image top">
            <div class="card-body">
                <h3 class="card-title">Card title</h3>
                <h4 class="card-subtitle">Card subtitle</h4>
                <p class="card-text">This is a simple Card example</p>
            </div>
            <div class="card-footer">
                    This is a footer
            </div>
        </div>
    </div>
</div>

다음은 결과의 스크린샷입니다:

이 레이아웃은 스타일이 적용된 헤더와 푸터로 카드에 더 많은 맥락을 추가합니다.

이미지 위에 텍스트 오버레이하기

콘텐츠를 이미지 위에 오버레이하려면 .card-img-overlay를 사용하세요. card-body 클래스를 card-img-overlay 클래스로 단순히 변경하면 이미지를 오버레이로 사용할 수 있습니다:

<div class="card" style="width: 30rem;">
   <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image">
   <div class="card-img-overlay">
      <h5 class="card-title">Card Title</h5>
      <h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
      <p class="card-text">This is a simple card example created using Bootstrap 5.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
   </div>
</div>

다음은 결과의 스크린샷입니다:

카드 이미지 캡 추가

카드의 상단이나 하단에 이미지를 추가하려면 .card-img-top 또는 .card-img-bottom을 사용하세요.

<div class="card" style="width: 18rem;">
   <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
   <div class="card-body">
      <p class="card-text">This card has an image cap at both the top and bottom.</p>
   </div>
   <img src="https://picsum.photos/id/0/800" class="card-img-bottom" alt="Card image bottom">
</div>

결과의 스크린샷입니다:

카드의 상단 및 하단 이미지는 이미지 캡이라고 합니다.

부트스트랩 카드로 반응형 디자인

반응형 디자인은 모든 장치에서 카드가 멋지게 보이도록 보장합니다. 부트스트랩 그리드 시스템을 사용하여 레이아웃을 제어하세요.

예제 코드

<div class="row row-cols-1 row-cols-md-3 g-4">
   <div class="col">
      <div class="card">
         <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image">
         <div class="card-body">
            <h5 class="card-title">Card Title</h5>
            <h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
            <p class="card-text">This is a simple card example created using Bootstrap 5.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
         </div>
      </div>
   </div>
   <div class="col">
      <div class="card">
         <img src="https://picsum.photos/id/85/800" class="card-img-top" alt="Card image">
         <div class="card-body">
            <h5 class="card-title">Card Title</h5>
            <h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
            <p class="card-text">This is a simple card example created using Bootstrap 5.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
         </div>
      </div>
   </div>
</div>

결과의 스크린샷입니다:

부트스트랩 카드 높이 및 너비 조정

카드의 특정 너비를 설정하려면 스타일 속성이나 부트스트랩 유틸리티 클래스를 사용할 수 있습니다. 예를 들어:

<div class="card" style="width: 10rem;">
   <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
   <div class="card-body">
      <h5 class="card-title">Card Title</h5>
      <p class="card-text">This is a simple card example with a custom width.</p>
   </div>
</div>

결과의 스크린샷입니다:

이 카드의 너비는 10rem으로 제한되어 있으며, 디자인 요구 사항에 따라 조정할 수 있습니다.

일반적으로 카드의 높이는 카드 내용에 수직으로 맞게 조정되지만, 커스텀 CSS(예: style=”height: 10rem;”) 또는 부트스트랩의 크기 유틸리티(예: <div class=”card h-200″>)를 사용하여 제어할 수도 있습니다.

최신 Bootstrap 버전은 rem 단위를 사용하고 있으며, 이는 px 단위 대신에 사용됩니다. rem은 확장 가능한 측정 단위이므로 사용자 설정과 더 잘 작동하여 텍스트를 훨씬 더 접근 가능하게 만듭니다. 그 결과 페이지의 모든 요소는 화면 크기에 맞춰 조정됩니다.

Bootstrap의 새로운 기능에 대해 더 알고 싶다면 SitePoint의 “Bootstrap: Super Smart Features to Win You Over” 기사를 참조하세요.

너비 조절을 위한 그리드 시스템 사용

Bootstrap 카드 컴포넌트의 너비를 조절하는 또 다른 옵션은 Bootstrap 그리드 (행과 열)를 사용하는 것입니다:

<div class="row">
    <div class="col-md-4">
        <div class="card">
            <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
            <div class="card-body">
                <h5 class="card-title">Card Title</h5>
                <p class="card-text">This is an example card using the grid system.</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
            <div class="card-body">
                <h5 class="card-title">Another Card</h5>
                <p class="card-text">This card sits next to the first one.</p>
            </div>
           </div>
    </div>
</div>

다음은 결과의 스크린샷입니다:

이 예제에서는 두 개의 카드가 나란히 표시되며, 각각 중간 및 더 큰 화면에서 네 개의 열(col-md-4)을 차지합니다.

카드 스타일

Bootstrap은 배경색, 테두리 및 텍스트 스타일을 포함한 카드 사용자 지정을 위한 다양한 옵션을 제공합니다.

배경 및 텍스트 색상

유틸리티 클래스인 .bg-primary 또는 .text-white를 사용하여 카드의 배경색과 텍스트 색상을 변경할 수 있습니다.

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
  <div class="card-body">
    <h5 class="card-title">Primary Card Title</h5>
    <p class="card-text">Quick text to demonstrate card styling.</p>
  </div>
</div>

테두리 색상

사용하실 수 있는 .border-{color} 클래스로 카드의 테두리 색상을 사용자 정의하세요. 카드 내의 텍스트는 .text-{color}로 스타일을 지정할 수 있습니다.

<div class="card border-success mb-3" style="max-width: 18rem;">
  <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
  <div class="card-body text-success">
    <h5 class="card-title">Success Card Title</h5>
    <p class="card-text">Simple content styled with a border.</p>
  </div>
</div>

투명한 헤더 및 푸터

헤더와 푸터의 배경 색상을 제거하려면 .bg-transparent을 사용하고 테두리를 사용자 정의하세요.

<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-info">Header</div>
  <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
  <div class="card-body text-info">
    <h5 class="card-title">Info Card Title</h5>
    <p class="card-text">Example content inside a card.</p>
  </div>
  <div class="card-footer bg-transparent border-info">Footer</div>
</div>

배경과 테두리 혼합

고유한 스타일링을 위해 배경 및 테두리 유틸리티를 결합하세요.

<div class="card bg-light border-dark mb-3" style="max-width: 18rem;">
  <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
  <div class="card-body text-dark">
    <h5 class="card-title">Mixed Style Card</h5>
    <p class="card-text">Custom card combining background and border.</p>
  </div>
</div>

한 행 레이아웃에서 네 가지 다른 카드 스타일을 보여주는 결과는 다음과 같습니다:

Bootstrap을 사용하면 다른 헤더 스타일의 카드를 만들 수 있습니다

‘header primary card title’은 주요 섹션에 대한 것이고
‘header light card title’은 섬세한 디자인을 위한 것입니다
‘header secondary card title’은 지원 텍스트가 있는 카드에 대한 것입니다.
‘header dark card title’은 강렬한 외관을 위한 것입니다
‘header success card title’은 긍정적인 메시지를 위한 것입니다
‘header danger card title’은 경고를 표시하기 위한 것입니다.

이러한 다양한 카드 스타일 옵션을 사용하여 “header warning card title”, “header info card title”과 같은 고유한 디자인을 만들어, 중요 정보를 강조하거나 특정 세부 정보에 주의를 끌 수 있습니다.

탐색 추가

Bootstrap 카드 구성 요소의 또 다른 멋진 기능은 탭 및 탐색 핀과 같은 고급 탐색 패턴을 헤더 섹션에 추가할 수 있는 가능성입니다.

카드 헤더에 탭 추가

카드 헤더에 탭을 포함하려면 정렬되지 않은 목록(<ul>)에 .nav-tabs와 .card-header-tabs 클래스를 사용하십시오. 다음은 예시입니다:

<div class="card" style="width: 30rem;">
   <div class="card-header">
      <ul class="nav nav-tabs card-header-tabs">
         <li class="nav-item">
            <a class="nav-link active" href="#">Tab 1</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#">Tab 2</a>
         </li>
      </ul>
   </div>
   <div class="card-body">
      <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
      <h5 class="card-title pt-3">Card with Tabs</h5>
      <p class="card-text">This card includes a tabbed navigation element in its header.</p>
   </div>
</div>

결과의 스크린샷은 다음과 같습니다:

카드 헤더에 Pills 추가하기

마찬가지로, .nav-tabs를 .nav-pills로, .card-header-tabs를 .card-header-pill로 바꾸어 네비게이션 pills를 추가할 수 있습니다. <ul> 목록 태그에 적용됩니다:

<div class="card" style="width: 30rem;">
   <div class="card-header">
      <ul class="nav nav-pills card-header-pill">
         <li class="nav-item">
            <a class="nav-link active" href="#">Tab 1</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#">Tab 2</a>
         </li>
      </ul>
   </div>
   <div class="card-body">
      <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
      <h5 class="card-title pt-3">Card with Tabs</h5>
      <p class="card-text">This card includes a pill-style navigation element in its header.</p>
   </div>
</div>

결과의 스크린샷은 다음과 같습니다:

이에 대한 자세한 정보는 부트스트랩 내비게이션 컴포넌트 문서에서 확인할 수 있습니다

부트스트랩 카드 구성 요소에 링크 추가하기

<a> 태그와 .card-link 클래스를 사용하여 카드 내부에 빠르게 링크를 추가할 수 있습니다:

<div class="card">
<div class="card-body">
  <h3 class="card-title">Adding Links</h3>
  <p class="card-text">These are simple links</p>
  <a href="#" class="card-link">Link 1</a>
  <a href="#" class="card-link">Link 2</a>
</div>
<div class="card-footer">
      This is a footer
</div>
</div>

결과의 스크린샷은 다음과 같습니다:

부트스트랩 카드 구성 요소에서 텍스트 정렬 및 변형

부트스트랩은 카드 구성 요소 내에서 텍스트를 정렬하고 변형시키는 텍스트 유틸리티 클래스를 제공합니다. 텍스트 정렬을 위해 다음 클래스를 사용할 수 있습니다:

.text-start – 카드 텍스트를 왼쪽 정렬
.text-end – 카드 텍스트를 오른쪽 정렬
.text-center – 카드 텍스트를 가운데 정렬
.text-justify – 카드 텍스트를 맞춤 정렬(이전 버전에 적용되며, 부트스트랩 5에서 폐기됨)
.text-nowrap 텍스트 줄 바꿈 방지

다음 클래스를 사용하여 텍스트를 변형할 수도 있습니다:

.text-lowercase는 텍스트를 소문자로 변환합니다
.text-uppercase는 텍스트를 대문자로 변환합니다
.text-capitalize는 각 단어의 첫 글자를 대문자로 만듭니다

부트스트랩 카드 구성 요소 배경, 전경 및 테두리 색상 사용자 정의

텍스트 및 배경 유틸리티 클래스를 사용하여 부트스트랩 카드의 배경, 텍스트 및 테두리 색상을 사용자 정의할 수 있습니다. 몇 가지 예시는 다음과 같습니다:

텍스트 색상: 텍스트 색상을 변경하려면 .text-primary, .text-success, .text-danger, .text-warning, .text-info, .text-light, .text-dark 또는 .text-white을 사용합니다.
배경색: 배경색을 변경하려면 .bg-primary, .bg-success, .bg-danger, .bg-warning, .bg-info, .bg-light, .bg-dark, 또는 .bg-white을 사용합니다.
테두리 색상: 테두리 색상을 스타일링하려면 .border-primary, .border-success, .border-danger, .border-warning, .border-info, .border-light, .border-dark, 또는 .border-white를 사용합니다.

아래 CodePen 데모에서 부트스트랩으로 만들 수 있는 다양한 종류의 카드를 확인할 수 있습니다. 자유롭게 실험해 보세요:

부트스트랩 카드 구성 요소로 고급 레이아웃 만들기

부트스트랩 카드는 현대적인 웹 레이아웃에서 혼합 콘텐츠 유형(텍스트 및 이미지)을 단일 엔티티 또는 그룹화된 컬렉션으로 표시하는 데 널리 사용되는 다재다능한 UI 구성 요소입니다.

카드는 반응형 디자인에 특히 유용하며 Masonry 레이아웃과 같은 레이아웃에서 일반적으로 구현됩니다.

카드는 이미지 갤러리, 블로그 포스트 또는 전자상거래 제품의 레이아웃을 만드는 데 사용될 수 있습니다. 구글과 페이스북과 같은 주요 플랫폼은 웹 애플리케이션에서 콘텐츠를 구성하고 표시하기 위해 카드를 광범위하게 활용합니다.

이전에는 이러한 고급 레이아웃을 구축하려면 CSS와 HTML에 대한 깊은 지식이 필요했습니다. 그러나 Bootstrap의 최신 기능을 통해 개발자는 반응형이고 시각적으로 매력적인 카드 기반 레이아웃을 쉽게 만들 수 있습니다.

.card-group, .card-deck 및 .card-columns와 같은 클래스는 일관된 스타일링과 정렬로 카드를 조직하는 과정을 간소화합니다.

카드 그룹/중첩 카드

Bootstrap의 카드 그룹은 여러 카드 구성 요소를 하나의 연결된 엔티티로 균일한 너비와 높이로 표시하는 효율적인 방법입니다.

이 레이아웃은 display: flex; 속성을 사용하여 달성되며 모든 카드가 완벽하게 정렬됩니다. 이는 일관된 카드 치수가 필수적인 반응형 디자인 및 현대 웹 레이아웃에 특히 유용합니다.

카드 그룹을 만들려면 개별 카드를 포함하는 래퍼 div로 .card-group 클래스를 사용하십시오.

다음은 세 개의 카드 그룹을 보여주는 예입니다:

<div class="card-group">
  <div class="card text-white">
      <img class="card-img-top" src="https://source.unsplash.com/featured/" alt="Card image top">
      <div class="card-img-overlay">
   <div class="card-group">
   <div class="card text-white">
      <img class="card-img-top" src="https://picsum.photos/id/475/800" alt="Card image top">
      <div class="card-img-overlay">
         <h3 class="card-title">Card Title 1</h3>
         <h4 class="card-subtitle">Card Subtitle</h4>
         <p class="card-text">This is an example of a grouped card.</p>
      </div>
   </div>
   <div class="card text-white">
      <img class="card-img-top" src="https://picsum.photos/id/58/800" alt="Card image top">
      <div class="card-img-overlay">
         <h3 class="card-title">Card Title 2</h3>
         <h4 class="card-subtitle">Card Subtitle</h4>
         <p class="card-text">Grouped cards ensure uniform styling.</p>
      </div>
   </div>
   <div class="card text-white">
      <img class="card-img-top" src="https://picsum.photos/id/75/800" alt="Card image top">
      <div class="card-img-overlay">
         <h3 class="card-title">Card Title 3</h3>
         <h4 class="card-subtitle">Card Subtitle</h4>
         <p class="card-text">They are responsive and visually appealing.</p>
      </div>
   </div>
</div>

결과의 스크린샷입니다:

위에서 볼 수 있듯이, 세 개의 카드가 연결되어 있고 폭과 높이가 동일합니다.

카드 덱

Bootstrap의 이전 버전에서는 .card-deck을 사용하여 카드가 동일한 폭과 높이를 가지지만 서로 연결되지 않은 카드 레이아웃을 만들었습니다. 그러나 Bootstrap 5에서는 이를 위해 그리드 시스템을 권장합니다. 이 접근 방식은 더 큰 유연성과 반응성을 제공합니다.

비슷한 레이아웃을 얻으려면 .row 클래스를 사용하여 카드 간의 간격과 정렬을 제어하는 .col을 사용하십시오. 다음은 예시입니다:

<div class="row row-cols-1 row-cols-md-3 g-4">

카드들이 동일한 크기이며 그 사이에 약간의 여백이 있는 것을 볼 수 있습니다.

카드 열

Bootstrap의 이전 버전에서는 .card-columns 클래스를 사용하여 카드가 위에서 아래로 및 왼쪽에서 오른쪽으로 추가되는 Masonry와 유사한 레이아웃을 만들었습니다. 그러나 Bootstrap 5에서는 이 기능이 제거되었습니다.

비슷한 레이아웃을 얻기 위해 그리드 시스템을 사용하고 CSS Masonry 레이아웃이나 Masonry.js와 같은 JavaScript 플러그인을 조합하여 더 복잡한 동작을 구현할 수 있습니다.

그리드 시스템과 CSS를 사용하여 간단한 Masonry 스타일 레이아웃을 만드는 방법은 다음과 같습니다:

성능 최적화

효율적인 성능은 빠르게 로드되고 매끄럽게 적응하는 Bootstrap 카드를 만드는 데 중요합니다. div 클래스 카드 본문 및 h5 클래스 카드 제목과 같은 Bootstrap 카드 구성 요소를 통합하는 동안 성능을 향상시키는 실용적인 기술을 소개합니다.

이미지의 지연 로딩

Lazy loading은 이미지를 뷰포트에 표시될 때까지 로딩을 지연시켜 페이지 속도를 최적화합니다. 효율적인 해결책으로 loading=”lazy” 속성을 card img 상단에 사용하십시오.

<img src="https://picsum.photos/300/200" loading="lazy" class="card-img-top" alt="Lazy Loaded Image">

이미지 크기 최적화

이미지 크기를 조정하여 컨테이너 차원에 맞게 조절하여 로드 시간을 단축합니다. 이미지를 자동으로 확장하려면 div 클래스 card img에 img-fluid를 사용하십시오.

<img src="https://picsum.photos/300/200" class="card-img-top img-fluid" alt="Resized Image">

부모 요소의 너비에 관계없이 card img 상단이 완벽하게 맞는지 확인합니다.

CSS 및 JavaScript 최소화

스타일 및 스크립트를 최소화하여 파일 크기를 줄입니다. 더 빠른 렌더링을 위해 여러 div 클래스 card header 요소를 결합하고 사용자 정의 CSS를 최소화하십시오.

최적화된 예

이런 식으로 반복적이거나 사용자 정의 스타일을 적용하는 대신에:

<div class="card" style="border: 1px solid blue; text-align: center; padding: 20px;">
   <div class="card-body">
      <h5 style="font-size: 1.5rem; font-weight: bold;">Custom CSS Header</h5>
      <p style="font-size: 1rem; color: #555;">This card uses inline styles, which are inefficient.</p>
   </div>
</div>

보다 깔끔하고 유지보수가 쉬운 구조를 위해 Bootstrap의 유틸리티 클래스를 사용하십시오:

<div class="card border-primary text-center p-3">
   <div class="card-body">
      <h5 class="card-title text-uppercase fw-bold">Utility Classes Header</h5>
      <p class="card-text text-secondary">Using Bootstrap's utility classes ensures better performance and maintainability.</p>
   </div>
</div>

아이콘에 SVG 사용

SVG는 가벼우며 확장 가능하여 card 헤더 및 장식 요소에 이상적입니다. 모든 기기에서 빠르게 로드되고 선명도를 유지합니다.

예시

<div class="card text-center">
   <div class="card-header bg-success text-white">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="bi bi-check-circle" fill="currentColor">
         <path d="M16 8.98l.686-.688L7.733.011 6.023 1.72 14.98 10.676z"/>
      </svg>
      <h5 class="card-title">SVG Optimized Header</h5>
   </div>
   <div class="card-body">
      <p class="card-text">SVGs provide clear visuals with minimal overhead.</p>
   </div>
</div>

리소스 사전로드 및 사전로드

필수 리소스를로드하기 위해 rel=”사전로드”를 사용하고 미래 요구 사항을 예측하기 위해 rel=”사전로드”를 사용하십시오. 특히 무거운 card 내용에 유용합니다.

예시

<link rel="preload" href="https://example.com/styles.css" as="style">
<link rel="prefetch" href="https://example.com/next-page.html">

DOM 복잡성 줄이기

렌더링 속도를 늦출 수있는 지나치게 중첩된 div 클래스 card 구조를 피하십시오. 성능을 최적화하기 위해 레이아웃을 단순화하십시오.

최적화 전

<div class="card">
   <div class="card-body">
      <div>
         <div>
            <p>Nested Content</p>
         </div>
      </div>
   </div>
</div>

최적화 후

<div class="card">
   <div class="card-body">
      <p class="card-text">Optimized Content</p>
   </div>
</div>

폰트 최적화

사용자 정의 폰트를 미리 로드하거나 시스템 폰트를 사용하여 지연 시간을 줄이세요. 깔끔한 div 클래스 카드 본문은 카드의 시각적 매력을 더욱 강조할 수 있습니다.

예시

<div class="card">
   <div class="card-body" style="font-family: 'Roboto', sans-serif;">
      <h5 class="card-title">Optimized Font</h5>
      <p class="card-text">Preloading ensures faster rendering for card content.</p>
   </div>
</div>

결론

부트스트랩 카드 컴포넌트는 부트스트랩 프레임워크의 강력한 추가 요소로, 개발자들이 CSS의 작동 방식을 깊게 이해하지 않고도 현대적인 스타일의 웹 페이지를 만들 수 있게 해줍니다. CSS 클래스를 추가하여 이미지 갤러리, 대시보드 위젯을 나타내거나 블로그 게시물 및 전자 상거래 웹사이트의 제품을 표시하는 카드 레이아웃을 추가할 수 있습니다.

새로운 기능과 컴포넌트 덕분에 부트스트랩은 여전히 모든 사람이 사용할 수 있는 강력한 CSS 프레임워크로 남아 있으며, 특히 자신만의 반응형 현대식 레이아웃을 만들 필요가 있지만 충분한 시간과 예산 또는 사용자 정의 코드를 생성하는 데 필요한 깊은 CSS 지식이 부족한 개발자에게 유용합니다.

부트스트랩의 기본기를 익혔지만 부트스트랩 기술을 한 단계 끌어올리고 싶다면, 부트스트랩의 힘에 대한 빠르고 재미있는 소개를 위한 부트스트랩 4로 첫 번째 웹사이트 만들기 강의를 확인해 보세요.

반응형 디자인을 위한 부트스트랩 카드 컴포넌트 마스터링에 대한 자주 묻는 질문(FAQs)

부트스트랩 카드 컴포넌트란 무엇인가요?

부트스트랩 카드 컴포넌트는 콘텐츠를 위한 현대적이고 유연한 컨테이너로, 텍스트, 이미지 및 멀티미디어를 위한 시각적으로 매력적인 레이아웃을 만들 수 있게 해줍니다. 카드는 부트스트랩 프레임워크의 일부로, 개발자가 정보를 반응형 및 모바일 친화적인 방식으로 조직할 수 있도록 설계되었습니다.

부트스트랩 카드 컴포넌트를 어떻게 만들까요?

부트스트랩 카드 컴포넌트는 간단하게 만들 수 있습니다. 카드 클래스를 가진 div를 컨테이너로 사용하고 그 안에 제목, 텍스트 및 이미지를 추가하면 됩니다. 예를 들어:

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">This is an example of a Bootstrap card body.</p>
  </div>
</div>

부트스트랩에서 카드의 높이와 너비를 어떻게 설정하나요?

인라인 스타일이나 부트스트랩 유틸리티 클래스를 사용하여 카드의 너비와 높이를 맞춤 설정할 수 있습니다. 예를 들어:

<div class="card" style="width: 20rem; height: 15rem;">
  <div class="card-body">
    <h5 class="card-title">Custom Card</h5>
    <p class="card-text">This card has a custom height and width.</p>
  </div>
</div>

또는 w-50 또는 h-100과 같은 카드 높이 부트스트랩 유틸리티 클래스를 사용하여 카드의 크기를 반응형으로 설정할 수도 있습니다.

부트스트랩에서 카드를 어떻게 크기 조절하나요?

카드의 크기를 조절하려면 w-25, w-50 또는 w-75와 같은 카드 크기 부트스트랩 유틸리티 클래스를 너비에 사용하고, h-auto 또는 h-100을 높이에 사용할 수 있습니다. 이렇게 하면 카드가 추가 CSS를 사용하지 않고 레이아웃에 적응할 수 있습니다. 예를 들어:

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Responsive Card</h5>
    <p class="card-text">This card resizes based on its parent container.</p>
  </div>
</div>

부트스트랩에서 카드 제목을 어떻게 만들까요?

카드에 제목을 추가하려면 class=”card-title”을 가진 <h5> 요소를 사용하세요. 이 클래스는 제목이 부트스트랩 디자인 표준에 일관되게 스타일링되도록 보장합니다.

<div class="card">
   <div class="card-body">
      <h5 class="card-title">Card Title</h5>
      <p class="card-text">This is an example of a Bootstrap card with a title.</p>
   </div>
</div>

부트스트랩에서 card-body 클래스를 어떻게 사용할 수 있나요?

카드 본문 클래스는 패딩을 제공하고 Bootstrap 카드 내의 콘텐츠를 정리하는 유틸리티 클래스입니다. 이는 카드 콘텐츠의 주요 컨테이너입니다.

<div class="card">
   <div class="card-body">
      <h5 class="card-title">Using card-body</h5>
      <p class="card-text">This is the content inside the card-body section.</p>
   </div>
</div>

부트스트랩 카드 크기를 수정하는 방법은?

카드의 크기를 수정하려면 인라인 스타일이나 유틸리티 클래스를 사용하여 특정 너비와 높이를 적용합니다. 예를 들어:

<div class="card" style="width: 250px; height: 300px;">
  <img src="https://picsum.photos/250/150" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Fixed Size Card</h5>
    <p class="card-text">This card has a fixed size for consistency.</p>
  </div>
</div>

부트스트랩에서 카드 크기를 조정하는 방법은?

카드 크기는 Bootstrap의 유틸리티 클래스나 CSS Grid를 사용하여 동적으로 조정할 수 있습니다. 다음은 반응형 카드 크기 조정의 예입니다:

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Card 1</h5>
        <p class="card-text">Adjustable size based on parent grid.</p>
      </div>
    </div>
  </div>
</div>

부트스트랩 카드 배경과 테두리를 사용자 정의할 수 있나요?

네, Bootstrap은 광범위한 사용자 정의 유틸리티 클래스를 제공합니다. 배경 색상에는 bg-primary를 사용하고, 테두리 스타일링에는 border-success를 사용합니다. 예시:

<div class="card bg-info border-danger">
  <div class="card-body">
    <h5 class="card-title">Custom Background</h5>
    <p class="card-text">This card has a custom background and border.</p>
  </div>
</div>

카드와 함께 이미지를 어떻게 사용할 수 있나요?

Bootstrap은 카드 내에서 card-img-top 또는 card-img-bottom을 사용하여 이미지를 지원합니다. 예시:

<div class="card">
  <img src="https://picsum.photos/300/200" class="card-img-top" alt="Card image">
  <div class="card-body">
    <h5 class="card-title">Card with Image</h5>
    <p class="card-text">This card includes a top image.</p>
  </div>
</div>

부트스트랩에서 div 클래스 카드 본문을 어떻게 사용하나요?

부트스트랩의 div 클래스 카드 본문은 카드 내부의 주요 콘텐츠 영역을 정의합니다. 이는 패딩을 제공하고 카드 내의 텍스트, 이미지 및 기타 요소에 대해 일관된 간격을 보장합니다.

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">This is some text within a card body.</p>
  </div>
</div>

부트스트랩에서 p 클래스 카드 텍스트란 무엇인가요?

부트스트랩의 p 클래스 카드 텍스트는 카드 본문 내의 텍스트 콘텐츠를 스타일링하는 데 사용됩니다. 기본 타이포그래피 스타일을 적용하여 텍스트가 깔끔하고 전문적으로 보이도록 합니다.

<div class="card">
  <div class="card-body">
    <p class="card-text">This is an example of styled text inside a Bootstrap card.</p>
  </div>
</div>

부트스트랩에서 카드 크기를 어떻게 증가시킬 수 있나요?

카드 크기를 키우려면 전체 너비를 나타내는 w-100을 사용하거나 스타일을 사용하여 너비와 높이를 조정하세요. 예시:

<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Large Card</h5>
    <p class="card-text">This card has an increased size for visibility.</p>
  </div>
</div>

카드를 동일한 높이로 만드는 방법

.d-flex 및 .align-items-stretch를 사용하세요.

<div class="row g-3">
   <div class="col-md-4 d-flex">
      <div class="card flex-fill">
         <h5 class="card-title">Card 1</h5>
         <p class="card-text">Aligned with others.</p>
      </div>
   </div>
</div>