웹 페이지에서 상품 리뷰나 콘텐츠 평가를 표현할 때 자주 사용되는 별점(star rating) UI는 CSS와 아이콘 폰트만으로도 손쉽게 구현할 수 있습니다. 이 글에서는 Font Awesome의 별 아이콘과 몇 줄의 CSS 스타일을 조합하여 간단한 별점 모양을 만드는 방법을 소개합니다.
예제 코드
아래 코드는 Font Awesome 4.7 아이콘 라이브러리를 CDN으로 불러온 뒤, 별 아이콘에 색상과 테두리 스타일을 적용하는 전체 예제입니다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 30px;
}
.fa {
font-size: 30px;
color: grey;
}
.rated {
color: rgb(255, 0, 0);
border: 2px solid yellow;
}
</style>
</head>
<body>
<h1>Star Rating Example</h1>
<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>
<span class="fa fa-star"></span>
</body>
</html>코드 설명
핵심 동작 원리는 다음과 같습니다.
1. Font Awesome 로드 — <link> 태그로 CDN에서 Font Awesome CSS 파일을 가져오면, fa fa-star 클래스만으로 별 모양 아이콘을 사용할 수 있습니다.
2. 기본 별 스타일 — .fa 선택자로 모든 아이콘의 크기를 30px로 지정하고, 기본 색상은 회색(grey)으로 설정했습니다. 이것이 '평점 없음' 상태의 별입니다.
3. 평점이 매겨진 별 — .rated 클래스가 추가된 별은 빨간색(rgb(255, 0, 0))으로 채워지고, 노란색 2px 테두리가 적용되어 선택된 상태임을 한눈에 알 수 있습니다.
실행 결과
위 코드를 브라우저에서 실행하면 다음과 같은 화면이 출력됩니다. 앞의 세 개 별은 빨간색 배경과 노란색 테두리로 강조되어 있고, 나머지 두 개 별은 회색으로 표시되어 '5점 만점에 3점'이라는 평점을 직관적으로 보여줍니다.
응용 팁
실무에서는 색상을 노란색(#FFD700) 계열로 바꾸거나, JavaScript와 함께 사용해 클릭 시 평점이 동적으로 변경되는 인터랙티브 별점 위젯으로 확장할 수도 있습니다. 또한 Font Awesome 대신 SVG 아이콘이나 유니코드 문자(★)를 활용하면 외부 라이브러리 없이도 비슷한 효과를 낼 수 있습니다.