CSS만으로 반응형 가격표 구현하기
가격표(Pricing Table)는 요금제나 멤버십 플랜을 사용자에게 한눈에 비교해 보여주는 대표적인 UI 요소입니다. CSS의 float 레이아웃과 미디어 쿼리(Media Query)를 활용하면 별도의 JavaScript 없이도 화면 크기에 따라 자동으로 배치가 조절되는 반응형 가격표를 손쉽게 만들 수 있습니다.
핵심 원리는 다음과 같습니다.
- 각 가격표 컬럼에
width: 50%를 지정해 데스크톱에서는 두 개가 나란히 배치되도록 합니다. - 미디어 쿼리로 화면 너비가 600px 이하일 때
width: 100%로 변경하여 모바일에서는 세로로 쌓이게 만듭니다. :hover선택자와box-shadow,transition을 활용해 마우스를 올렸을 때 입체적인 그림자 효과를 추가합니다.
전체 예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
* {
box-sizing: border-box;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.compareFields {
float: left;
width: 50%;
padding: 8px;
}
li {
font-size: 18px;
font-weight: 500;
}
.pricing {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.pricing:hover {
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2);
}
.pricing .header {
background-color: rgb(52, 31, 129);
color: white;
font-size: 25px;
}
.pricing li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}
.button {
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}
@media only screen and (max-width: 600px) {
.compareFields {
width: 100%;
}
}
</style>
</head>
<body>
<h1 style="text-align:center">Responsive Pricing Tables Example</h1>
<div class="compareFields">
<ul class="pricing">
<li class="header">Free Membership</li>
<li>20 messages</li>
<li>No customer Support</li>
<li>98% uptime</li>
<li>1GB per day</li>
<li>50GB storage</li>
<li>
<a href="#" class="button" style="background-color: rgb(52, 31, 129);">Register</a>
</li>
</ul>
</div>
<div class="compareFields">
<ul class="pricing">
<li class="header" style="background-color:rgb(250, 136, 59)">
Advanced Membership
</li>
<li>100 messages</li>
<li>24 * 7 customer support</li>
<li>99.9% uptime</li>
<li>8GB per day</li>
<li>150GB storage</li>
<li>
<a href="#" class="button" style="background-color:rgb(250, 136, 59)">Register</a>
</li>
</ul>
<div>
</body>
</html>코드 설명
1. 기본 레이아웃 설정
.compareFields 클래스에 float: left;와 width: 50%를 적용하면 두 개의 가격표가 화면을 반씩 나누어 좌우로 배치됩니다. 또한 * { box-sizing: border-box; }를 선언해 패딩과 테두리가 너비 계산에 포함되도록 하여 레이아웃이 깨지는 것을 방지합니다.
2. 호버 효과와 전환 애니메이션
.pricing:hover에 box-shadow를 적용하고 transition: 0.3s;로 부드러운 전환 효과를 주면, 사용자가 특정 요금제에 마우스를 올릴 때 카드가 살짝 떠오르는 듯한 시각적 피드백을 제공할 수 있습니다.
3. 미디어 쿼리로 반응형 처리
@media only screen and (max-width: 600px) 규칙은 스마트폰처럼 화면이 좁아질 때 각 가격표의 너비를 100%로 변경합니다. 이렇게 하면 두 개의 가격표가 나란히 있던 데스크톱 화면과 달리, 모바일 화면에서는 가격표가 위아래로 순차적으로 쌓이며 자연스럽게 표시됩니다.
실행 결과
위 코드를 실행하면 보라색 헤더의 '무료 멤버십(Free Membership)' 플랜과 주황색 헤더의 '프리미엄 멤버십(Advanced Membership)' 플랜 두 개의 가격표가 좌우로 나란히 출력됩니다.
화면 크기를 줄였을 때 — 브라우저 창 너비를 600px 이하로 줄이면 아래와 같이 가격표가 세로 방향으로 재배치되어 모바일 환경에서도 가독성을 유지합니다.
마무리
이처럼 CSS의 float와 미디어 쿼리만으로도 실무에서 바로 활용할 수 있는 반응형 가격표를 만들 수 있습니다. 여기에 더해 최신 프로젝트라면 Flexbox나 CSS Grid를 사용하면 코드를 더 간결하게 유지하면서 정렬과 반응형 처리를 더욱 유연하게 구현할 수 있으니 참고하시기 바랍니다.