[html css] label 로 텍스트 클릭 시 체크박스 체크되도록 연결하기

 

회원가입등 정보 선택시 사용하는 체크박스를 

PC화면으로 보면 마우스를 쉽게 클릭 가능하지만 

 

모바일 화면으로 보면 아무래도 손가락으로 체크박스를 정확히

체크하기 힘들기 때문에 사용하면 좋은 기능!

 

체크박스 옆의 정보표기 텍스트를 선택&클릭해도 

체크박스에 체크혹은 체크 해지가 되도록 해주는 기능인데

label 태그와 input 태그를 동시에 사용하여 만들 수 있다.

 

input 태그 내에 id와 label 태그 내에 for 내용을 똑같이 넣어주면 되는데

 

<input type="checkbox" id="apple"><label for="apple">사과</label>

 

클릭 할 수 있는 텍스트를 label 태그로 감싸서 작성해 주면 된다.