카카오맵 이미지나 텍스트 크기가 infowindow를 벗어납니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
어떻게 수정해야 할까요? 선생님처럼 정제되어서 보이지가 않습니다.
항상 답변 해주셔서 감사합니다. 😊
인포윈도우 설정
.infowindow {
width:25rem;
border: 1px solid black;
border-radius: 5px;
background-color: white;
}
.infowindow-img-container {
width: 100%;
overflow: hidden;
}
.infowindow-img {
width: 180px;
}
.infowindow-title{
font-size: 2rem;
}
.infowindow-address {
font-size: 1.3rem;
}
.infowindow.btn {
font-size: 20px;
}답변 2
0
소스 확인해보니 '인포윈도우 설정'에 주석처리가 안되어 있네요.
따라서 infowindow 클래스가 적용되지 않아서 생기는 문제입니다.
.infowindow-img에 max-width:100%로 설정해주시면 됩니다.
또한 이미지 소스의 원본 크기가 들쭉날쭉이라 레이아웃이 조금 부자연스러워보이는 것은 사실이네요.
이럴때는 자르거나, 백그라운드 이미지로 처리하거나, 일부러 작게 표시해서 가운데로 놓는 방법 등.. 다양한 트릭이 있습니다.
https://multifidus.tistory.com/182
여기 참고해보시면 좋을 것 같네요.
감사합니다.
0
<div class="infowindow">
<div class="infowindow-img-container">
<img
src="https://img.youtube.com/vi/${finUrl}/mqdefault.jpg"
class="infowindow-img"
/>
</div>
<div class="infowindow-body">
<h5 class="infowindow-title">${data.title}</h5>
<p class="infowindow-address">${data.address}</p>
<a href="${data.videoUrl}" class="infowindow-btn" target="_blank">영상이동</a>
</div>
</div>
코드 구조를 보시면
.infowindow (25rem)
.infowindow-img-container (100%)
.infowindow-img (180px)
.infowindow-body
기본적으로 자식 태그의 너비는 부모 태그의 영향을 받습니다.
하지만, 자식 태그에 180px이라는 절대 크기를 선언하면 그것만의 유일한 너비를 설정해버리게 됩니다.
만약 부모 태그가 180px보다 작다면 자식으로 인해 전체 UI가 무너지게 됩니다.
따라서 .infowindow-img에 max-width: 100%; 또는 width: 100% 으로 해서
이미지가 부모 태그를 넘지 못하도록 설정해주시는 것이 좋을 것 같습니다.
감사합니다.
0
선생님 말씀대로 변경했는데도 이미지 크기가 창을 벗어나거나 너무 크게 나옵니다...
아마 저는 유튜브 주소를 이용하지 않고 이미지주소를 이용해 소스를 가져와서 그런가봅니다..
어떻게 조정해야 할까요?
live server가 안 떠요..
0
99
1
카카오맵 API 가 안뜹니다...
0
759
2
카카오맵API 지도 관련
0
184
1
Putty에서 nginx를 vi로 수정할때 오류
0
304
3
mysql과 선생님의 깃허브 코드연결
0
198
1
nodemon 실행오류
0
244
2
Azure 서버로 구축하고 작업하는 방법 알 수 있을까요?
0
281
2
css 적용 중 강의대로 적용되지 않아 질문 드립니다
0
362
2
강의를 잘 활용하는 법 추천 부탁드립니다.
0
293
1
MysqlWorkbench 접속문제
0
313
1
전체 핀이 조회되지 않습니다.
0
270
1
빅데이터 처리관련
1
291
1
섹션5의 2번째 강의 질문-setMap 비동기 처리 이유
0
245
1
PM2 EADDRINUSE 에러
0
416
2
인스턴스 중단 후 재시작
0
292
1
이미지 부분에 cctv 영상을 넣고 싶은데요.
0
596
2
노션 링크가 어디있나요 ?
1
318
1
axios 이후 마커 오류
0
295
0
service nginx restart 에러
0
722
1
섹션10 배포하기 unbuntu에서 root경로가 안뜹니다ㅠㅠ
0
519
3
선생님 추가적으로 새로운 페이지를 만드려고 하는데요...
0
252
1
코드 질문 드립니다!
0
237
1
혹시 강의자료 노션 내리셨나요?
0
244
1
노드몬 에러 참조하세요
0
364
1