부트스트랩(Bootstrap)의 컨텍스트 클래스(Contextual Classes)는 테이블의 특정 행(row) 또는 개별 셀(cell)의 배경색을 손쉽게 변경할 수 있게 해주는 유틸리티 클래스입니다. 이 클래스를 활용하면 별도의 CSS 작성 없이도 상태에 따라 시각적으로 구분되는 테이블을 만들 수 있습니다.
주요 컨텍스트 클래스
부트스트랩에서 테이블에 사용할 수 있는 대표적인 컨텍스트 클래스는 다음과 같습니다.
| 클래스 | 설명 |
|---|---|
| .active | 특정 행이나 셀에 마우스 오버(hover) 색상을 적용하여 강조 효과를 줍니다. |
| .success | 성공했거나 긍정적인 작업임을 나타내며, 일반적으로 초록색 계열로 표시됩니다. |
| .warning | 주의가 필요할 수 있는 경고 상태를 나타내며, 노란색 계열로 표시됩니다. |
| .danger | 위험하거나 잠재적으로 부정적인 작업을 나타내며, 빨간색 계열로 표시됩니다. |
참고로 부트스트랩 4 이상 버전에서는 .info(파란색 계열)와 .secondary, .primary 등의 클래스도 함께 제공되며, 테이블 전용으로는 .table-active, .table-success처럼 table- 접두사가 붙은 형태로 사용하는 것이 권장됩니다.
예제 코드
다음은 .active 클래스를 테이블 행에 적용한 예제입니다. 첫 번째 행(Maths 과목)이 회색 배경으로 강조되어 표시됩니다.
<!DOCTYPE html> <html> <head> <title>Bootstrap Table</title> <link href = "/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src = "/scripts/jquery.min.js"></script> <script src = "/bootstrap/js/bootstrap.min.js"></script> </head> <body> <table class = "table"> <thead> <tr> <th>Subject</th> <th>Marks</th> <th>Student</th> </tr> </thead> <tbody> <tr class = "active"> <td>Maths</td> <td>90</td> <td>Amit</td> </tr> <tr> <td>Science</td> <td>80</td> <td>Aman</td> </tr> <tr> <td>English</td> <td>85</td> <td>Rahul</td> </tr> </tbody> </table> </body> </html>
활용 팁
컨텍스트 클래스는 <tr> 요소뿐만 아니라 <td> 또는 <th> 요소에도 적용할 수 있습니다. 예를 들어 성적이 낮은 학생의 셀에만 .danger를 적용하면 위험 상태를 직관적으로 강조할 수 있습니다. 이처럼 컨텍스트 클래스를 잘 활용하면 사용자가 데이터의 상태를 한눈에 파악할 수 있는 가독성 높은 테이블을 구현할 수 있습니다.