inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

CSS Flex와 Grid 제대로 익히기

Flex 반응형 페이지 Step 3

스크롤바 / modal 표시 위치 질문

251

김부자

작성한 질문수 4

0

1. 브라우저의 너비를 조정하여 card-list 가 2열로 나타날 때 1분코딩님의 브라우저엔 수직 스크롤바가 안 생기던데, 이건 어떻게 하는 건가요? 제가 따라한거는 card-list 가 열이 몇개든 다 스크롤바가 생깁니다.

2. modal-switch 를 체크하면 modal 이 디스플레이되는데, 제 것은 화면 하단으로 내려가서 디스플레이가 됩니다. 아마 

<div class="modal"> 이 구문이 body 의 맨마지막에 위치해 있어서 그런거 같은데, 1분코딩님 화면을 보면 현재 화면위치에서 modal 이 디스플레이되거든요. 어떤 차이가 있어서 그런지, 제가 뭘 빼먹은게 있는지 궁금합니다.

flex HTML/CSS

답변 2

0

김부자

빠른답변 감사합니다~!

0

1분코딩

1.
혹시 다운로드 받으신 완성본에서도 그런 현상이 나타나는지 한번 봐주시겠어요?
그렇지 않다면 뭔가 코드에 다른 차이가 있다는 이야기인데..
.card-list를 감싸는 컨테이너인 .primary에 overflow-x: hidden;을 적용해주시면 아마 가로 스크롤바는 없어질 것으로 생각됩니다.

Flex UI 만들기 => Flex UI #7 카드 리스트
이 부분을 바로 어제 영상 업데이트를 했는데요, 16:00 지점부터 한번 다시 봐주시겠어요?
카드 리스트를 단독으로 사용하는 경우 가로 스크롤바가 생기는 문제를 코드에는 수정을 해두었는데 영상은 어제 업데이트 했습니다^^;

2.
https://www.inflearn.com/questions/52374
이 질문의 답변을 참고하시면 될 것 같습니다 :)
이 부분도 코드만 수정되어있고 영상에 반영이 되어있지 않아서
조금 전에 영상도 업데이트 했습니다.
Flex로 반응형 페이지 만들기 => Flex 반응형 페이지 Step 3
이 영상의 11:40 지점입니다.

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

0

117

1

수업자료 다운로드

0

122

1

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

1

136

1

css grid repeat() 에서 autofit 사용시

0

180

1

menu 아이템 반응형 변경

0

102

1

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

0

120

1

웹에서 위치?값

0

211

1

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

0

509

2

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

0

309

1

flex-basis auto, 0 차이

0

707

2

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

2

606

1

animation forwards 관련 질문

0

488

2

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

0

559

1

flex-grow IE 질문드립니다.

0

623

2

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

0

436

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

281

1

반응형 페이지 step4 order

0

354

1

미디어쿼리 사이즈

1

285

1

figure + div

0

297

1

CSS Grid를 통한 정렬의 장점

0

244

1