Home
Blogger
Tips

폰트어썸 상품 리뷰 별점 만들기

폰트어썸(FontAwesome)으로 쉽게 별점 만드는 방법
폰트어썸 상품 리뷰 별점 만들기 / 별점 반개 표시

쇼핑몰이나 전자상거래(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>
Demo Download

Post a Comment