미디어 쿼리 작동

Question

미디어쿼리 적용해 보려고 하는데 스크롤이 자꾸 움직여요ㅠㅠ 어떻게 해야할까요? http://seulg2.dothome.co.kr/prac/index01.html 웹페이지 구성은 똑같고 이미지랑 컬러만 다르게 해봤어요.

tmfrl97973295 · Answer

아 미디어쿼리에서 container 100% 하면 스크롤이 안보여야 하는데 안되니까 헤매다가 overflow hidden 하니까 안보이더라구요. 해결했어요!

webstoryboy · Answer

자꾸 움직인다는 말인 어떤건지??? 이해가 안되네요~ 자세히 설명 부탁드립니다.

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. 숑숑님, 미디어 쿼리 적용 시 스크롤이 움직이는 문제는 여러 원인에 의해 발생할 수 있습니다. 일반적으로 스크롤 문제는 뷰포트(viewport)의 크기에 따라 콘텐츠가 화면을 넘어서 확장될 때 발생할 수 있어요. 미디어 쿼리를 적용할 때, 다음 점들을 확인해 보시는 것이 좋겠습니다. 미디어 쿼리 범위 정확도 : 미디어 쿼리에서 정의한 범위가 너무 좁거나 너무 넓지 않은지 확인해 보세요. 적절한 뷰포트 크기를 설정하여 모바일, 태블릿, 데스크탑 등 다양한 화면에서도 원하는 대로 동작하게 할 수 있습니다. 컨테이너 너비 설정 : 페이지 내의 주요 컨테이너나 요소들이 뷰포트보다 너비가 넓지 않도록 설정이 필요합니다. % , vw 등을 사용하여 뷰포트의 크기에 따라 요소 너비가 조절되도록 할 수 있어요. 오버플로우 처리 : 각 요소들의 overflow 속성을 적절히 설정하여, 내용이 해당 요소나 뷰포트를 넘어서는 문제를 방지하세요. 필요한 경우 overflow-x 나 overflow-y 를 hidden 으로 설정하여 스크롤이 생기는 것을 방지할 수 있습니다. 위 사항들을 점검하며, CSS의 다른 속성들이 원하지 않는 스크롤을 유발하지 않도록 주의해주세요. 또한, 개발자 도구(브라우저에서 F12)를 활용하여 화면이 작동하는 범위에서 요소들이 어떻게 변화하는지 확인하며 문제의 원인을 좁혀나가는 것이 좋습니다. 비슷한 문제를 겪고 계신 다른 분들의 사례나 포럼 등에서도 해결 방법을 찾아보시길 권장드립니다. 때론 구체적인 코드 검토가 필요할 수 있으니, 문제가 계속될 경우 웹 개발 관련 커뮤니티나 Q&A 사이트에 구체적인 코드와 함께 상황을 공유하시는 것도 한 방법입니다. 도움이 되었기를 바랍니다. 웹 개발 공부에 더 궁금한 점이 있다면 언제든지 질문해주세요!