[html]input type="checkbox" 인풋 체크박스 css디자인

<input type="checkbox" id="type1">체크박스 1번<label for="type1"></label>
<!--
일반적인 유형의 체크박스 
-->



<label><input type="checkbox">체크박스 2번</label>
<!--
변형시킨 체크박스
-->

일반적인 체크박스의 경우 체크박스를 클릭해야만 선택이 가능

→ 디자인상으로 체크박스를 작게 만들었을 경우 클릭이 힘들게 됨

→ input과 label이 떨어져있으므로 id와 for를 사용하여 연동을 시켜줘야함

 

 

2번의 체크박스의 경우 텍스트를 클릭해도 체크가 되지만 디자인적인 변형은 불가

→label이 input을 감싸고 있으므로 id와 for를 사용하지않아도됨

 

 

 

2번으로 쓰고 ::before와 ::after를 사용하면 편법 끝..

before는 체크전, after는 체크 후 position으로 위치 잡기