웹밤바

  • 블로그홈
  • 지역로그
  • 태그로그
  • 미디어로그
  • 방명록

별점주기 1

javascript 없이 input radio 별점주기

의미론적으로 input radio로 별점 5개중 1개를 선택하는 마크업으로 구현 별 1개 .. 반복 ~~ 별5개 위 마크업을 기본으로 jquery 없이 css로만 구현 startRadio 의 after 가상태그에 기본 별의 테두리만 색이 채워지고 안쪽은 투명한 이미지 준비한다 이미지는 이것 하나만 사용된다 startRadio 는 안쪽 컨텐츠 개수만큼 커질수 있게 display:inline-block으로 설정 after에 별 높이값만큼 높이 설정후 width값은 지정해 주지 않는다 이렇게 별의 배경 세팅이 되었다. label에 별 width, height 값을 세팅 float:left로 일렬 나열, position:relative : 선택된 별 보다 낮은 개수는 채워질수 있는 기준점 설정 *핵심* star..

STUDY/CSS 2020.03.31
1
더보기
프로필사진

방문자수Total :

Today : Yesterday :
  • 분류 전체보기 (81)
    • 크롬 개발자도구 (2)
    • STUDY (75)
      • HTML (7)
      • CSS (20)
      • javascript (16)
      • jQuery (3)
      • jsp (2)
      • react (1)
      • vuejs (15)
      • debuging (3)
      • gulp (1)
      • 웹스퀘어 (2)
      • 코딩테스트 문제풀이 (2)
    • Useful Study (3)
    • daily (0)

Tag

gulp-pug, 별점주기, w2:textbox, placeholder잘라내기, 순차적증가, only css, 비표준브라우저, 배열에 배열넣기, donut graph, data-uri, placeholder여러줄, 배경처리, placeholder줄바꿈, 아래로, 2차원배열 해체, 숫자롤링, 주민번호뒷자리, placeholder붙여넣기, 꽉차게, 키보드올렸을때,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

Copyright © Kakao Corp. All rights reserved.

티스토리툴바