브라우저 화면을 줄이면 요소 밀리면서 겹치는 현상

Question

브라우저 크기를 전체 화면으로 했을 때는 요소 배치에 문제가 없는데브라우저를 크기를 줄이면 안에 있던 요소들이 한쪽으로 쏠리면서 겹쳐집니다..그래서 전체 화면일 때 오른쪽에 있던 요소가, 반으로 줄어든 창에서도 보여요.원래 줄어든 창에서는 가로 스크롤로 움직이지 않는 이상 보이지 않아야 하잖아요..!왜 이런 문제가 발생한 거고 해결방법 아시는 분 있으신가요???제가 짐작 가는 건 css에 적용한 display: flex 또는 요소들의 간격을 %로 설정한 건데 이게 문제가 된 걸까요?도움 주시면 감사드리겠습니다..

킹포링 (INTP) · Accepted Answer

화면 크기가 줄어들 때 요소들이 겹치는 문제는 보통 레이아웃이 반응형으로 제작되어있지 않아서 발생할 수 있습니다.보통 이 문제를 해결하기 위해서는 미디어쿼리(Media Query)를 이용하여, 화면 크기에 따라 다른 스타일을 적용하는 것이 좋습니다.예를 들어, 가로 스크롤이 생기지 않도록 하려면, 다음과 같은 미디어쿼리를 적용할 수 있습니다.&#64;media screen and (max-width: 768px) { /* 화면의 가로 크기가 768px 이하일 때 적용될 스타일을 작성합니다. */ body { overflow-x: hidden; /* 가로 스크롤바를 숨깁니다. */ } } 또한, display: flex를 사용할 때 요소 간격을 %로 설정하면, 화면 크기가 바뀔 때마다 요소들이 적절하게 자리를 잡지 못할 수 있습니다. 이 경우에는 보통 flex-grow, flex-shrink, flex-basis와 같은 속성을 이용하여 요소들의 크기와 간격을 조절합니다.만약 미디어쿼리를 적용했음에도 문제가 해결되지 않는다면, 요소들의 스타일이나 레이아웃에 문제가 있는 것이므로, 개발자 도구를 이용하여 스타일과 레이아웃을 검토해 보시는 것이 좋습니다.

rezigrene · Answer

가장 바깥쪽 요소의 css에min-width 같은걸 추가하시면 되겠네요

브라우저 화면을 줄이면 요소 밀리면서 겹치는 현상

2개의 답변

#position 목록