CSS만으로도 별점 아이콘과 등급별 분포 막대그래프가 결합된 사용자 평가(User Rating) 스코어카드를 손쉽게 구현할 수 있습니다. 이번 예제에서는 Font Awesome의 별 아이콘과 CSS float 레이아웃, 진행 바(progress bar) 스타일링을 조합해 리뷰 사이트에서 흔히 볼 수 있는 평점 요약 카드를 만들어 보겠습니다.
전체 예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<style>
* {
box-sizing: border-box;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 30px;
max-width: 800px;
padding: 20px;
}
.rateHeader {
font-size: 25px;
margin-right: 25px;
}
.fa {
font-size: 25px;
color: grey;
}
.rated {
color: rgb(255, 0, 0);
border: 2px solid yellow;
}
.data {
float: left;
width: 15%;
margin-top: 10px;
font-weight: bold;
}
.progressBar {
margin-top: 10px;
float: left;
width: 70%;
}
.right {
text-align: right;
}
.row:after {
content: "";
display: table;
clear: both;
}
.progressContainer {
width: 100%;
background-color: #f1f1f1;
text-align: center;
color: white;
border-radius: 10px;
}
.bar-1, .bar-2, .bar-3, .bar-4, .bar-5 {
border-radius: 10px;
}
.bar-5 {
width: 70%;
height: 18px;
background-color: rgb(76, 175, 162);
}
.bar-4 {
width: 50%;
height: 18px;
background-color: rgb(243, 222, 33);
}
.bar-3 {
width: 20%;
height: 18px;
background-color: #12d400;
}
.bar-2 {
width: 65%;
height: 18px;
background-color: #ff0055;
}
.bar-1 {
width: 40%;
height: 18px;
background-color: #a836f4;
}
</style>
</head>
<body>
<span class="rateHeader">User Rating</span>
<span class="fa fa-star rated"></span>
<span class="fa fa-star rated"></span>
<span class="fa fa-star rated"></span>
<span class="fa fa-star rated"></span>
<span class="fa fa-star"></span>
<p>3.9 average based on 200 foodies.</p>
<div class="row">
<div class="data">
<div>5 star</div>
</div>
<div class="progressBar">
<div class="progressContainer">
<div class="bar-5"></div>
</div>
</div>
<div class="data right">
<div>120</div>
</div>
<div class="data">
<div>4 star</div>
</div>
<div class="progressBar">
<div class="progressContainer">
<div class="bar-4"></div>
</div>
</div>
<div class="data right">
<div>110</div>
</div>
<div class="data">
<div>3 star</div>
</div>
<div class="progressBar">
<div class="progressContainer">
<div class="bar-3"></div>
</div>
</div>
<div class="data right">
<div>30</div>
</div>
<div class="data">
<div>2 star</div>
</div>
<div class="progressBar">
<div class="progressContainer">
<div class="bar-2"></div>
</div>
</div>
<div class="data right">
<div>20</div>
</div>
<div class="data">
<div>1 star</div>
</div>
<div class="progressBar">
<div class="progressContainer">
<div class="bar-1"></div>
</div>
</div>
<div class="data right">
<div>12</div>
</div>
</div>
</body>
</html>
코드 핵심 살펴보기
1. 별점 아이콘 표시
Font Awesome의 fa-star 클래스로 별 아이콘을 렌더링하고, .rated 클래스가 적용된 별에는 빨간색(rgb(255, 0, 0))과 노란색 테두리를 지정해 선택된 상태를 시각적으로 강조했습니다.
2. 등급별 분포 막대그래프
.progressContainer는 연회색(#f1f1f1) 배경의 트랙 역할을 하며, bar-5부터 bar-1까지 각 클래스가 해당 등급의 비율에 맞는 너비와 고유한 배경색을 가진 막대를 표현합니다. border-radius: 10px 덕분에 막대 끝이 부드럽게 처리됩니다.
3. float 레이아웃과 clearfix
왼쪽 라벨(.data), 중앙 막대(.progressBar), 오른쪽 리뷰 수(.right)를 한 줄에 배치하기 위해 float를 사용했고, .row:after에 clearfix 기법을 적용해 부모 요소의 높이가 무너지는 현상을 방지했습니다.
실행 결과
위 코드를 브라우저에서 실행하면 별점과 등급별 리뷰 분포가 한눈에 들어오는 다음과 같은 스코어카드가 화면에 출력됩니다.
