[Bootstrap] 10. List Group, Table, Pagination 이해하기

이전 글에서는 Bootstrap의 Offcanvas와 Toast를 정리했습니다. 이번 글에서는 데이터를 보기 좋게 정리할 때 자주 사용하는 List Group, Table, Pagination을 살펴보겠습니다.

이 세 가지는 게시판, 관리자 페이지, 검색 결과, 상품 목록, 회원 목록처럼 여러 데이터를 화면에 정리해서 보여줄 때 자주 사용됩니다.

1. List Group이란?

List Group은 여러 항목을 세로 목록으로 보여주는 Bootstrap 컴포넌트입니다. 공지사항 목록, 메뉴 목록, 알림 목록, 카테고리 목록처럼 여러 데이터를 나열할 때 사용합니다.


<ul class="list-group">
  <li class="list-group-item">첫 번째 항목</li>
  <li class="list-group-item">두 번째 항목</li>
  <li class="list-group-item">세 번째 항목</li>
</ul>

바깥 영역에는 list-group 클래스를 사용하고, 각 항목에는 list-group-item 클래스를 사용합니다.

2. 링크 형태의 List Group

목록 항목을 클릭해서 다른 페이지로 이동하게 만들고 싶다면 a 태그를 사용할 수 있습니다. 이때는 list-group-item-action 클래스를 함께 사용합니다.


<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    전체 게시글
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    공지사항
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    자유게시판
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    질문답변
  </a>
</div>

active 클래스는 현재 선택된 항목을 표시할 때 사용합니다. 사용자가 지금 어느 메뉴를 보고 있는지 알려주는 역할을 합니다.

3. 상태 색상이 있는 List Group

List Group 항목에도 Bootstrap의 상태 색상을 적용할 수 있습니다. 성공, 경고, 오류, 정보 같은 상태를 목록 안에서 구분할 때 유용합니다.


<ul class="list-group">
  <li class="list-group-item list-group-item-primary">일반 안내</li>
  <li class="list-group-item list-group-item-success">처리 완료</li>
  <li class="list-group-item list-group-item-warning">확인 필요</li>
  <li class="list-group-item list-group-item-danger">오류 발생</li>
</ul>

색상은 장식이 아니라 상태를 전달하는 역할입니다. 따라서 의미에 맞는 색상을 선택하는 것이 좋습니다.

4. Badge와 함께 사용하는 List Group

목록 오른쪽에 개수나 상태를 표시하고 싶다면 Badge를 함께 사용할 수 있습니다. 알림 개수, 댓글 수, 대기 건수 등을 보여줄 때 자주 사용합니다.


<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    알림
    <span class="badge text-bg-primary rounded-pill">4</span>
  </li>

  <li class="list-group-item d-flex justify-content-between align-items-center">
    댓글
    <span class="badge text-bg-success rounded-pill">12</span>
  </li>

  <li class="list-group-item d-flex justify-content-between align-items-center">
    문의
    <span class="badge text-bg-danger rounded-pill">2</span>
  </li>
</ul>

d-flex, justify-content-between, align-items-center를 함께 사용하면 왼쪽에는 제목, 오른쪽에는 배지를 깔끔하게 배치할 수 있습니다.

5. Table이란?

Table은 행과 열로 데이터를 정리해서 보여주는 HTML 요소입니다. Bootstrap에서는 table 태그에 table 클래스를 붙이면 기본 표 스타일이 적용됩니다.


<table class="table">
  <thead>
    <tr>
      <th>번호</th>
      <th>이름</th>
      <th>이메일</th>
      <th>상태</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1</td>
      <td>홍길동</td>
      <td>hong@example.com</td>
      <td>활성</td>
    </tr>

    <tr>
      <td>2</td>
      <td>김영희</td>
      <td>kim@example.com</td>
      <td>대기</td>
    </tr>
  </tbody>
</table>

thead는 표의 제목 영역, tbody는 실제 데이터가 들어가는 영역입니다. 표를 만들 때는 구조를 구분해 작성하는 것이 좋습니다.

6. 줄무늬와 테두리가 있는 Table

데이터가 많아지면 행을 구분하기 어려울 수 있습니다. 이때 table-striped, table-bordered 클래스를 사용할 수 있습니다.


<table class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>번호</th>
      <th>제목</th>
      <th>작성자</th>
      <th>작성일</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1</td>
      <td>Bootstrap 정리</td>
      <td>관리자</td>
      <td>2026-06-28</td>
    </tr>

    <tr>
      <td>2</td>
      <td>그리드 시스템 복습</td>
      <td>홍길동</td>
      <td>2026-06-28</td>
    </tr>
  </tbody>
</table>

클래스	역할
table	Bootstrap 표 기본 스타일
table-striped	행마다 배경을 다르게 표시
table-bordered	표에 테두리 표시
table-hover	마우스를 올린 행 강조

7. Hover 효과가 있는 Table

사용자가 어느 행을 보고 있는지 쉽게 알 수 있도록 마우스를 올린 행을 강조할 수 있습니다.


<table class="table table-hover">
  <thead>
    <tr>
      <th>번호</th>
      <th>상품명</th>
      <th>가격</th>
      <th>상태</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1</td>
      <td>키보드</td>
      <td>45,000원</td>
      <td>판매중</td>
    </tr>

    <tr>
      <td>2</td>
      <td>마우스</td>
      <td>25,000원</td>
      <td>품절</td>
    </tr>
  </tbody>
</table>

table-hover는 게시판 목록, 상품 목록, 관리자 목록처럼 행 단위로 데이터를 확인하는 화면에 잘 어울립니다.

8. 반응형 Table

표는 열이 많아지면 모바일 화면에서 쉽게 깨질 수 있습니다. 이때 table을 table-responsive 영역으로 감싸면 작은 화면에서 가로 스크롤로 볼 수 있습니다.


<div class="table-responsive">
  <table class="table table-striped table-hover">
    <thead>
      <tr>
        <th>번호</th>
        <th>회원명</th>
        <th>이메일</th>
        <th>가입일</th>
        <th>최근 접속</th>
        <th>상태</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>1</td>
        <td>홍길동</td>
        <td>hong@example.com</td>
        <td>2026-06-01</td>
        <td>2026-06-28</td>
        <td>활성</td>
      </tr>
    </tbody>
  </table>
</div>

모바일 화면까지 고려한다면 표를 만들 때 table-responsive를 함께 사용하는 습관을 들이는 것이 좋습니다.

9. Pagination이란?

Pagination은 많은 데이터를 여러 페이지로 나누어 보여줄 때 사용하는 컴포넌트입니다. 게시판 목록, 검색 결과, 상품 목록, 관리자 목록에서 자주 사용됩니다.


<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#">이전</a>
    </li>

    <li class="page-item">
      <a class="page-link" href="#">1</a>
    </li>

    <li class="page-item active">
      <a class="page-link" href="#">2</a>
    </li>

    <li class="page-item">
      <a class="page-link" href="#">3</a>
    </li>

    <li class="page-item">
      <a class="page-link" href="#">다음</a>
    </li>
  </ul>
</nav>

Pagination은 보통 nav, ul, li, a 구조로 작성합니다. 현재 페이지에는 active 클래스를 붙여 사용자가 보고 있는 페이지를 표시합니다.

10. 비활성 페이지 버튼

첫 페이지에서는 이전 버튼이 필요하지 않거나 클릭되면 안 되는 경우가 있습니다. 이때 disabled 클래스를 사용할 수 있습니다.


<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link">이전</a>
    </li>

    <li class="page-item active">
      <a class="page-link" href="#">1</a>
    </li>

    <li class="page-item">
      <a class="page-link" href="#">2</a>
    </li>

    <li class="page-item">
      <a class="page-link" href="#">다음</a>
    </li>
  </ul>
</nav>

disabled는 클릭할 수 없는 상태를 시각적으로 표현합니다. active는 현재 선택된 페이지를 나타냅니다.

11. Pagination 크기 조절

Pagination은 크기도 조절할 수 있습니다. 작은 목록에는 pagination-sm, 큰 화면에는 pagination-lg를 사용할 수 있습니다.


<ul class="pagination pagination-sm">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
</ul>

<ul class="pagination pagination-lg">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
</ul>

모바일이나 좁은 영역에서는 작은 크기를 사용하고, 메인 목록 하단처럼 눈에 잘 보여야 하는 곳에서는 기본 크기나 큰 크기를 사용할 수 있습니다.

12. Pagination 정렬

Pagination은 Flex 유틸리티 클래스를 함께 사용해 정렬할 수 있습니다. 가운데 정렬이나 오른쪽 정렬이 자주 사용됩니다.


<nav aria-label="Page navigation">
  <ul class="pagination justify-content-center">
    <li class="page-item"><a class="page-link" href="#">이전</a></li>
    <li class="page-item active"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">다음</a></li>
  </ul>
</nav>


<ul class="pagination justify-content-end">
  ...
</ul>

게시판이나 검색 결과 목록에서는 가운데 정렬을 많이 사용하고, 관리자 화면에서는 오른쪽 정렬을 사용하는 경우도 많습니다.

13. List Group, Table, Pagination 함께 사용하기

실제 화면에서는 이 세 가지를 함께 사용하는 경우가 많습니다. 왼쪽에는 카테고리 List Group, 오른쪽에는 Table 목록, 아래에는 Pagination을 배치할 수 있습니다.


<div class="container">
  <div class="row g-4">

    <div class="col-md-3">
      <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action active">전체</a>
        <a href="#" class="list-group-item list-group-item-action">공지사항</a>
        <a href="#" class="list-group-item list-group-item-action">자유게시판</a>
        <a href="#" class="list-group-item list-group-item-action">질문답변</a>
      </div>
    </div>

    <div class="col-md-9">
      <div class="table-responsive">
        <table class="table table-hover">
          <thead>
            <tr>
              <th>번호</th>
              <th>제목</th>
              <th>작성자</th>
              <th>작성일</th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td>1</td>
              <td>Bootstrap 게시판 예시</td>
              <td>관리자</td>
              <td>2026-06-28</td>
            </tr>
          </tbody>
        </table>
      </div>

      <nav aria-label="Page navigation">
        <ul class="pagination justify-content-center">
          <li class="page-item disabled"><a class="page-link">이전</a></li>
          <li class="page-item active"><a class="page-link" href="#">1</a></li>
          <li class="page-item"><a class="page-link" href="#">2</a></li>
          <li class="page-item"><a class="page-link" href="#">다음</a></li>
        </ul>
      </nav>
    </div>

  </div>
</div>

이 구조는 게시판, 관리자 목록, 검색 결과 화면의 기본 뼈대로 활용하기 좋습니다.

14. 사용 시 주의할 점

List Group은 항목이 너무 많아지면 그룹을 나누는 것이 좋다.
현재 선택된 항목에는 active를 사용해 위치를 알려주는 것이 좋다.
Table은 열이 많을 경우 table-responsive로 감싸는 것이 안전하다.
표에는 thead와 tbody를 구분해 작성하는 것이 좋다.
Pagination의 현재 페이지에는 active를 사용한다.
클릭할 수 없는 페이지 버튼에는 disabled를 사용한다.

데이터를 보여주는 화면은 보기 좋은 것도 중요하지만, 사용자가 원하는 정보를 빠르게 찾을 수 있어야 합니다. 목록, 표, 페이지 이동은 단순해 보여도 화면의 사용성을 크게 좌우합니다.

15. 정리

List Group은 여러 항목을 목록 형태로 보여주는 컴포넌트다.
list-group-item-action을 사용하면 클릭 가능한 목록을 만들 수 있다.
Badge를 함께 사용하면 항목별 개수나 상태를 표시할 수 있다.
Table은 데이터를 행과 열로 정리해서 보여줄 때 사용한다.
table-striped, table-bordered, table-hover로 표를 보기 좋게 만들 수 있다.
table-responsive는 모바일 화면에서 표가 깨지는 문제를 줄여준다.
Pagination은 많은 데이터를 여러 페이지로 나누어 보여줄 때 사용한다.

이번 글에서는 Bootstrap의 List Group, Table, Pagination을 정리했습니다. 이 세 가지는 데이터를 정리해서 보여주는 화면에서 매우 자주 사용됩니다. 게시판이나 관리자 페이지를 만들 때 특히 많이 등장하므로 구조를 익혀두는 것이 좋습니다.

다음 글에서는 Bootstrap에서 현재 위치나 로딩 상태를 표현할 때 사용하는 Breadcrumb, Spinner, Placeholder를 정리해보겠습니다.

'Tech Stack > BootStrap' 카테고리의 다른 글

[Bootstrap] 12. Image, Figure, Ratio 이해하기 (0)	2026.06.30
[Bootstrap] 11. Breadcrumb, Spinner, Placeholder 이해하기 (0)	2026.06.29
[Bootstrap] 09. Offcanvas와 Toast 이해하기 (0)	2026.06.27
[Bootstrap] 08. Collapse와 Carousel 이해하기 (0)	2026.06.26
[Bootstrap] 07. Dropdown, Tooltip, Popover 이해하기 (0)	2026.06.25