Bootstrap 4 / Cards / 카드 만들기
콘텐츠 목록을 보여줄 때 카드형 배열을 많이 사용합니다. Bootstrap을 이용하면 카드 목록을 쉽게 만들 수 있습니다.
기본
카드를 만드는 기본적인 마크업은 다음과 같습니다.
<div class="card"> <div class="card-header"> My Card </div> <img src="images/card-image.png" alt="" /> <div class="card-body"> <h5 class="card-title">Lorem</h5> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sed sem ut malesuada.</p> <a href="#" class="btn btn-primary">More</a> </div> </div>
- .card-header에는 카드 제목을 입력합니다.
- .card-body에는 카드 내용이 들어갑니다. .card-title로 제목을, .card-text로 내용을 구분합니다.
다음은 카드 두 개를 만든 간단한 예제입니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 4</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <style> p { margin:20px 0px; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-6"> <p>Card</p> <div class="card"> <div class="card-header"> My Card </div> <img src="images/card-image.png" alt="" /> <div class="card-body"> <h5 class="card-title">Lorem</h5> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sed sem ut malesuada.</p> <a href="#" class="btn btn-primary">More</a> </div> </div> </div> <div class="col-6"> <p>Card</p> <div class="card"> <div class="card-header"> My Card </div> <img src="images/card-image.png" alt="" /> <div class="card-body"> <h5 class="card-title">Lorem</h5> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sed sem ut malesuada.</p> <a href="#" class="btn btn-primary">More</a> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </body> </html>
이미지 또는 제목 제거하기
이미지 또는 제목을 제거해도 카드 모양으로 잘 나옵니다. 단, 제목 없이 이미지가 바로 나올 경우 이미지 태그에 class="card-img-top"를 추가합니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 4</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <style> p { margin:20px 0px; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-4"> <p>Card</p> <div class="card"> <div class="card-header"> My Card </div> <div class="card-body"> <h5 class="card-title">Lorem</h5> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sed sem ut malesuada.</p> <a href="#" class="btn btn-primary">More</a> </div> </div> </div> <div class="col-4"> <p>Card</p> <div class="card"> <img src="images/card-image.png" alt="" class="card-img-top" /> <div class="card-body"> <h5 class="card-title">Lorem</h5> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sed sem ut malesuada.</p> <a href="#" class="btn btn-primary">More</a> </div> </div> </div> <div class="col-4"> <p>Card</p> <div class="card"> <div class="card-body"> <h5 class="card-title">Lorem</h5> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sed sem ut malesuada.</p> <a href="#" class="btn btn-primary">More</a> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </body> </html>
이미지 위에 텍스트 넣기, 가로로 배열하기
마크업이 복잡해지지만, 이미지 위에 텍스트가 오버레이되게 하거나, 이미지와 텍스트를 가로로 배열할 수도 있습니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 4</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-4"> <p>Card</p> <div class="card"> <img src="images/card-image.png" alt="" class="card-img" /> <div class="card-img-overlay"> <h5 class="card-title">Lorem</h5> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sed sem ut malesuada.</p> </div> </div> </div> <div class="col-8"> <p>Card</p> <div class="card"> <div class="row no-gutters"> <div class="col-4"> <img src="images/card-image.png" alt="" class="card-img" /> </div> <div class="col-8"> <div class="card-body"> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sed sem ut malesuada.</p> </div> </div> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </body> </html>
배경색 만들기
bg-primary 등을 추가하여 Bootstrap의 기본색들로 배경색을 정할 수 있습니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 4</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-4"> <p>Card</p> <div class="card text-white bg-primary"> <div class="card-header"> My Card </div> <div class="card-body"> <h5 class="card-title">Lorem</h5> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sed sem ut malesuada.</p> </div> </div> </div> <div class="col-4"> <p>Card</p> <div class="card text-white bg-success"> <div class="card-header"> My Card </div> <div class="card-body"> <h5 class="card-title">Lorem</h5> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sed sem ut malesuada.</p> </div> </div> </div> <div class="col-4"> <p>Card</p> <div class="card text-white bg-dark"> <div class="card-header"> My Card </div> <div class="card-body"> <h5 class="card-title">Lorem</h5> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sed sem ut malesuada.</p> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </body> </html>