Bootstrap의 카드 컴포넌트는 콘텐츠를 시각적으로 구분하고 정렬하는 데 유용한 요소입니다. 카드는 일반적으로 이미지, 제목, 본문 텍스트, 링크, 버튼 등을 포함할 수 있습니다. 카드를 생성하기 위해 card 클래스를 사용하며, 이 클래스는 기본적인 카드 스타일을 제공하고 다양한 서브 클래스와 결합하여 더 복잡한 레이아웃을 만들 수 있습니다.
카드를 만들기 위해 기본적으로 card 클래스를 사용합니다. 카드의 구성 요소로는 card-body, card-title, card-text, card-img-top, card-footer 등이 있습니다. 예를 들어, 간단한 카드의 HTML 구조는 다음과 같습니다:
<div class="card" style="width: 18rem;">
<img src="이미지_경로.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 클래스는 이미지를 카드의 상단에 배치합니다. card-body 클래스는 카드의 주요 콘텐츠가 포함되는 영역을 정의하며, card-title과 card-text는 각각 제목과 본문 텍스트를 나타냅니다. btn 클래스는 버튼 스타일을 정의하는 데 사용됩니다.
카드는 여러 스타일로 확장할 수 있습니다. 예를 들어, 카드의 머리글과 바닥글을 추가할 수 있습니다. 이를 위해 card-header와 card-footer 클래스를 사용할 수 있습니다:
<div class="card" style="width: 18rem;">
<div class="card-header">
카드 머리글
</div>
<img src="이미지_경로.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 class="card-footer text-muted">
카드 바닥글
</div>
</div>
이 구조를 통해 카드는 머리글과 바닥글을 포함하는 더 정교한 레이아웃을 가질 수 있습니다. 또한, 카드의 텍스트와 배경 색상을 변경하기 위해 Bootstrap의 배경 색상 유틸리티 클래스를 사용할 수 있습니다. 예를 들어, bg-primary, bg-secondary 등의 클래스를 사용하여 카드의 배경 색상을 설정할 수 있습니다.
<div class="card bg-primary text-white" style="width: 18rem;">
<div class="card-header">
기본 카드
</div>
<img src="이미지_경로.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-light">카드 링크</a>
</div>
<div class="card-footer text-muted">
카드 바닥글
</div>
</div>
또한, 카드는 내부에 리스트 그룹을 포함할 수 있습니다. 이를 통해 리스트 아이템을 카드 내부에 깔끔하게 정렬할 수 있습니다.
<div class="card" style="width: 18rem;">
<div class="card-header">
리스트 그룹이 포함된 카드
</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="btn btn-primary">카드 링크</a>
</div>
</div>
이와 같이, Bootstrap의 카드 컴포넌트는 다양한 서브 클래스와 결합하여 복잡한 콘텐츠 레이아웃을 만들 수 있으며, 유연하고 직관적인 디자인 요소로 많은 웹 프로젝트에서 널리 사용됩니다.