평점에서 별표 마킹

사이트에 보면 별 다섯개로 평점을 부여하도록 하는 곳이 많다.

 

총 5개의 별 중 1~5 까지 별을 선택해서 평점을 주게 된다.

이렇게 평점을 준 사용자들의 모든 점수를 합해서 평균을 내면 소수점 평점이 나올 수 있다

 

그리고 요즘 대부분의 사이트에서는 이런 소수점까지 고려해서 UI에 표시해 준다

 

다시말해,

대략 평균 평점이 4.2 점이라면 아래 그림과 같이 다섯번째 별표에도 그 비율만큼 색이 채워지도록 한다.

 

 

갑자기, 이런 표현에 대한 UI 구현이 궁금해졌다

 

편하게 구현하려면 어떻게 해야 할까?

 

만일 소수점을 무시하고 반올림하거나 절삭하는 거라면, 총 두 개의 별표 이미지(주황색, 회색)만 있으면 되고 평점에 맞춰 노출하면 그만이다.

 

그런데 여기서는 평점의 소수점까지 고려해서 별표 이미지를 그 비율로 채워줘야 한다.

 

그래서...

 

CODE PROJECT의 평점 부분을 살펴 봤다

아래 그림처럼 평점이 4.21이다.(이런 세심한... 소수점 두 자리씩이나... ㅡ.ㅡ;)
그리고 별표 이미지 중 마지막 별표를 보면, 대략 0.21의 비율만큼 채워져 있다

 

 

 

이제 소스를 보자. 아래 그림은 별표 이미지와 크롬 개발자 도구로 본 HTML 코드이다.

별표가 다 채워진 이미지와 그렇지 않은 이미지, 총 두개의 이미지를 사용하고 있다. 각 이미지의 너비는 139px이다.

 

 

 이 두 이미지를 차례로 선언하여 겹치게 하고, div 요소의 너비(width)와 적당한 CSS로 처리한 것을 확인할 수 있다. 각 너비의 산출은 이미지 실제 너비 크기에 대비하여 총점 비율로 계산하면 쉽게 낼 수 있다

이 코드에서는 총 이미지 크기(139px) = 채운 이미지(124px) + 빈 이미지(15px)로 조절되었다