[jQuery/html] 제이쿼리를 활용한 간단한 별점기능 리뷰 폼 작성

서문

물건을 사고 나서 리뷰를 작성하거나, 온라인으로 어떤 일이든 돈을 주고 나면 후기를 작성하는 경우가 많습니다.

이런 경우 후기에는 별점이 빠질 수 없습니다.

이런 별점 시스템을 통해서 사용자들은 좀더 쉽고 편하게 이 서비스의 품질을 알 수 있고, 내가 사용한 상품에 대해서도 상세한 후기를 적어 판매자와 이후 구매할 소비자들에게 좋은 영향을 끼칠 수 있습니다.

 

그럼 간단하게 이런 별점 시스템, 리뷰 폼을 작성하는 법을 알아보겠습니다.

 

 

728x90

 

---

 

별점 폼

 

 

오늘의 완성 결과물은 위와 같습니다. 시작합니다.

 

 

html 코드 작성

 

먼저 html 코드를 작성 해 보겠습니다.

 

<h2>리뷰작성 폼</h2>

<div class ="star_rating">
  <span class="star on" value="1"> </span>
  <span class="star" value="2"> </span>
  <span class="star" value="3"> </span>
  <span class="star" value="4"> </span>
  <span class="star" value="5"> </span>
</div>

<textarea class="star_box" placeholder="리뷰 내용을 작성해주세요." ></textarea>

<input type="submit" class="btn02" value="리뷰 등록"/>

 

html 코드는 정말 간단하게 적어보았습니다.

 

star_rating 클래스에는 별점을 표시해 줄 별의 이미지와 빈별의 이미지를 나타내줄 span태그를 사용했습니다.

이 span태그의 background에 별 이미지를 배치하여 별점에 따라서 빈 별과 꽉 찬 별의 이미지를 보여주도록 하겠습니다.

 

html 코드만 작성한 상태

 

 

현재 css 작업을 해주지 않아서 위의 코드로만 작성하면, 위와 같은 이미지로 멋없이 나오며, 별 이미지는 생성 되지 않습니다.

 

 

css 코드 작성

 

그럼 별을 출력하고 폼을 좀더 이쁘게 다듬기 위한 css 코드를 작성해 보겠습니다.

 

.star_rating {
  width: 100%; 
  box-sizing: border-box; 
  display: inline-flex; 
  float: left;
  flex-direction: row; 
  justify-content: flex-start;
}
.star_rating .star {
  width: 25px; 
  height: 25px; 
  margin-right: 10px;
  display: inline-block; 
  background: url('.png') no-repeat; 
  background-size: 100%; 
  box-sizing: border-box; 
}
.star_rating .star.on {
  width: 25px; 
  height: 25px;
  margin-right: 10px;
  display: inline-block; 
  background: url('.png') no-repeat;
  background-size: 100%; 
  box-sizing: border-box; 
}

.star_box {
  width: 400px;
  box-sizing: border-box;
  display: inline-block;
  margin: 15px 0;
  background: #F3F4F8;
  border: 0;
  border-radius: 10px;
  height: 100px;
  resize: none;
  padding: 15px;
  font-size: 13px;
  font-family: sans-serif;
}
.btn02 {
  display:block;
  width: 400px;
  font-weight: bold;
  border: 0;
  border-radius: 10px;
  max-height: 50px;
  padding: 15px 0;
  font-size: 1.1em;
  text-align: center;
  background:bisque;
}

 

css 코드는 위와 같습니다.

박스의 크기나 글자의 크기 색상 정도만 변경한 것이라서 어렵지 않습니다.

 

 

꽉찬 별

 

빈 별

 

background: url('별의 이미지 경로');

 

주의 할점은 해당 background에 이미지 경로를 잘 넣어 주어야 합니다.

 

여러분들에게 보여주기 위해서는 인터넷에 올려둔 경로를 사용해야 돼서 저는 인터넷 url을 사용했습니다.

자신만의 개발 환경이 있으신 분들은 자신의 개발 환경에 맞게 이미지 경로를 수정해 주시기 바랍니다.

 

이미지는 무료 이미지 구해서 링크 달아서 쓰기 어려워, 제가 가져온 이미지를 첨부해서 해당 이미지의 링크를 사용하도록 하겠습니다.

 

 

css까지 완료된 상태

 

다른 문제 없이 작성이 되었다면 위와 같은 이미지를 보실 수 있습니다.

하지만 jQuery를 작성하지 않아서 별을 클릭해도 아무런 동작을 하지 않습니다.

 

 

jQuery문 작성

 

마지막으로 jQuery문을 작성해 보겠습니다.

 

$('.star_rating > .star').click(function() {
  $(this).parent().children('span').removeClass('on');
  $(this).addClass('on').prevAll('span').addClass('on');
})

 

jQuery문이 가장 짧고 간단합니다.

 

쉽게 풀어서 설명하면 별의 이미지를 클릭했을 때 동작하는 제이쿼리입니다.

$(this). parent()는 클릭한 부모의 태그 즉 star_rating 클래스를 지칭합니다

 

그 뒤의. children('span')는 자식 태그 중 span태그를 지칭합니다.

즉, star_rating클래스의 안에 있는 span태그 전체를 의미합니다.

 

그 뒤의. removeClass('on')을 통해 해당하는 태그에 on 클래스를 지워줍니다.

마찬가지로 아래쪽 코드는 클릭한 별까지의 span태그 전체에 on 클래스를 추가하여 줍니다.

 

여기까지 하면 별점 폼의 외형은 완성되었습니다.

서버에 저장까지 하고 싶다면, form태그를 사용하고 form태그 안에 input태그의 hidden을 사용하여 별점이 클릭되었을 때 해당하는 값을 hidden값으로 전달하여 서버에서 처리해 주면 되겠습니다.

 

작업한 결과물

 

작업한 결과는 아래와 같습니다.

 

반응형

 

 

See the Pen Untitled by dnj01228 (@dnj01228) on CodePen.

 

위의 코드를 직접 만져보고 수정도 해보면서 자신에게 맞는 스타일로 변경해서 쓰시길 바랍니다.

크게 어려운 부분이 없어서 다들 따라 해 보실 수 있을 거라 생각이 듭니다.

 

저 같은 경우는 이후 php를 사용하여 받은 점수의 값과 리뷰의 내용을 db에 저장하여 저장된 db를 불러와서 리스트로 뿌려주어 리뷰 리스트까지 작성해 보았습니다.