Computer >> 컴퓨터 >  >> 프로그래밍 >> CSS

부트스트랩 프레임워크로 반응형 테이블 만들기 완벽 가이드

테이블은 행과 열의 집합 간의 관계를 표현하여 데이터를 체계적으로 정리하고 시각화하는 가장 효과적인 방법 중 하나입니다.

부트스트랩(Bootstrap)은 반응형 웹 디자인을 빠르게 구현할 수 있게 도와주는 대표적인 CSS 프레임워크입니다. 이 글에서는 부트스트랩을 활용해 테이블을 생성하고 다양한 스타일을 적용하는 방법을 실전 예제와 함께 상세히 다룹니다.

시작하기: 부트스트랩 환경 설정

부트스트랩 테이블을 사용하려면 먼저 프로젝트에 부트스트랩 CSS를 포함해야 합니다. 가장 간편한 방법은 CDN(Content Delivery Network)을 이용하는 것입니다.

<!-- Bootstrap 5 CSS (최신 버전 권장) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

참고: 부트스트랩 5부터는 jQuery와 Popper.js가 필수 의존성에서 제외되었습니다. 자바스크립트 기반 컴포넌트(모달, 드롭다운 등)를 사용하지 않는 순수 테이블 구현이라면 CSS만 포함해도 충분합니다.

언제 테이블을 사용해야 할까?

대량의 구조화된 데이터를 한눈에 비교·분석해야 할 때 테이블이 최적의 선택입니다. 부트스트랩 테이블을 사용하면 별도의 미디어 쿼리 작성 없이도 반응형 테이블을 손쉽게 구현할 수 있습니다. 기본 HTML 테이블 구조(<table>, <thead>, <tbody>, <tr>, <th>, <td>)를 그대로 유지하면서 부트스트랩 클래스만 추가하면 되므로 기존 마크업과의 호환성도 뛰어납니다.

기본 테이블 구조 만들기

부트스트랩 테이블의 기초는 .table 클래스에서 시작합니다. 이 클래스만 추가해도 기본적인 패딩, 보더, 호버 효과 등이 적용됩니다.

최소한의 마크업 예제

<table class="table">
  <thead>
    <tr>
      <th scope="col">번호</th>
      <th scope="col">음료</th>
      <th scope="col">가격</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>아이스 티</td>
      <td>$3.25</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>탄산음료</td>
      <td>$3.00</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>커피</td>
      <td>$2.00</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td>라떼</td>
      <td>$4.25</td>
    </tr>
  </tbody>
</table>

scope="col"과 scope="row" 속성은 접근성(웹 접근성, 스크린 리더 지원)을 위해 필수적으로 권장됩니다.

테이블 스타일 커스터마이징

부트스트랩은 테이블의 외관을 세밀하게 제어할 수 있는 다양한 유틸리티 클래스를 제공합니다. 여러 클래스를 조합해 원하는 디자인을 구현하세요.

1. 다크 모드: .table-dark

배경을 어둡게 하고 텍스트를 밝게 반전시킵니다.

<table class="table table-dark">...</table>

2. 헤더 영역 별도 스타일링: .thead-light / .thead-dark

<thead> 요소에 클래스를 추가해 헤더만 다르게 표현할 수 있습니다.

<table class="table table-primary">
  <thead class="thead-light">...</thead>
  <tbody>...</tbody>
</table>

3. 문맥별 색상 클래스

부트스트랩의 시맨틱 색상 클래스를 테이블 전체 또는 특정 행/셀에 적용 가능합니다.

  • .table-primary, .table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light, .table-dark
  • 행 단위 적용: <tr class="table-success">
  • 셀 단위 적용: <td class="table-danger">

4. 줄무늬(스트라이프): .table-striped

<tbody> 내 홀수/짝수 행에 번갈아 배경색을 주어 가독성을 높입니다.

<table class="table table-striped">...</table>

5. 테두리 제어

  • .table-bordered: 모든 셀과 테이블 외곽에 테두리 추가
  • .table-borderless: 모든 테두리 제거 (미니멀 디자인에 적합)
<!-- 테두리 있는 테이블 -->
<table class="table table-bordered">...</table>

<!-- 테두리 없는 테이블 -->
<table class="table table-borderless">...</table>

6. 호버 효과: .table-hover

마우스 커서를 올린 행의 배경색이 바뀌어 시각적 피드백을 제공합니다.

<table class="table table-hover">...</table>

7. 반응형 테이블: .table-responsive

화면 너비보다 테이블 콘텐츠가 넓을 때 가로 스크롤을 활성화해 레이아웃이 깨지지 않게 합니다. 브레이크포인트별로 적용하려면 .table-responsive{-sm|-md|-lg|-xl|-xxl}을 사용하세요.

<div class="table-responsive">
  <table class="table">...</table>
</div>

실전 조합 예제: 종합 스타일 적용

여러 클래스를 조합해 전문적인 느낌의 테이블을 완성해 보세요.

<div class="table-responsive">
  <table class="table table-hover table-striped table-bordered align-middle">
    <thead class="thead-dark">
      <tr>
        <th scope="col">#</th>
        <th scope="col">상품명</th>
        <th scope="col">카테고리</th>
        <th scope="col">가격</th>
        <th scope="col">재고</th>
        <th scope="col">상태</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>무선 마우스</td>
        <td>IT 기기</td>
        <td>₩29,000</td>
        <td>120</td>
        <td><span class="badge bg-success">판매중</span></td>
      </tr>
      <tr class="table-warning">
        <th scope="row">2</th>
        <td>기계식 키보드</td>
        <td>IT 기기</td>
        <td>₩89,000</td>
        <td>5</td>
        <td><span class="badge bg-warning text-dark">재고 부족</span></td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>모니터 암</td>
        <td>사무용품</td>
        <td>₩45,000</td>
        <td>0</td>
        <td><span class="badge bg-danger">품절</span></td>
      </tr>
    </tbody>
  </table>
</div>

위 예제에서는 .align-middle로 셀 내용 수직 정렬, .badge로 상태 표시를 추가해 실무 수준의 UI를 구성했습니다.

마치며

부트스트랩 테이블은 기본 클래스(.table)만으로도 훌륭한 출발점이 되며, 목적에 따라 스트라이프, 호버, 테두리, 다크 모드, 반응형 래퍼 등 다양한 유틸리티를 조합해 단시간에 프로덕션 레벨의 테이블을 완성할 수 있습니다. 여기에 커스텀 CSS 변수나 Sass 커스터마이징을 더하면 브랜드 아이덴티티에 완벽하게 부합하는 테이블 디자인 시스템을 구축할 수 있습니다.

이제 공식 문서의 Tables 섹션을 참고해 더 고급 기능(캡션, 풋터, 열 그룹, 작은 테이블 등)을 탐구해 보세요.