[11/28] 별점 구현 화면 만들기

조건

1. 마우스오버 형식일 것 👉🏻 더 편하니까

2. 아름다운 UI일 것 (ㅋㅋ)

3. 0.5점 구현이 가능할 것

 

 

 

1. 1점 단위의 별점 구현

👉🏻 radiobox를 사용

👉🏻 이모지를 label로 붙이고 박스를 보이지 않게 없앰

👉🏻 이모지를 컬러 없애고 호버 시 색상 부여

👉🏻 이모지를 클릭 시 호버의 색상 그대로 부여하고 유지

 

 

문제점

❓ html, css 끝내 놓고 나니 value를 다시 1~5 순서로 바꿔도 잘 작용한다 뭐지?

❓ 0.5점씩 구현하고 싶었는데 이 코드로는 안 될 것 같다 이모지를 가지고 온 형태라 쪼개기 힘들 듯...

 

html 코드

    <!-- 유저가 쓴 별점/코멘트가 없을 때 -->
    <form name="myform" id="myform" method="post" action="./save">
        <fieldset>
            <legend><b>유저닉네임</b> 님의 의견을 들려주세요</legend>
            <input type="radio" name="rating" value="5" id="rate1"><label for="rate1">⭐</label>
            <input type="radio" name="rating" value="4" id="rate2"><label for="rate2">⭐</label>
            <input type="radio" name="rating" value="3" id="rate3"><label for="rate3">⭐</label>
            <input type="radio" name="rating" value="2" id="rate4"><label for="rate4">⭐</label>
            <input type="radio" name="rating" value="1" id="rate5"><label for="rate5">⭐</label>
        </fieldset>
    </form>

 

 css 코드

👉🏻 포인트 색을 우리 웹 사이트의 색인 민트로 바꿔 보았다... 제법 귀엽다

/* 별점 css */
#myform fieldset{
    display: inline-block; /* 하위 별점 이미지들이 있는 영역만 자리를 차지함.*/
    border: 0; /* 필드셋 테두리 제거 */
}
#myform input[type=radio]{
    display: none; /* 라디오박스 감춤 */
}
#myform label{
    font-size: 3em; /* 이모지 크기 */
    color: transparent; /* 기존 이모지 컬러 제거 */
    text-shadow: 0 0 0 #f0f0f0; /* 새 이모지 색상 부여 */
}

#myform label:hover{
    text-shadow: 0 0 0 #3edad8; /* 마우스 호버 */
}
#myform label:hover ~ label{
    text-shadow: 0 0 0 #3edad8; /* 마우스 호버 뒤에오는 이모지들 */
}

#myform fieldset{
    display: inline-block; /* 하위 별점 이미지들이 있는 영역만 자리를 차지함.*/
    direction: rtl; /* 이모지 순서 반전 */
    border: 0; /* 필드셋 테두리 제거 */
}

#myform fieldset legend{
    text-align: left;
}

#myform input[type=radio]:checked ~ label{
    text-shadow: 0 0 0 #3edad8; /* 마우스 클릭 체크 */
}

https://blogpack.tistory.com/993

CSS만으로 별점 선택 기능 만들기. 형제 선택자(Sibling Selector) "~"를 활용한 별점 선택 기능 만들기.

 

 

 

2. 0.5점 단위의 별점 구현

👉🏻 radiobox를 사용

👉🏻 이모지를 label로 붙이고 박스를 보이지 않게 없앰

👉🏻 이모지를 컬러 없애고 호버 시 색상 부여

👉🏻 이모지를 클릭 시 호버의 색상 그대로 부여하고 유지

구조 자체는 1번 방법과 같으나 이모지가 아닌 png를 가지고 옴으로써 %별로 색을 채우는 느낌인 듯함

 

문제점

❓ 내가 배우지 않은 css 코드를 사용한다 낯설다...  수정 요청이 들어왔을 때 원하는 대로 건드릴 수 있을지 잘 모르겠다

❓ 아직 시간이 있으니 내가 더 잘 접근(?)할 수 있는 코드를 찾아봐야지...

 

html 코드

    <!-- 유저가 쓴 별점/코멘트가 없을 때: 별점 0.5 ver. -->
    <div class="starpoint_wrap">
        <div class="starpoint_box">
          <label for="starpoint_1" class="label_star" title="0.5"><span class="blind">0.5점</span></label>
          <label for="starpoint_2" class="label_star" title="1"><span class="blind">1점</span></label>
          <label for="starpoint_3" class="label_star" title="1.5"><span class="blind">1.5점</span></label>
          <label for="starpoint_4" class="label_star" title="2"><span class="blind">2점</span></label>
          <label for="starpoint_5" class="label_star" title="2.5"><span class="blind">2.5점</span></label>
          <label for="starpoint_6" class="label_star" title="3"><span class="blind">3점</span></label>
          <label for="starpoint_7" class="label_star" title="3.5"><span class="blind">3.5점</span></label>
          <label for="starpoint_8" class="label_star" title="4"><span class="blind">4점</span></label>
          <label for="starpoint_9" class="label_star" title="4.5"><span class="blind">4.5점</span></label>
          <label for="starpoint_10" class="label_star" title="5"><span class="blind">5점</span></label>
          <input type="radio" name="starpoint" id="starpoint_1" class="star_radio">
          <input type="radio" name="starpoint" id="starpoint_2" class="star_radio">
          <input type="radio" name="starpoint" id="starpoint_3" class="star_radio">
          <input type="radio" name="starpoint" id="starpoint_4" class="star_radio">
          <input type="radio" name="starpoint" id="starpoint_5" class="star_radio">
          <input type="radio" name="starpoint" id="starpoint_6" class="star_radio">
          <input type="radio" name="starpoint" id="starpoint_7" class="star_radio">
          <input type="radio" name="starpoint" id="starpoint_8" class="star_radio">
          <input type="radio" name="starpoint" id="starpoint_9" class="star_radio">
          <input type="radio" name="starpoint" id="starpoint_10" class="star_radio">
          <span class="starpoint_bg"></span>
        </div>
      </div>

 

css 코드

/* 별점 css (0.5점) */
.starpoint_wrap {
    display:inline-block;
}

.starpoint_box {
    position:relative;
    background:url(https://ido-archive.github.io/svc/etc/element/img/sp_star.png) 0 0 no-repeat;
    font-size:0;}
.starpoint_box .starpoint_bg {
    display:block;
    position:absolute;
    top:0;
    left:0;
    height:18px;
    background:url(https://ido-archive.github.io/svc/etc/element/img/sp_star.png) 0 -20px no-repeat;
    pointer-events:none;
}
.starpoint_box .label_star {
    display:inline-block;
    width:10px;
    height:18px;
    box-sizing:border-box;
}
.starpoint_box .star_radio {
    opacity:0;
    width:0;
    height:0;
    position:absolute;
}
.starpoint_box .star_radio:nth-of-type(1):hover ~ .starpoint_bg,
.starpoint_box .star_radio:nth-of-type(1):checked ~ .starpoint_bg{width:10%;}
.starpoint_box .star_radio:nth-of-type(2):hover ~ .starpoint_bg,
.starpoint_box .star_radio:nth-of-type(2):checked ~ .starpoint_bg{width:20%;}
.starpoint_box .star_radio:nth-of-type(3):hover ~ .starpoint_bg,
.starpoint_box .star_radio:nth-of-type(3):checked ~ .starpoint_bg{width:30%;}
.starpoint_box .star_radio:nth-of-type(4):hover ~ .starpoint_bg,
.starpoint_box .star_radio:nth-of-type(4):checked ~ .starpoint_bg{width:40%;}
.starpoint_box .star_radio:nth-of-type(5):hover ~ .starpoint_bg,
.starpoint_box .star_radio:nth-of-type(5):checked ~ .starpoint_bg{width:50%;}
.starpoint_box .star_radio:nth-of-type(6):hover ~ .starpoint_bg,
.starpoint_box .star_radio:nth-of-type(6):checked ~ .starpoint_bg{width:60%;}
.starpoint_box .star_radio:nth-of-type(7):hover ~ .starpoint_bg,
.starpoint_box .star_radio:nth-of-type(7):checked ~ .starpoint_bg{width:70%;}
.starpoint_box .star_radio:nth-of-type(8):hover ~ .starpoint_bg,
.starpoint_box .star_radio:nth-of-type(8):checked ~ .starpoint_bg{width:80%;}
.starpoint_box .star_radio:nth-of-type(9):hover ~ .starpoint_bg,
.starpoint_box .star_radio:nth-of-type(9):checked ~ .starpoint_bg{width:90%;}
.starpoint_box .star_radio:nth-of-type(10):hover ~ .starpoint_bg,
.starpoint_box .star_radio:nth-of-type(10):checked ~ .starpoint_bg{width:100%;}

.blind{
    position : absolute;
    clip : rect(0 0 0 0);
    margin : -1px;
    width : 1px;
    height : 1px;
    overflow :hidden;
}

https://velog.io/@hsecode/%EB%B3%84%EC%A0%90-%EB%A7%8C%EB%93%A4%EA%B8%B0

HTML, CSS만으로 마우스오버 별점 만들기⭐️

 

 

 

 

3. 0.5점 별점

👉🏻 올린 사람의 별이 없어졌다 

👉🏻 코드 해석 중...

👉🏻 별 하나를 왼쪽/오른쪽 나눠서 주기

 

 

 

문제점

❓ png는 기존 1의 방법처럼 색을 제거할 수가 없음(color: transparent; /* 기존 이모지 컬러 제거 */) => 브랜드 포인트색을 못 살림

 

 

HTML코드

<div class="star-box">
        <span class="star star_left"></span>
        <span class="star star_right"></span>
      
        <span class="star star_left"></span>
        <span class="star star_right"></span>
      
        <span class="star star_left"></span>
        <span class="star star_right"></span>
      
       <span class="star star_left"></span>
       <span class="star star_right"></span>
      
       <span class="star star_left"></span>
       <span class="star star_right"></span>
      </div>
      

      <!-- 별이 클릭되면 on 클래스를 없애라 i가 0에서  -->
      <script>
            $(".star").on('click',function(){

                // console.log($(".star"));
                // console.log($(this));

                var idx = $(this).index();
                $(".star").removeClass("on");
                    for(var i=0; i<=idx; i++){
                        $(".star").eq(i).addClass("on");
                }
            });
      </script>

 

js코드

      <script>
            $(".star").on('click',function(){
                var idx = $(this).index();
                $(".star").removeClass("on");
                    for(var i=0; i<=idx; i++){
                        $(".star").eq(i).addClass("on");
                }
            });
      </script>

 

// 클릭한 요소의 형제들 중 자신이 몇 번째인지 확인
$(this).index();

 

script 해석

👉🏻 별이 클릭되면 모든 on 클래스를 없애라

👉🏻 i가 0에서 클릭한 별까지만 on 클래스를 추가해라

 

on 클래스 👉🏻 클릭된 별에 줄 속성

 

css 코드

테스트

👉🏻 https://cdn-icons-png.flaticon.com/512/2107/2107957.png 노란별

👉🏻 https://cdn-icons-png.flaticon.com/512/3303/3303088.png 까망별

*{margin:0; padding:0;}
.star{
  display:inline-block;
  width: 30px;
  height: 60px;
  cursor: pointer;
}
.star_left{
  background: url(https://cdn-icons-png.flaticon.com/512/3303/3303088.png) no-repeat 0 0; 
  background-size: 60px; 
  margin-right: -3px;
}
.star_right{
  background: url(https://cdn-icons-png.flaticon.com/512/3303/3303088.png) no-repeat -30px 0; 
  background-size: 60px; 
  margin-left: -3px;
}
.star.on{
  background-image: url();
}

https://gahyun-web-diary.tistory.com/157

[CSS]별점효과 구현하기

 

 

 

4. 0.5점 별점 구현

👉🏻 input type="range"

👉🏻 텍스트 별 ★과 합쳐서 클릭 및 드래그로 구현

 

 

html코드

<span class="star">
  ★★★★★
  <span>★★★★★</span>
  <input type="range" oninput="drawStar(this)" value="1" step="1" min="0" max="10">
</span>

 

css코드

.star {
    position: relative;
    font-size: 2rem;
    color: #ddd;
  }
  
  .star input {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    opacity: 0;
    cursor: pointer;
  }
  
  .star span {
    width: 0;
    position: absolute; 
    left: 0;
    color: #3edad8;
    overflow: hidden;
    pointer-events: none;
  }

 

js코드

익명 함수를 화살표 함수로도 쓸 수 있음

const drawStar = (target) => { }

👉🏻 const drawStar = function (target) { } 와 같음

 

JavaScript es6 문법 - 백틱 사용법
        var bar = 'a';
        console.log('bar는' + bar + "입니다.")
       👉🏻  console.log(`bar는 ${bar} 입니다`) 와 같음

 

<script>
         const drawStar = function (target) {
        document.querySelector(`.star span`).style.width = `${target.value * 10}%`;
    }
    </script>

    <script>
         // const drawStar = (target) => { // 얘는
        const drawStar = function (target) { // 얘와 같고
        // document.querySelector(`.star span`).style.width = `${target.value * 10}%`; // 얘는
        $(".star span").css({ width: `${target.value * 10}%` }); // 얘와 같다
        }
    </script>