동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
부트스트랩4에 있는 카드는 컨텐츠 주위에 약간의 여백 그리고 테두리가 있는 상자입니다. 머리글, 바닥글, 내용, 색상 등에 대한 옵션을 포함합니다.
** 부트스트랩4의 카드는 부트스트랩3의 panels, wells, thumbnails을 대체합니다.
기본 카드
.card클래스로 만들어지며, 카드 안의 내용은 .card-body클래스를 갖습니다.
<div class="card">
<div class="card-body">기본 카드</div>
</div>
머리글과 바닥글(Header & Footer)
.card-header클래스는 머리글을 .card-footer클래스는 바닥글을 추가하는데 사용합니다.
<div class="card">
<div class="card-header">머리글</div>
<div class="card-body">내용본문</div>
<div class="card-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>
<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>
Titles, text, links
HTML 제목 요소에 카드 제목을 추가하려면 .card-title을 사용합니다.
.card-text클래스는 카드 블록의 마지막 자식인 경우<p>요소의 하단 여백을 제거하는데 사용됩니다.
.card-link클래스는 카드내 모든 링크에 파란색을 추가하고 호버 효과를 추가합니다.
<div class="card">
<div class="card-body">
<h4 class="card-title">실전홈페이지제작강좌</h4>
<p class="card-text">모든 유료강좌를 무료로 이용할 수 있습니다.</p>
<a href="#" class="card-link">실전홈페이지제작강좌</a>
<a href="#" class="card-link">CSS Grid강좌</a>
<a href="#" class="card-link">PHP강좌</a>
</div>
</div>
카드 이미지
<img>요소에 .card-img-top 또는 .card-img-bottom을 추가하여 카드의 위쪽이나 아래쪽에 이미지를 배치합니다.
<div class="card" style="width:400px">
<img class="card-img-top" src="card.png" alt="Card image">
<div class="card-body">
<h4 class="card-title">홍길동</h4>
<p class="card-text">웹엔지니어입니다.</p>
<a href="#" class="btn btn-primary">프로필보기</a>
</div>
</div>
카드 이미지 오버레이
이미지를 카드 배경으로 지정하고 .card-img-overlay 클래스를 사용하여 이미지 위에 텍스트를 추가할 수 있습니다.
<div class="card img-fluid" style="width:400px">
<img class="card-img-top" src="card.jpg" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h4 class="card-title">세종대왕</h4>
<p class="card-text" style="margin-top:350px;">세종대왕은 인류역사상 가장 위대한 인물입니다. 가장 과학적인 한글을 만든 왕입니다.</p>
<a href="#" class="btn btn-primary">프로필보기</a>
</div>
</div>
** 위 코드에서 style="margin-top:350px"은 이미지 위 텍스트가 잘 안보여서 임으로 추가한 css입니다.
등록된 댓글이 없습니다.