목차
- Card 정의
- Card 기본
- Card Header (머리글) / Footer (꼬리말)
- Card Color (배경색깔)
- Card Title (제목) / Text (텍스트) / Link (링크)
- Card Image (이미지)
- Card Stretch Link (링크 영역/범위 확대)
- Card Image Overlay (이미지 위에 배치)
- Card Column(열) - column 높이 다르며, 서로 떨어진 형태
- Card Deck (데크) - Column 높이 동일하며, 서로 떨어진 형태
- Card Group (그룹) - Column 높이 동일하며 서로 붙은 형태
Card 정의
내용 주위에 약간의 패딩 있는 테두리 있는 상자.
headers (머리글), footers(꼬리말), content (내용), colors (색깔) 옵션 포함.
BS3의 panel, well, thumbnail 등 대체.
Card 기본
<div class="card">
<div class="card-body">내용</div>
</div>
Card Header (머리글) / Footer (꼬리말)
<div class="card">
<div class="card-header">머리글</div>
<div class="card-body">내용</div>
<div class="card-footer">꼬리말</div>
</div>
Card Color (배경색깔)
<div class="card">
<div class="card-body">Basic card</div>
</div>
<div class="card bg-primary text-white">
<div class="card-body">Primary card</div>
</div>
<div class="card bg-success text-white">
<div class="card-body">Success card</div>
</div>
<div class="card bg-info text-white">
<div class="card-body">Info card</div>
</div>
<div class="card bg-warning text-white">
<div class="card-body">Warning card</div>
</div>
<div class="card bg-danger text-white">
<div class="card-body">Danger card</div>
</div>
<div class="card bg-secondary text-white">
<div class="card-body">Secondary card</div>
</div>
<div class="card bg-dark text-white">
<div class="card-body">Dark card</div>
</div>
<div class="card bg-light text-dark">
<div class="card-body">Light card</div>
</div>
Card Title (제목) / Text (텍스트) / Link (링크)
<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>
Card Image (이미지)
<div class="card" style="width:400px">
<img class="card-img-top" src="hz.png" alt="이미지">
<div class="card-body">
<h4 class="card-title">제목</h4>
<p class="card-text">내용</p>
<a href="#" class="btn btn-primary">링크</a>
</div>
</div>
Card Stretch Link (링크 영역/범위 확대)
<a href="#" class="btn btn-primary stretched-link">링크</a>
Card Image Overlay (이미지 위에 배치)
<div class="card" style="width:500px">
<img class="card-img-top" src="hz.png" alt="이미지">
<div class="card-img-overlay">
<h4 class="card-title">제목</h4>
<p class="card-text">내용</p>
<a href="#" class="btn btn-primary">링크</a>
</div>
</div>
Card Column(열) - column 높이 다르며, 서로 떨어진 형태
<div class="card-columns">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">내용1</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">내용2</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">내용3</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">내용4</p>
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<p class="card-text">내용5</p>
</div>
</div>
<div class="card bg-info">
<div class="card-body text-center">
<p class="card-text">내용6</p>
</div>
</div>
</div>
Card Deck (데크) - Column 높이 동일하며, 서로 떨어진 형태
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">내용1</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">내용2</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">내용3</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">내용4</p>
</div>
</div>
</div>
Card Group (그룹) - Column 높이 동일하며 서로 붙은 형태
<div class="card-group">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">내용1</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">내용2</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">내용3</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">내용4</p>
</div>
</div>
</div>