티스토리 뷰

SW 개발/웹

Bootstrap 4, 카드로 위젯, 대시보드 제작하기

지단로보트 2018. 8. 27. 16:36

개요

  • 일반적으로 어드민 대시보드는 1개 이상의 위젯의 조합으로 만들어진다. Bootstrap 4의 카드 개념을 활용하면 이러한 반응형으로 작동하는 위젯과 그 묶음인 대시보드를 손쉽게 제작할 수 있다.

사용 기술

  • Bootstrap: 함께 제공되는 Card 컴포넌트를 사용하여 HTML 코드 만으로 위젯, 대시보드를 제작할 수 있다.
  • jQuery: Bootstrap을 구동하기 위해 선행 사용이 필수이다.

출력 결과

카드 헤더
카드 타이틀

카드 텍스트

카드 헤더
카드 타이틀

카드 텍스트

카드 헤더
카드 타이틀

카드 텍스트

카드 헤더
카드 타이틀

카드 텍스트

카드 헤더
카드 타이틀

카드 텍스트

카드 헤더
카드 타이틀

카드 텍스트

소스 코드

><!DOCTYPE html>
<html lang="ko">
   <head>
      <meta charset="utf-8">
   </head>
   <body>

      <style type="text/css">
         @import url("https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css");
      </style>
      <style type="text/css">
         @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
      </style>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>

      <div class="container">
         <div class="row">
            <div class="card-deck">
               <div class="card text-white bg-primary mb-4" style="width:300px">
                  <div class="card-header">카드 헤더</div>
                  <div class="card-body">
                     <h5 class="card-title">카드 타이틀</h5>
                     <p class="card-text">카드 텍스트</p>
                  </div>
               </div>
               <div class="card text-white bg-secondary mb-4" style="width:300px">
                  <div class="card-header">카드 헤더</div>
                  <div class="card-body">
                     <h5 class="card-title">카드 타이틀</h5>
                     <p class="card-text">카드 텍스트</p>
                  </div>
               </div>
               <div class="card text-white bg-success mb-4" style="width:300px">
                  <div class="card-header">카드 헤더</div>
                  <div class="card-body">
                     <h5 class="card-title">카드 타이틀</h5>
                     <p class="card-text">카드 텍스트</p>
                  </div>
               </div>
            </div>
         </div>
         <div class="row">
            <div class="card-deck">
               <div class="card text-white bg-warning mb-4">
                  <div class="card-header">카드 헤더</div>
                  <div class="card-body">
                     <h5 class="card-title">카드 타이틀</h5>
                     <p class="card-text">카드 텍스트</p>
                  </div>
               </div>
               <div class="card text-white bg-danger mb-4">
                  <div class="card-header">카드 헤더</div>
                  <div class="card-body">
                     <h5 class="card-title">카드 타이틀</h5>
                     <p class="card-text">카드 텍스트</p>
                  </div>
               </div>
               <div class="card text-white bg-dark mb-4">
                  <div class="card-header">카드 헤더</div>
                  <div class="card-body">
                     <h5 class="card-title">카드 타이틀</h5>
                     <p class="card-text">카드 텍스트</p>
                  </div>
               </div>
            </div>
         </div>
      </div>

   </body>
</html>
  • 전체를 container로 감싸주면 전체 카드가 고정된 크기와 위치로 화면에 표현되면서 브라우저의 크기 변동에 따라 적절히 반응형으로 출력된다.
  • 카드 사이에 줄바꿈이 필요하다면 하나의 줄로 묶이는 카드 전체를 row로 감싸주면 된다.
  • 수평으로 펼치지는 여러 개의 카드를 동일한 간격과 높이로 묶어서 표현하고자 한다면 card-deck으로 감싸주면 된다.
  • 카드끼리 수직으로 붙는 것이 싫다면 mb-4를 명시하면 간격을 조절할 수 있다. 간격의 크기에 따라 mb-0, mb-1, mb-2, mb-3, mb-4, mb-5를 명시할 수 있다.
  • 카드에 테마를 지정할 수 있다. bg-primary, bg-secondary, bg-success, bg-danger, bg-warning, bg-info, bg-light, bg-dark, bg-white 중에 택일하여 명시하면 된다.
  • card-header는 카드를 대표하는 헤더 정보를 삽입할 수 있다. 생략이 가능하다.
저작자표시 비영리 동일조건
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
글 보관함