폰트어썸 상품 리뷰 별점 만들기
width="1280"
height="720"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeWRfBpUVtVyb-WGYmAvhXZ958hR299_2t9FT7OtQdps_vfe4GIIcKmkj0JI2TD-d6XNs_XKdl7Rl_-qc7Y_ZzavSA-1dT0YA54rqiitCNGPxluL488qjAuE0I74hOAx4JbxB5Amr-uxU/s0/product-review-star-rating.png"
/>
쇼핑몰이나 전자상거래(eCommerce) 사이트에서 상품 리뷰 평점을 매길 때 별점을
사용합니다. 별 모양 특수문자 기호를 사용하여 반만 색칠된 별 모양을 만들 수
있습니다. 하지만 스타일이 잘 꾸며져 있지 않아 별로입니다.
또 다른 방법으로 별 모양 이미지 PNG 파일을 사용하여 투명한 배경 위로 별
이미지를 겹쳐서 표시할 수 있습니다. 그러나 이 방법도 수정하기가 어렵고
번거롭습니다. 이 포스팅에서는 폰트 어썸(FontAwesome)으로 간편하게 별점 만드는
방법에 대해 살펴봅니다.
목차
별점 기능 구현
이 기능의 작동 원리는 매우 간단합니다. 제이쿼리없이 폰트어썸과
자바스크립트로만 간단한 코드를 추가하고 리뷰 점수를 수정하면 별점 기능이
자동으로 구현됩니다.
별점 주기를 반개(0.5) 단위로 표시할 수 있습니다.
width="718"
height="407"
class="lazy"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWeKhFnqzRyFYEtm62sonNc9W-rW8MW1jWv1D0qMmMDFXNOIC9CIyQT2TibbEndOUrrNCjme4WUBnWKVoFZZISP8Q9vSvsDAHBVxqUMFNDOj5IBL5fCpXE34LpW3IBZ85Q7hgwjnKClK8/s0/review-star-rating-eg.PNG"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>
전체 코드
<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>title="미리 보기"
href="https://urliveblogger.blogspot.com/p/star-rating.html"
>Demo >
aria-label="Download"
title="다운로드"
href="https://drive.google.com/uc?export=download&id=17eRtGY7AOJ_sgwAnpAIPA1vBPuRdQjMm"
rel="noreferrer"
target="_blank"
>Download >