쇼핑몰이나 전자상거래(eCommerce) 사이트에서 상품 리뷰 평점을 매길 때 별점을 사용합니다. 별 모양 특수문자 기호를 사용하여 반만 색칠된 별 모양을 만들 수 있습니다. 하지만 스타일이 잘 꾸며져 있지 않아 별로입니다.
또 다른 방법으로 별 모양 이미지 PNG 파일을 사용하여 투명한 배경 위로 별 이미지를 겹쳐서 표시할 수 있습니다. 그러나 이 방법도 수정하기가 어렵고 번거롭습니다. 이 포스팅에서는 폰트 어썸(FontAwesome)으로 간편하게 별점 만드는 방법에 대해 살펴봅니다.
별점 기능 구현
이 기능의 작동 원리는 매우 간단합니다. 제이쿼리없이 폰트어썸과 자바스크립트로만 간단한 코드를 추가하고 리뷰 점수를 수정하면 별점 기능이 자동으로 구현됩니다.
별점 주기를 반개(0.5) 단위로 표시할 수 있습니다.
전체 코드
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css'/>
<div class='RatingStar'>
<div class='RatingScore'>
<div class='outer-star'><div class='inner-star'></div></div>
</div>
</div>
<style>
.inner-star::before{color: #FF9600;}
.outer-star {position: relative;display: inline-block;color: #CCCCCC;}
.inner-star {position: absolute;left: 0;top: 0;width: 0%;overflow: hidden;white-space: nowrap;}
.outer-star::before, .inner-star::before {content: '\f005 \f005 \f005 \f005 \f005';font-family: 'Font Awesome 5 free';font-weight: 900;}
</style>
<script>/*<![CDATA[*/ ratings = {RatingScore: 4.5}
totalRating = 5;table = document.querySelector('.RatingStar');function rateIt() {for (rating in ratings) {ratingPercentage = ratings[rating] / totalRating * 100;ratingRounded = Math.round(ratingPercentage / 10) * 10 + '%';star = table.querySelector(`.${rating} .inner-star`);numberRating = table.querySelector(`.${rating} .numberRating`);star.style.width = ratingRounded;numberRating.innerText = ratings[rating];}}rateIt()
/*]]>*/</script>
FontAwesome
- 폰트어썸 5 무료 버전 cdn를 불러옵니다.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"/>
HTML
- 'RatingScore'는 점수를 매기기 위한 역할입니다.
- 'outer-star'는 별점의 배경 역할입니다.
<div class='RatingStar'>
<div class='RatingScore'>
<div class='outer-star'><div class='inner-star'></div></div>
</div>
</div>
CSS
- 별점의 색상을 바꾸려면 'inner-star'의 color를 수정합니다.
- 별점의 배경색을 바꾸려면 'outer-star'의 color 를 수정합니다.
- 별점 갯수를 10개로 변경하려면 '\f005 \f005 \f005 \f005 \f005 \f005 \f005 \f005 \f005 \f005' 으로 변경합니다.
.inner-star::before{color: #FF9600;}
.outer-star {position: relative;display: inline-block;color: #CCCCCC;}
.inner-star {position: absolute;left: 0;top: 0;width: 0%;overflow: hidden;white-space: nowrap;}
.outer-star::before, .inner-star::before {content: '\f005 \f005 \f005 \f005 \f005';font-family: 'Font Awesome 5 free';font-weight: 900;}
Javascript
- 별점의 평점은 0 부터 5 까지 0.5 단위로 별점을 매길 수 있습니다.
<script>/*<![CDATA[*/ ratings = {RatingScore: 4.5}
totalRating = 5;table = document.querySelector('.RatingStar');function rateIt() {for (rating in ratings) {ratingPercentage = ratings[rating] / totalRating * 100;ratingRounded = Math.round(ratingPercentage / 10) * 10 + '%';star = table.querySelector(`.${rating} .inner-star`);numberRating = table.querySelector(`.${rating} .numberRating`);star.style.width = ratingRounded;numberRating.innerText = ratings[rating];}}rateIt()
/*]]>*/</script>