[Tailwind CSS] 별점 평가

찐새·2022년 6월 27일
1

CSS3

목록 보기
7/12
post-thumbnail

Tailwind CSS를 이용해서 별점 평가하는 코드를 짰다. ReactNext.js를 이용한다면 forhtmlFor로, classclassName으로 변경하자.

peer는 바로 뒤 형제 요소에 CSS를 입힐 때 사용한다. 셀렉터에서 ~의 역할이다. 다른 별점 선택 시 체크가 풀리도록 상위 label을 설정했다.

이유는 모르겠지만, peer가 맨 뒤 요소부터 적용되어서 reverse를 통해 순서를 뒤바꿨다. 때문에 문서 내 값은 내림차순이다. 하지만 클라이언트 화면에서는 정상적인 오름차순이다.


참고
TailwindCSS Docs - peer-{modifier}

profile
프론트엔드 개발자가 되고 싶다

0개의 댓글