부트스트랩 카드 디자인
카드 클래스
부트스트랩은 카드 클래스를 제공합니다. 이 클래스를 활용하여 위와 같은 카드결과를 간편하게 표현할 수 있습니다.
카드 제작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