여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. Bootstrap – Bootstrap 4 카드
Bootstrap – Bootstrap 4 카드
6개월전 작성
6개월전 수정



부트스트랩 4 카드

Bootstrap 4의 카드는 콘텐츠 주위에 패딩이 있는 테두리가 있는 상자다.
여기에는 머리글, 바닥글, 내용, 색상 등에 대한 옵션이 포함된다.

이미지

존 도우

일부 예시 텍스트 일부 예시 텍스트. John Doe는 건축가이자 엔지니어입니다.

프로필 보기

기본 카드

기본 카드는 .card 클래스로 생성되며 카드 내부의 콘텐츠에는 .card-body 클래스가 있다.

예제
<div class="card">
  <div class="card-body">Basic card</div>
</div>
기본 예시
예제 보기

머리글과 바닥 글

.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>
기본 예시
예제 보기

상황별 카드

카드에 배경색을 추가하려면 상황별 클래스(.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary및 ..bg-dark.bg-light)를 사용한다.

예제
  <div class="card">
    <div class="card-body">Basic card</div>
  </div>
  <br>
  <div class="card bg-primary text-white">
    <div class="card-body">Primary card</div>
  </div>
  <br>
  <div class="card bg-success text-white">
    <div class="card-body">Success card</div>
  </div>
  <br>
  <div class="card bg-info text-white">
    <div class="card-body">Info card</div>
  </div>
  <br>
  <div class="card bg-warning text-white">
    <div class="card-body">Warning card</div>
  </div>
  <br>
  <div class="card bg-danger text-white">
    <div class="card-body">Danger card</div>
  </div>
  <br>
  <div class="card bg-secondary text-white">
    <div class="card-body">Secondary card</div>
  </div>
  <br>
  <div class="card bg-dark text-white">
    <div class="card-body">Dark card</div>
  </div>
  <br>
  <div class="card bg-light text-dark">
    <div class="card-body">Light card</div>
  </div>
기본 예시
예제 보기

제목, 텍스트, 링크

.card-title 클래스는 제목 요소에 카드 제목을 추가하는 데 사용된다.
.card-text 클래스는 <p> 요소가 내부의 마지막 자식(또는 유일한 자식)인 경우 해당 .card-body 요소의 아래쪽 여백을 제거하는 데 사용된다.
.card-link 클래스는 링크에 파란색을 추가하고 호버 효과를 추가한다.

예제
<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some example text. Some example text.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>
기본 예시
예제 보기

카드 이미지

카드 내부의 상단이나 하단에 이미지를 배치하려면 .card-body 에 .card-img-top 또는 .card-img-bottom 를 추가한다.

예제
<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>
기본 예시
예제 보기

늘어난 링크

카드 내부의 링크에 .stretched-link 클래스를 추가하면 전체 카드를 클릭하고 가리킬 수 있게 된다.
카드가 링크 역할을 한다.

예제
<a href="#" class="btn btn-primary stretched-link">See Profile</a>
기본 예시
예제 보기

카드 이미지 오버레이

이미지를 카드 배경으로 바꾸고 이미지 위에 텍스트를 추가하는 데 사용한다.

예제
<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>
기본 예시
예제 보기

카드 컬럼

.card-columns 클래스는 벽돌 모양의 카드 그리드(예: pinterest)를 만든다.
더 많은 카드를 삽입하면 레이아웃이 자동으로 조정된다.

⭐ 카드는 작은 화면(576px 미만)에 세로로 표시된다.

예제
<div class="card-columns">
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the first card</p>
    </div>
  </div>
  <div class="card bg-warning">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the second card</p>
    </div>
  </div>
  <div class="card bg-success">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the third card</p>
    </div>
  </div>
  <div class="card bg-danger">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the fourth card</p>
    </div>
  </div>
  <div class="card bg-light">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the fifth card</p>
    </div>
  </div>
  <div class="card bg-info">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the sixth card</p>
    </div>
  </div>
</div>
기본 예시
예제 보기

카드덱

.card-deck 클래스는 높이와 너비가 동일한 카드 그리드를 만든다.
더 많은 카드를 삽입하면 레이아웃이 자동으로 조정된다.

⭐ 카드는 작은 화면(576px 미만)에 세로로 표시된다.

예제
<div class="card-deck">
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the first card</p>
    </div>
  </div>
  <div class="card bg-warning">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the second card</p>
    </div>
  </div>
  <div class="card bg-success">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the third card</p>
    </div>
  </div>
  <div class="card bg-danger">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the fourth card</p>
    </div>
  </div>
</div>
기본 예시
예제 보기

카드 그룹

.card-group 클래스는 .card-deck과 비슷하다.
유일한 차이점은 .card-group 클래스가 각 카드 사이의 왼쪽 및 오른쪽 여백을 제거한다는 것이다.

⭐ 카드는 작은 화면(576px 미만)에 위쪽 및 아래쪽 여백을 두고 세로로 표시된다.

예제
<div class="card-group">
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the first card</p>
    </div>
  </div>
  <div class="card bg-warning">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the second card</p>
    </div>
  </div>
  <div class="card bg-success">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the third card</p>
    </div>
  </div>
  <div class="card bg-danger">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the fourth card</p>
    </div>
  </div>
</div>
기본 예시
예제 보기
참고
Mingg`s Diary
밍구
공부 목적 블로그