label 태그 활용하여 checkbox 만들기

아래와 같은 체크박스를 만들기 위해서 처음엔 <span> 을 이용하였다

물론 이렇게 해도 문제는 없지만 안 그래도 폰트 사이즈도 작은데 네모박스만 선택해야 체크가 되는 것보다는

해당되는 텍스트를 클릭해도 체크가 되게 만들고 싶었다. 

처음으로 떠오른 생각은 '클릭 이벤트' 였는데 분명 그것보다 단순한 방법이 있었던 것 같은 생각이 든다. 

 

 

지금 나에게 필요한 건 구글

 

스택 오버플로우에서 나와 비슷한 궁금증이 있는 글을 발견!

 

답을 보자마자  맞다! 나 <label> 배웠었지 하고 떠올랐다

이래서 Output 이 중요한 것 같다. 백날 머릿속에 이것저것 집어 넣으면 뭐하나 써먹지를 못하는데ㅠㅠ

 

 

무료 강의에서든 책에서든 분명히 나는 <label> 태그에 대해 배웠지만 직접 사용을 해본 적이 없다보니 처음엔 어떻게 해야할 지 몰라서 머리가 백지상태가 되었다

(코딩은 뭐랄까...피아노를 배우는 것과 비슷한 느낌이다. 한 번 쳐봤다고 해서 완주할 수 있는게 아닌.. 꾸준한 연습이 필요한 것 같다)

 

label for 과 id 를 사용하니 글씨를 클릭해도 체크가 표시된다

 

MDN 사이트를 살펴보면 for 과 id 없이도 사용이 가능하다

그런데 나는 나중에 checkbox 에 hover 기능을 추가할 예정이라 아무래도 id 가 있는 것이 더 좋을 것 같아 그대로 냅두려고 한다