별점을 소수점으로 채우기

안녕하세요~~~ㅋㅋㅋㅋㅋㅋㅋ

#별점, #별점 채우기, #별 css

🤩 🤩 🤩 🤩 🤩 🤩 🤩 

오늘 할 일은 바로 이겁니다.ㅋㅋㅋㅋㅋ

별이.. 차오른다..

원래 기존 별점은 이랬습니다ㅋㅋㅋ

아 그냥 4.7이면 대충 반올림해서 별 5개 칠하자...

하지만 양심에 찔리는 기분이 들어서 별을 정확하게 채워보기로 했습니다.

방법은 간단합니다.

1. 배경 별: (전체) 별 5개가 꽉찰만한 width로 회색으로 채웁니다. 잘 재보세요.

2. 색깔 별: (점수) 배경 별의 넓이*(점수/총점)을 width로 합니다.

1,2는 겹쳐야 하므로 position:absolute로 해줍니다.

여기서 색깔별은 width를 벗어나는 경우 안보이게 감춰야하고, 

overflow:hidden;

보통 글씨는 꽉차면 다음줄로 넘어가므로 다음줄로 넘어가지 않게 css를 설정해줘야합니다.  

white-space:nowrap;

white-space는 원래 기본값이 normal입니다. nomal은 필요한 경우 줄바꿈 됩니다.

nowrap은 br 태그가 나오기 전까지 다음행으로 절대 넘어가지 않ㅡㅅ

(별 아이콘은 font-awesome에서 가져왔습니다)

https://fontawesome.com/icons/star?style=solid

완성된 별 채우기 코드입니다. 

ㅋㅋㅋㅋㅋㅋㅋ index.pug

// 배경 별

div(style='position:absolute; width:90px; overflow:hidden; color:#cdcdcd;')

i.fas.fa-star

i.fas.fa-star

i.fas.fa-star

i.fas.fa-star

i.fas.fa-star

// 진짜 별

div(style='position:absolute; width:'+(4.7/5*90)+'px; overflow:hidden; white-space:nowrap; color:blue;')

i.fas.fa-star

i.fas.fa-star

i.fas.fa-star

i.fas.fa-star

i.fas.fa-star

흠.....  .......................

저 반응형도 해야하는데

반응형으로 작은화면에서는 별을 작게 만들고 싶으니까, 퍼센트로 합시다. 

ㅋㅋㅋ

index.pug

div.stars(title='평점' style='position:relative;')

                                div.stars-background(style='position:absolute; width:100%; overflow:hidden; color:#cdcdcd;')

                              i.fas.fa-star

                              i.fas.fa-star

                              i.fas.fa-star

                              i.fas.fa-star

                              i.fas.fa-star

                                div.stars-real(style='position:absolute; width:'+(4.7/5)*100+'%; overflow:hidden; white-space:nowrap;')

                              i.fas.fa-star

                              i.fas.fa-star

                              i.fas.fa-star

                              i.fas.fa-star

                              i.fas.fa-star

css에서는 width와 font-size를 정해주면 되겠쬬? 

style.css

.stars{

font-size: 13px;

width: 75px; /* 2px더한게 별하나 넓이인듯 */

}

끗