웹 페이지에서 요금제나 제품의 기능을 한눈에 비교할 수 있게 해주는 비교 테이블(Comparison Table)은 사용자 경험을 높이는 데 매우 유용한 요소입니다. 이번 글에서는 CSS만을 활용해 화면 크기에 맞춰 자동으로 조절되는 반응형 비교 테이블을 만드는 방법을 단계별로 살펴보겠습니다.
CSS 비교 테이블 예제 코드
아래 코드는 HTML과 CSS를 조합하여 깔끔하고 반응형인 비교 테이블을 구현한 전체 예제입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th, td {
text-align: center;
padding: 16px;
font-weight: bold;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 18px;
}
th:first-child, td:first-child {
text-align: left;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
</style>
</head>
<body>
<h1 style="text-align: center;">비교 테이블 예제</h1>
<table>
<tr>
<th style="width:50%">기능</th>
<th>Basic</th>
<th>Pro</th>
</tr>
<tr>
<td>무료 사용</td>
<td>가능</td>
<td> 불가능</td>
</tr>
<tr>
<td>고객 지원</td>
<td> 불가능</td>
<td>가능</td>
</tr>
<tr>
<td>사용 기간</td>
<td>1년</td>
<td>평생</td>
</tr>
<tr>
<td>보증 기간</td>
<td> 없음</td>
<td>5년</td>
</tr>
</table>
</body>
</html>핵심 CSS 속성 설명
위 코드에서 사용된 주요 CSS 속성들을 살펴보면 다음과 같습니다.
1. border-collapse와 border-spacing
border-collapse: collapse;는 인접한 셀들의 테두리를 하나로 합쳐 깔끔한 외곽선을 만들어 줍니다. border-spacing: 0;은 셀 사이의 간격을 제거합니다.
2. width: 100%
테이블 너비를 부모 요소의 100%로 설정하여 화면 크기에 따라 자동으로 확장·축소되도록 합니다. 이것이 반응형 동작의 핵심입니다.
3. nth-child(even) 활용한 줄무늬 효과
tr:nth-child(even) 선택자를 사용하면 짝수 번째 행에만 배경색(#f2f2f2)을 적용할 수 있습니다. 이렇게 하면 행이 많은 테이블에서도 데이터를 쉽게 구분할 수 있어 가독성이 크게 향상됩니다.
4. first-child 선택자로 정렬 조정
th:first-child, td:first-child를 통해 첫 번째 열(항목 이름)은 왼쪽 정렬하고, 나머지 열은 가운데 정렬하여 정보의 위계를 명확하게 표현했습니다.
실행 결과
위 코드를 브라우저에서 실행하면 아래와 같은 결과 화면을 확인할 수 있습니다.
마무리
이처럼 CSS의 몇 가지 기본 속성만 활용해도 별도의 JavaScript나 외부 라이브러리 없이 세련된 반응형 비교 테이블을 만들 수 있습니다. 여기에 호버(hover) 효과나 그림자, 강조하고 싶은 열에 배경색을 추가하면 더욱 완성도 높은 디자인을 구현할 수 있습니다. 실제 프로젝트에 적용해 보면서 자신만의 스타일로 발전시켜 보세요.