강의

멘토링

커뮤니티

Inflearn Community Q&A

voiddeveloper7723406's profile image
voiddeveloper7723406

asked

Learn CSS Flex and Grid Properly

Flex Responsive Page Step 3

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

Written on

·

293

1

11분 38초
ui-page.css 코드중에

#modal-switch, label[for="modal-switch"] span 
을 만든 이유가 뭔가요?

그냥 input태그에 이벤트리스너만 달아줘도 동작할 것 같은데..
어떤 이유가 있는건지 궁금합니다!

flexHTML/CSS

Answer 3

1

studiomeal님의 프로필 이미지
studiomeal
Instructor

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

0

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

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

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

0

studiomeal님의 프로필 이미지
studiomeal
Instructor

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

voiddeveloper7723406's profile image
voiddeveloper7723406

asked

Ask a question