가로스크롤

Question

■ 질문 남기실 때 꼭! 참고해주세요. - 먼저 유사한 질문이 있었는지 검색해주세요. - 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다. - HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요. - 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.         선생님 안녕하세요 pc, 모바일 반응형은 대응이 됐는데, 웹사이트 창을 1250px정도로만 줄여도 가로스크롤이 발생을 해서요ㅠㅠ   혹시 이런 경우에는, div와 이미지 크기를 80%같은 수치로 줄여야하는건지? 아니면 overflow로 대응을 해야하는건지? 궁금합니다.   혹시 몰라서 제가 임의로 img에 max-width:100% height:auto로 해놨는데   이미지가 안넘어가고 가로스크롤이 발생해서요ㅠㅠ 답변주시면 감사합니다.     다른 질문들을 확인해보니, @media (min-width: 768px) and (max-width: 1024px) 이런식으로 대응하라고 하셨는데 폰트사이즈와 이미지를 줄여야하는건가요?ㅠㅠㅠ 아니면 flex구조를 컬럼으로 바꿔야할까요?

코딩웍스(Coding Works) · Answer

컨텐츠 영역에 대한 미디어쿼리 구간을 만들지 않아서 그렇습니다. 예시로 컨텐츠 영역이 1280px이라면 브라우저가 1280픽셀 이하로 내려가면 가로스크롤이 생기기 시작합니다. section { width: 1280px } 이런 부분을 방지하시려면 아래처럼 미디어 쿼리 구간을 하나 더 만들어 주시면 됩니다. 또는 section의 너비를 처음부터 max-width: 1280px 로 하시는 것도 방법입니다. @media (max-width: 1280px) { section { width: 100% } }