인프런 커뮤니티 질문&답변

큐딩님의 프로필 이미지
큐딩

작성한 질문수

CSS Flex와 Grid 제대로 익히기

Flex 반응형 페이지 Step 3

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

작성

·

236

1

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

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

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

답변 3

1

1분코딩님의 프로필 이미지
1분코딩
지식공유자

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

0

큐딩님의 프로필 이미지
큐딩
질문자

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

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

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

0

1분코딩님의 프로필 이미지
1분코딩
지식공유자

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

큐딩님의 프로필 이미지
큐딩

작성한 질문수

질문하기