[HTML,CSS] 별점 만들기, 소스

[HTML,CSS] 별점 만들기

안녕하세요. 오늘은 html와 css 만으로 별점기능 구현하는 소스에 대해 알아보겠습니다.

우선, 별점 선택이 안되는 동적인 별점 css입니다.

배경이되는 div에 회색 bg 이미지를 깔아준 뒤, span에 별점이 표시되는 빨간색 이미지를 넣어주면 됩니다.

[html]

<div class="rate">
        <span style="width: 50%"></span>
    </div>

[CSS]

.rate{background: url(https://aldo814.github.io/jobcloud/html/images/user/star_bg02.png) no-repeat;width: 121px;height: 20px;position: relative;}
.rate span{position: absolute;background: url(https://aldo814.github.io/jobcloud/html/images/user/star02.png);width: auto;height: 20px;}

부모영역인 rate에 position relative를 넣어주고, 자식인 span에 absolute를 넣어줍니다.

span에 width값을 주어 별점을 표시해줍니다.

 

 

아래는 input radio버튼을 사용한 별점기능입니다.