- jQuery를 이용한 별점효과 주기
보편적으로 점수를 주기 위해 간단히 표기하는 별점을 플러그인이 아닌 jQuery를 사용하여 간단하게 표현할 수 있는 하나의 방법입니다.
1. HTML의 구조는 <div>와 <span> 태그로만 이루어져 있으나, <span> 태그가 아닌 <a>나 다른 태그를 사용하여도 무방합니다.
2. 예제처럼 각 span에 특수문자(★)를 넣어 사용하시거나 백그라운드에 이미지를 깔고 background-position 으로 제어가 가능합니다.
위 예제의 경우는 CSS에서 .starR.on에 text-shadow로 색상을 변환하여 사용하였습니다.
HTML과 같이 CSS에는 큰 힘을 들이지 않았습니다. (방법이야 무궁무진하니, 하나의 예시로만 봐주세요)
해당 <span>태그를 클릭 시, 부모를 한 번 타고 올라가서 다른 <span>에 class="on"을 add/remove 하면서 변화를 줍니다.
-
위와 같이 작성하신 후 결과물을 보시면 아래와 같습니다.
가장 후에 선택된 부분의 별까지 색상이 입혀지는것을 볼 수 있습니다.