[HTML] checkbox 옆의 글자 클릭으로도 선택할 수 있도록

HTML에서 <input type="checkbox">를 다른 옵션 없이 사용하면

 

클릭

 

위와 같이 만들 수 있다

 

기능은 작동하지만 실제로 배포를 할 때 사용자들에게 편리한 UX는 아니다

저 조그만 체크박스를 사용하는건 불편...

 

더 편리한 UX를 제공하기 위해서는 옆의 글자를 클릭했을 때 체크박스가 함께 클릭되도록 하면 좋다

 

클릭

 

코드 작성 예시 (label 사용)

<input type="checkbox" id="cleck" name="cleck">

<label for="cleck">클릭</label>

id 를 지정하고, label의 for 부분을 id와 동일하게 설정하면

체크박스 옆의 글자를 클릭했을 때 체크박스의 on/off를 변경할 수 있다!

 

실제 적용된 코드

<ol>
    <li>
    	<input id="yomigana" type="checkbox" 
         onChange={yomiganaHandle}/>
         <label for="yomigana">요미가나 숨기기</label>
    </li>
    <li>
    	<input id="alpabet" type="checkbox" 
        onChange={alpabetHandle}/>
        <label for="alpabet">알파벳 가이드 숨기기(준비중)</label>
    </li>
 </ol>

 

개발중인 타자연습의 메뉴모달

사이트에 완성이라는게 없겠지만 점점 배포해서 보여줄 정도의 웹이 되고 있다!