11분 38초쯤 코드에 질문있습니다.

label을 따로 쓰는 이유는,
아무래도 input checkbox보다는 디자인상으로 조작이 더 자유롭기때문에 쓰는 이유도 있고요,
웹 접근성 측면에서도 써주시는 것이 좋습니다^^(스크린리더에서 읽어주는 기능 등)

죄송합니다. 제가 질문을 잘못해서 제 궁금한 포인트를 잘못전달 한 것 같습니다.

<input type="checkbox" id="modal-switch">
<label for="modal-switch">
   <span>modal 열고 닫기</span>
</label>

인터랙션과 상관없이 label, span 태그가 왜 있는지 궁금했던거였습니다.
input 태그만 있어도 될 것 같아서요! 
 구현상에 다른 이유가 있는건지가 궁금합니다.

이 예제에서는 자바스크립트 대신에 CSS만 이용해서 인터랙션 처리를 하고 있습니다.
강의를 보시면 해당 내용 설명이 자세히 나오니 보시면 될 것 같아요.
CSS 동작에 이해가 안되시는 부분이 있으면 말씀해 주세요~