스키마마크업1 CSS 별점 위젯 (HTML 구조, 형제 선택자, 반 별 구현) 리뷰 글을 꾸준히 올리다 보면 한 번쯤 이런 생각이 드실 겁니다. "별점 하나 넣고 싶은데, 플러그인 쓰기엔 너무 무겁고 스타일은 또 따로 놀고." 저도 그 고민을 꽤 오래 했습니다. 결국 JavaScript 없이 CSS만으로 별점 위젯을 직접 만들어 붙였고, 그 과정에서 배운 것들을 정리해 봤습니다.HTML 구조: 왜 별을 거꾸로 써야 할까요처음 이 방법을 접했을 때 가장 당황했던 부분이 바로 HTML 마크업 구조였습니다. 별을 5번부터 1번 순서로 역순 배치한다는 게 직관과 정반대라서, 저도 처음엔 "이게 맞나?" 싶어 순서를 몇 번이나 바꿔가며 테스트했습니다.핵심은 CSS의 일반 형제 결합자(General Sibling Combinator, ~)에 있습니다. 여기서 ~ 선택자란 같은 부모를 가진 형.. 2026. 4. 27. 이전 1 다음
