[Bootstrap] Panel과 Thumbnails, Card

Open source/Bootstrap  2020. 2. 27. 19:36

안녕하세요. 명월입니다.


이 글은 Bootstrap에서 Panel과 Thumbnails, Card 에 대한 글입니다.


포털 사이트를 만들면 거의 보통 Dashboard를 만들게 됩니다.

전부 다 그런 형식은 아닙니다만 포털 사이트의 구성을 보면 카테고리별로 데이터를 입력하는 페이지가 존재하고, 그것을 계산 혹은 배치 시스템 이나 다른 시스템과 연계하여 실행 결과등을 표시하는 페이지가 존재합니다.

그리고 사이트를 관리하기 위한 페이지도 있겠네요. 그럼 보통　첫 페이지에서의 모든 데이터의 통계 수치를 보여주는 Dashboard를 작성하는 경우가 많습니다.


이 Dashboard에는 여러가지 데이터를 하나로 보여주는 형식이다 보니 각 파트 별로 구분을 지어주는 Panel형식의 페이지를 만들게 됩니다.

출처 - bootstrap template, adimlte3 example


Bootstrap에서는 이 기본적인 Panel 형식을 지원합니다.

참조 - https://getbootstrap.com/docs/3.4/components/#panels

<!DOCTYPE html>
<html>
<head>
  <title>title</title>
  <!-- Bootstrap cdn 설정 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <!-- panel 크기를 설정할 요소 -->
  <div style="width:300px;margin:10px;">
    <!-- panel를 사용하기 위해서는 클래스에 panel를 추가하면 된다. -->
    <!-- 스타일은 panel-primary, panel-success, panel-info, panel-warning, panel-danger, panel-default가 존재한다. -->
    <div class="panel panel-primary">
      <!-- panel의 구조는 heading, body, footer이 존재한다. -->
      <!-- heading과 footer는 생략 가능하지만 body는 필수이다. -->
      <div class="panel-heading">
        <!-- panel-title은 h1,2,3,4,5의 태그에서 사용 가능하며 태그별로 폰트 크기의 차이는 없다. -->
        <!-- panel-title를 사용하지 않아도 된다.-->
        <h3 class="panel-title">Panel title</h3>
      </div>
      <!-- panel에서 필수 요소이다. -->
      <div class="panel-body">
        Panel content
        <br />
        Panel content
        <br />
        Panel content
      </div>
      <!-- panel의 아래 하단을 나타낸다. -->
      <div class="panel-footer">
        Panel footer
      </div>
    </div>
  </div>
</body>		
</html>

Panel title

Panel content
Panel content
Panel content
Panel footer

사실 Panel이 예전부터 자주 사용되는 스타일이고 최근에도 Dashboard에서는 빠질 수 없는 스타일입니다. 디자인 구성에 따라 다르겠지만, 꼭 Panel이 Dashboard만이 아닌 여러 페이지에서 응용적으로 사용 가능한 스타일이기도 합니다.

그리고 최근에는 사이트 등에 panel에 이미지를 넣는 스타일도 많이 있습니다. 단지 글만 있는 panel은 조금 강조하는 특성이 약해 보이고, 함축적인 이미지는 여러 글보다는 훨씬 효과적으로 정보를 전달하는 힘이 있기 때문입니다.


물론 위 Panel에 img태그를 넣어서 사용해되 됩니다만 Bootstrap에서는 이미지가 있는 Panel style이 독립적으로 있습니다.

Bootstrap 3.x에서는 Thumbnails이고 4.x에서는 Card라고 합니다.

참조 - https://getbootstrap.com/docs/3.4/components/#thumbnails

참조 - https://getbootstrap.com/docs/4.4/components/card/


Bootstrap 3.x에서의 thumbnail를 사용하는 예제이다.

<!DOCTYPE html>
<html>
<head>
  <title>title</title>
  <!-- Bootstrap cdn 설정 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <style>
    /* float:right를 사용하기 때문에 float 초기화가 필요하다. */
    .float-right:before, .float-right:after {
      clear:both;
      display: table;
      content: '';
    }
    /* 우로 정렬 */
    .float-right a {
      float:right;
    }
  </style>
  <!-- thumbnail 크기를 설정할 요소 -->
  <div style="width:300px;margin:10px;">
    <!-- thumbnail를 사용하기 위해서는 클래스에 thumbnail를 추가하면 된다. -->
    <!-- 구조는 img와 div.caption으로 구성되어 있다. -->
    <div class="thumbnail">
      <img src="https://tistory3.daumcdn.net/tistory/1041549/skin/images/nowonbuntistory.png" alt="명월 일지">
      <div class="caption">
        <!-- panel과 다르게 caption안에서 제목과 내용을 다 구성한다. -->
        <h3>제목입니다.</h3>
        <p>내용입니다.</p>
        <!-- 바로가기 버튼이다. -->
        <p class="float-right"><a href="https://nowonbun.tistory.com" class="btn btn-primary" target="_blank">GO →</a></p>
      </div>
    </div>
  </div>
</body>		
</html>

Bootstrap 4.x에서는 thumbnail 대신에 Card를 사용합니다.

구조와 사용 방법은 거의 비슷합니다.

<!DOCTYPE html>
<html>
<head>
  <title>title</title>
  <!-- Bootstrap cdn 설정 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <style>
    /* pull-right를 사용하기 때문에 float 초기화가 필요하다. */
    .float-right:before, .float-right:after {
      clear:both;
      display: table;
      content: '';
    }
    /* 우로 정렬 */
    .float-right a {
      float:right;
    }
  </style>
  <!-- card 크기를 설정할 요소 -->
  <div style="width:300px;margin:10px;">
    <!-- thumbnail를 사용하기 위해서는 클래스에 thumbnail를 추가하면 된다. -->
    <!-- 구조는 img와 card-body으로 구성되어 있다. -->
    <div class="card">
      <img src="https://tistory3.daumcdn.net/tistory/1041549/skin/images/nowonbuntistory.png" class="card-img-top" alt="명월 일지">
      <div class="card-body">
      　　<!-- panel과 다르게 card-body안에서 제목과 내용을 다 구성한다. -->
        <h5 class="card-title">제목입니다.</h5>
        <p>내용입니다.</p>
        <!-- 바로가기 버튼이다. -->
        <p class="float-right"><a href="https://nowonbun.tistory.com" class="btn btn-primary" target="_blank">GO →</a></p>
      </div>
    </div>
  </div>
</body>		
</html>
명월 일지

제목입니다.

내용입니다.

GO →

여기까지 Bootstrap에서 Panel과 Thumbnails, Card에 대한 글이었습니다.


궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.

저작자표시

'Open source > Bootstrap' 카테고리의 다른 글

[Bootstrap] 이미지 슬라이딩 컨트롤(carousel)  (0) 2020.03.03
[Bootstrap] 팝오버(popover)  (0) 2020.03.02
[Bootstrap] 툴팁(tooltip)  (0) 2020.02.29
[Bootstrap] 탭 (Tab)  (0) 2020.02.28
[Bootstrap] 페이징(Paging)와 페이저(pager)  (0) 2020.02.26
[Bootstrap] 드롭 다운(Dropdown)  (0) 2020.02.24
[Bootstrap] Collapse(메뉴 접기, 펴기)를 사용하는 방법  (0) 2019.12.01
[Bootstrap] Scrollspy  (0) 2019.09.02