반응형웹 구현중 겹치고 깨지는 오류.. 코린이를 도와주세요 ㅠ(수정)

Question

위에 보시는것과 같이 너비가 480px이하가 되면 검색창이 깨지고 그래프와 공지사항이 겹쳐집니다 살펴보니 검색어 입력input창의 너비가 유동적으로 바뀌지 않아서 크기를 줄이면 부모div보다 커지니 생기는 문제였는데요그래프도 마찬가지였습니다. 그런데 style_mobile.css에서/* 기본 모바일 스타일: 600px 이하 화면 크기 */ &#64;media only screen and (max-width: 600px) {여기나style_main.css/* 모바일 뷰 */ &#64;media screen and (max-width: 480px) {여기에#SrchKey { width: 70%; /* 원하는 비율로 조절하세요. */ } #graph { width: 70%; /* 원하는 비율로 조절하세요. */ }두개를 넣으면 적용이 안됩니다. 왜그럴까요?? ㅠ아래는 제 css파일의 일부분만 가져와 보았습니다.style_mobile.css/* 기본 스타일 (모바일 우선) */ #body_wrap { margin: 0; padding: 0; width: 100%; text-align: center; } #header, #main { width: 100%; max-width: 980px; /* 최대 너비를 980px로 제한 */ margin: 0 auto; } #footer { padding: 0 0 20px 0; clear: both; width: 100%; } #header { display: flex; flex-wrap: wrap; /* 요소가 필요한 경우 다음 줄로 넘어갈 수 있게 설정 */ justify-content: space-between; align-items: center; } #header_logo { flex: 1; } #header_menu_top, #header_menu { display: flex; flex: 1; } #mobile-header-section { display: flex; justify-content: space-between; align-items: center; width: 100%; } #user-action { display: flex; justify-content: flex-end; /* 오른쪽 끝으로 정렬 */ } /* 기본 모바일 스타일: 600px 이하 화면 크기 */ &#64;media only screen and (max-width: 600px) { #main, #main_top, #main_center, #main_bottom, .main-center-center { width: 100%; } #main { height: 950px; } #header_logo { order: 1; /* 첫 번째로 배치 */ text-align: center; width: 100%; display: none; } #header_menu_top, #header_menu { display: none; /* 기본적으로 메뉴를 숨김 */ width: 100%; justify-content: center; } } /* 모바일 화면을 위한 스타일 (예: 최대 너비 768px) */ &#64;media only screen and (max-width: 768px) { #header { flex-direction: column; height: 70px; } #menuButton:checked &#43; #header_menu_top, #menuButton:checked &#43; #header_menu { display: flex; } #header_menu_top ul { justify-content: flex-end; } } .navbar { display: flex; justify-content: space-between; align-items: center; padding: 0 10px; } .navbar-toggler { margin-left: auto; } .navbar-brand { flex: 1; text-align: center; } #user-action { order: 3; } .nav-link { text-decoration: none; } .navbar-toggler-icon { background-image: url(&#34;data:image/svg&#43;xml,%3csvg xmlns&#61;'http://www.w3.org/2000/svg' viewBox&#61;'0 0 30 30'%3e%3cpath stroke&#61;'rgba(0, 0, 0, 1)' stroke-linecap&#61;'round' stroke-miterlimit&#61;'10' stroke-width&#61;'2' d&#61;'M4 7h22M4 15h22m-22 8h22'%3e%3c/path%3e%3c/svg%3e&#34;) !important; } /* Navbar 메뉴 아이템들의 스타일링 */ .navbar-nav .nav-item { width: 100%; border-bottom: 1px solid #e0e0e0; /* 아이템 간 구분을 위한 하단 테두리 */ padding: 5px 30px; /* 위/아래 패딩 추가 */ background: #fff; /* 배경색 지정 */ color: black; font-weight: bold; } /* 마지막 메뉴 아이템의 하단 테두리 제거 */ .navbar-nav .nav-item:last-child { border-bottom: none; } /* 메뉴 아이템에 마우스를 올렸을 때의 스타일 */ .navbar-nav .nav-item:hover { background-color: #e0e0e0; } /* 선택된 (active) 메뉴 아이템의 스타일 */ .navbar-nav .nav-item.active .nav-link { background-color: #d0d0d0; font-weight: bold; } style_main.css /* main_center 상세 레이아웃 &#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61; */ /* main-center-center 기본 레이아웃 */ .main-center-center { float: left; position: relative; width: 980px; height: 85px; margin: 0px; padding: 0px; } /* 검색창 상세 레이아웃 시작 &#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61; */ /* 기본 스타일 */ #TabmenuEDS01 { width: 100%; max-width: 464px; position: relative; z-index: 1; border: 2.5px solid red; background-color: white; margin: 0 auto; /* 가운데 정렬 */ } #TabmenuEDS01 .title { width: 100%; padding: 4px; box-sizing: border-box; /* padding 포함한 실제 크기 계산 */ display: flex; /* 플렉스 레이아웃 사용 */ justify-content: space-between; /* 내부 요소 간격 조정 */ } #TabmenuEDS01 .title li { flex: 1; /* 플렉스 아이템 확장 */ } #TabmenuEDS01 ul { padding: 5px 0 0 2px; box-sizing: border-box; } #TabmenuEDS01 .tab_bg { height: 44px; padding: 3px; box-sizing: border-box; display: flex; align-items: center; /* 세로 중앙 정렬 */ } #TabmenuEDS01 .tab_bg ul li input.search_btn { margin-left: auto; /* 왼쪽에 여백을 최대로 주어 오른쪽 정렬 효과 */ } /* 검색창 상세 레이아웃 시작 &#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61; */ /* main_center 상세 레이아웃 끝 &#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61; */ /* main_bottom 기본 레이아웃*/ #main_bottom { position: absolute; left: 0px; top: 385px; width: 980px; height: 180px; text-align: left; } /* main_bottom 상세 레이아웃 &#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61; */ /* main_bottom graph 상세 레이아웃 시작 &#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61; */ /* main_bottom graph 기본 레이아웃 */ #main_bottom #graph { position: absolute; top: 0px; left: 0px; width: 234px; height: 140px; } #main_bottom #graph h2 { position: absolute; top: 18px; left: -15px; margin: 0; padding: 0; } #main_bottom #graph select { position: absolute; top: 24.5px; right: 7px; width: 70px; margin: 0; padding: 0; } #main_bottom #graph #graph_img1 { position: absolute; top: 53px; left: 14px; margin: 0; padding: 0; } #main_bottom #graph #graph_img2 { position: absolute; top: 50px; left: 10px; margin: 0; padding: 0; } /* main_bottom graph 상세 레이아웃 끝 &#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61; */ /* 모바일 뷰 */ &#64;media screen and (max-width: 480px) { #main_bottom { top: auto; padding: 0 10px; } #main_bottom #graph h2 { top: 10px; left: 0; } #main_bottom #graph select { right: 10px; } #main_bottom #tabgroup ul.list, #main_bottom #tabgroup2 #listb01 ul { padding-left: 10px; width: 100%; } } /* main_bottom tabgroup2 상세 레이아웃 끝 &#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61; */ /* main 상세 레이아웃 끝 &#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61; */ /* main 끝 &#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61; */

m.koo.kr · Answer

어떤 상황인지는 이해가 되는데 ㅠㅠ 코드로 올려주신 게.. 너무 길어요 ㅠㅠ기능 별로? 잘라서 울려 주신다고 하시면? 그나마 읽어는 볼 텐데..지금 같은 정보라면? 누구도? 답 못 할 겁니다 ㅠㅠ 뭐.. 대충? 비유 하자면? 훈련소.. 갓 들어 온 신병한테? 소총 분해 조립 하라는 거나 마찬가지입니다 ㅋ

열일하는 네오 · Answer

css cascade 문제인거 같습니다#main_bottom #graph { width: 70%; /* 원하는 비율로 조절하세요. */ }

반응형웹 구현중 겹치고 깨지는 오류.. 코린이를 도와주세요 ㅠ(수정)

2개의 답변

Q&A 목록