[Bootstrap] Cards

1. 기본 카드 구조

• `.card`: 카드 박스
• `.card-body`: 내부 콘텐츠를 담는 부분

<div class="card">
  <div class="card-body">Basic card</div>
</div>

---

 2. 카드 헤더와 푸터

• `.card-header`: 카드 상단 제목/머리말
• `.card-footer`: 카드 하단 설명/꼬리말

<div class="card">
  <div class="card-header">Header</div>
  <div class="card-body">Content</div>
  <div class="card-footer">Footer</div>
</div>

---

3. 색상 배경 카드 (Contextual Cards)

• `.bg-*` 클래스를 사용하여 카드 배경 색 변경
  

  클래스	설명
  `bg-primary`	파랑
  `bg-success`	초록
  `bg-info`	하늘색
  `bg-warning`	주황
  `bg-danger`	빨강
  `bg-secondary`	회색
  `bg-dark`	검정
  `bg-light`	연회색

---

4. 카드 제목, 텍스트, 링크

 

• `.card-title`: 제목
• `.card-text`: 문단 스타일 조정
• `.card-link`: 링크에 파란색 + hover 효과 적용

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some example text.</p>
    <a href="#" class="card-link">Link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

 

---

5. 카드 이미지

• `.card-img-top`: 상단 이미지
• `.card-img-bottom`: 하단 이미지
  ※ 이미지 태그는 `.card-body` 밖에 위치해야 카드 폭 전체에 걸쳐 출력됨

<div class="card" style="width:400px">
  <img class="card-img-top" src="img_avatar1.png" alt="Card image">
  <div class="card-body">
    <h4 class="card-title">John Doe</h4>
    <p class="card-text">Some example text.</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>

---

 6. 이미지 오버레이 (이미지 위에 텍스트)

• `.card-img-overlay`: 카드 이미지 위에 텍스트나 버튼을 올릴 수 있음

<div class="card" style="width:500px">
  <img class="card-img-top" src="img_avatar1.png" alt="Card image">
  <div class="card-img-overlay">
    <h4 class="card-title">John Doe</h4>
    <p class="card-text">Some example text.</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>