input checkbox CSS 설정 방법

저는 지금껏 input checkbox 체크 설정을 jQuery로 설정을 해왔는데

 

이번에 사수분이 input checkbox 는 CSS로 설정하는게 낫다고 해주셔서 한번 정리해봤습니다.

 

(너무 기초적인 부분을 모르고 코딩했다는 사실이 부끄럽네요 ㅠㅠ )

 

 

 

체크 박스의 체크 이미지는 폰트어썸의 아이콘을 사용하여 폰트어썸 CDN 을 첨부해줬어요.

 

HTML에서 태그를 짤 때, input의 ID 이름과 label의 for 이름을 똑같이 연동 시켜줘야 기능이 작동하니 잊지마세요.

 

 

 

input 태그는 안보이게 숨기고

 

label:before 가상객체로 CSS를 꾸며주는 방식이에요

 

input:checked + label:before 를 사용하면 CSS에서도 체크박스가 클릭된 설정이 가능합니다.

 

 

이렇게 input checkbox CSS 설정 방법을 알아봤습니다 ^^

 

감사합니다

 

끝