연결된 라벨을 선택하면 체크박스도 함께 선택되는 원리를 이용한 것이다
1. 기본 체크박스를 숨긴다
2. 라벨에 박스 콘텐츠를 추가한다
3. 체크된 경우 박스의 스타일을 변경한다
체크 이모지를 활용하여 박스에 표시되도록 했다. 그로 인한 문제점은
- 박스 사이즈가 변경되면 font-size 및 line-height 속성을 그에 맞춰 변경해야한다.
- 환경에 따라 이모지의 모양이 다르게 보일 것이다. 이미지를 사용하면 모든 환경에서 동일한 체크모양이 될 것..
이미지나 이모지를 사용하지 않고 div를 기울여서 체크모양으로 만드는 방법도 있다.
1. 기본 체크박스를 숨긴다
2. 체크박스를 생성한다 위치는 absolute로 지정한다
3. 체크박스 위에 표시될 체크마크를 생성한다 위치는 absolute로 지정한다
4. 체크마크를 평소에는 숨기다가 체크상태가 되면 보여준다
참고자료
