[리액트]웹페이지 화면 창을 줄이면 왜 이렇게 되나요;;

안녕하세요 지나가던 코린이 입니다. 전체 화면처럼 유지 하실려면 min-width를 사용하시면 될 것 같아요

반응형, responsive web 을 검색해보시면 관련 자료를 찾으실 수 있습니다~

flex-shrink: 0;랑 width 값 조절해보세요

이 문제는 대부분 CSS 스타일링 이슈로 보입니다. 웹 페이지의 화면 크기가 줄어들면서 레이아웃이 깨지는 현상은 반응형 웹 디자인이 제대로 적용되지 않았을 때 일반적으로 발생합니다. 1. CSS Media Queries: CSS 미디어 쿼리를 사용하면 특정 화면 크기에 따라 다른 스타일을 적용할 수 있습니다. 예를 들어, 화면 크기가 768px 미만일 경우 라디오 버튼이나 다른 요소의 크기를 조절하거나, 레이아웃을 변경할 수 있습니다. 2. CSS Flexbox or Grid: CSS Flexbox 또는 Grid를 사용하면 요소들이 화면 크기에 따라 동적으로 크기와 위치를 조정합니다. 이를 통해 레이아웃이 깨지는 것을 방지할 수 있습니다. 3. Responsive Design Libraries: 반응형 디자인을 지원하는 라이브러리를 사용하는 것도 한 가지 방법입니다. 예를 들어, React Bootstrap, Material-UI, Ant Design 등은 반응형 그리드 시스템을 제공합니다. 이러한 방법들을 사용하여 웹 페이지의 화면 크기를 줄였을 때도 레이아웃이 유지되도록 만들 수 있습니다. 하지만, 이러한 방법들을 적용하려면 웹 페이지의 CSS를 분석하고, 필요한 변경사항을 정확하게 파악해야 합니다. 이때 개발자 도구를 사용하여 웹 페이지의 요소를 검사하고 CSS를 디버깅하는 것이 도움이 될 수 있습니다.

1
2
3
4
#1
@media (max-width: 768px) {
  /* your styles here */
}