7. 부트스트랩 카드 디자인

Bootstrap 4

부트스트랩 카드 디자인

카드 클래스

부트스트랩은 카드 클래스를 제공합니다. 이 클래스를 활용하여 위와 같은 카드결과를 간편하게 표현할 수 있습니다.

카드 제작1. 내용 만들기

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

카드 제작2. header, footer 만들기

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

카드 제작3. body영역 제목/내용/링크 만들기

<div class="card">
  <div class="card-body">
    <h4 class="card-title">카드 제목</h4>
    <p class="card-text">카드 내용 설명</p>
    <a href="#" class="card-link">카드링크1</a>
    <a href="#" class="card-link">카드링크2</a>
  </div>
</div>

카드 제작4. 상단 이미지 삽입

<div class="card" style="width:400px">
  <img class="card-img-top" src="url" alt="">
</div>

카드 제작5. 카드 영역 전체 선택하기

card-body영역 a 요소에 stretched-link 클래스를 추가합니다.

<div class="card" style="width:400px">
    <img class="card-img-top" src="url" alt="Card image">
    <div class="card-body">
      <a href="#" class="btn stretched-link">전체선택링크</a>
    </div>
</div>

카드 제작6. 이미지 위에 텍스트 띄우기

텍스트를 감싸는 card-body 클래스명을 card-img-overlay로 변경합니다.

<div class="card" style="width:500px">
  <img class="card-img-top" src="url" alt="">
  <div class="card-img-overlay">
  		...
  </div>
</div>

카드 레이아웃1. 카드 열 생성

card 클래스를 묶는 부모 요소에 card-columns 클래스를 적용하여 수평으로 된 카드 열을 생성합니다. 내용 길이에 따라 크기가 달라질 수 있습니다.

<div class="card-columns">
  <div class="card">
    <div class="card-body">
      ...
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      ...
    </div>
  </div>
</div>

카드 레이아웃2. 카드 열 생성

card 클래스를 묶는 부모 요소에 card-deck 클래스를 적용하여 수평으로 된 카드 열을 생성합니다.

일정한 높낮이의 카드형 그리드가 만들어집니다.

<div class="card-deck">
  <div class="card">
    <div class="card-body">
      ...
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      ...
    </div>
  </div>
</div>

카드 레이아웃3. 카드 열 여백 제거

card 클래스를 묶는 부모 요소에 card-group클래스를 적용하여 수평으로 된 카드 열을 생성합니다.

기본형태는 deck과 흡사합니다.

<div class="card-group">
  <div class="card">
    <div class="card-body">
      ...
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      ...
    </div>
  </div>
</div>

Comments, Trackbacks