inflearn logo
강의

講義

知識共有

CSS FlexとGridを正しく習得する

Flex レスポンシブページ Step 3

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

304

voiddeveloper7723406

投稿した質問数 6

1

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

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

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

flex HTML/CSS

回答 3

1

studiomeal

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

0

voiddeveloper7723406

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

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

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

0

studiomeal

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

가로스크롤 과 margin: 0 -1rem 질문 있습니다

0

119

1

수업자료 다운로드

0

122

1

VS코드에 클래스 이름만 넣으셨는데 선생님이 뭘 누르면 바로 태그로 변하던데...

1

138

1

css grid repeat() 에서 autofit 사용시

0

183

1

menu 아이템 반응형 변경

0

102

1

질문은 아니고.. 오타 발견..

0

121

1

웹에서 위치?값

0

211

1

px, em ,rem을 어떻게 감각적으로 쓸 수 있을까요?

0

510

2

강의에 나오는 html 자동으로 만들어주는 편집기에 대해 알 수 있을까요?

0

309

1

flex-basis auto, 0 차이

0

710

2

padding 대신 gap을 쓰는게 더 편하지 않나요?

2

607

1

animation forwards 관련 질문

0

488

2

auto-fill, auto-fill이 적용되지 않는것 에 대해 질문드립니다.

0

559

1

flex-grow IE 질문드립니다.

0

624

2

Flex-grow가 적용되는 영역에 대해 질문드립니다.

0

437

1

Grid 수직정렬 문의

0

1075

1

card__item에 display:flex를 했을 때..

0

512

1

11vmin

0

417

1

header class 안에 div와 h2

0

576

1

grid 반응형 페이지 step1 질문있습니다~

0

282

1

반응형 페이지 step4 order

0

356

1

미디어쿼리 사이즈

1

286

1

figure + div

0

300

1

CSS Grid를 통한 정렬의 장점

0

247

1