채택완료
카카오 api 사용해서 지도를 표시하는 경우 브라우저 특정 px 이하에서 생기는 문제.
PC화면에서 지도가 잘 표시되는데, 특정 px 이하(모바일에서 사용하는 것처럼 브라우저를 줄여보면) 지도가 사라져요.
다시 브라우저 가로 폭을 넓히면 지도가 나타납니다.
특이한 점은 지도가 사라진 div 안에 kakako map 이라는 패턴은 배경지처럼 남아있어요.
물론 모바일 기기에서는 애초에 특정 픽셀보다 작으니 아예 보이지 않고,
태블릿의 경우 가로로 보면 특정픽셀 이상이 되니까 보이고, 세로로 돌려보면 안보여요.
혹시 이런 이슈? 또는 제가 코딩 실수? 어떻게 해결하면 좋을까요?
참고로 특정 픽셀의 기준은 head 영역의 메뉴가 모바일 스타일로 바뀌는 반응형이에요.
|
답변 2개 / 댓글 2개
채택된 답변
+20 포인트
퇴사는지능순
미디어 쿼리 설계가 잘못되어다라고 봐지네요.
중복되어서 처리하고잇지는않는지 css는 우선을 중심을 가지게 됩니다. 이를 올바르다고생각한다면 인포텐 를 넣어서 테스트 해보시기 바랍니다.
그리고 참고로 1024이하의 max-width 를 가진다라는 점은 테블릿의 중심으로 설계를 하는것이지 모바일 중심이 아니라는것입니다. 이또한 올바르게 생각하는데로 처리되어잇는지 체크해보시기 바랍니다.
중복되어서 처리하고잇지는않는지 css는 우선을 중심을 가지게 됩니다. 이를 올바르다고생각한다면 인포텐 를 넣어서 테스트 해보시기 바랍니다.
그리고 참고로 1024이하의 max-width 를 가진다라는 점은 테블릿의 중심으로 설계를 하는것이지 모바일 중심이 아니라는것입니다. 이또한 올바르게 생각하는데로 처리되어잇는지 체크해보시기 바랍니다.
답변에 대한 댓글 2개
버즈메이커
2026-05-20 (수) 11:15:12
2026-05-20 (수) 12:30:04
진짜 ... 안될때는 노가다가 답이에요.
인공지능들도 못 찾아줌 ㅠㅠ
img: {
max-width: 100%;
height: auto;
}
지도도 이미지라는 것을 간과했음 ㅠㅜ
피 같은 내시간 돌리도...
답변을 작성하려면 로그인이 필요합니다.
사라지는 id나 class 명을 미디어쿼리에서 찾으신다음 display:none 처리 되어있는지 확인후 제거하시면됩니다!