인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

신영현님의 프로필 이미지
신영현

작성한 질문수

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

카카오맵 이미지나 텍스트 크기가 infowindow를 벗어납니다.

해결된 질문

작성

·

727

1

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 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

Jiwoon Jeong님의 프로필 이미지
Jiwoon Jeong
지식공유자

image

소스 확인해보니 '인포윈도우 설정'에 주석처리가 안되어 있네요.

따라서 infowindow 클래스가 적용되지 않아서 생기는 문제입니다.

.infowindow-img에 max-width:100%로 설정해주시면 됩니다.

 

또한 이미지 소스의 원본 크기가 들쭉날쭉이라 레이아웃이 조금 부자연스러워보이는 것은 사실이네요.

이럴때는 자르거나, 백그라운드 이미지로 처리하거나, 일부러 작게 표시해서 가운데로 놓는 방법 등.. 다양한 트릭이 있습니다.

https://multifidus.tistory.com/182

여기 참고해보시면 좋을 것 같네요.

 

감사합니다.

 

신영현님의 프로필 이미지
신영현
질문자

답변 감사합니다... 😊

0

Jiwoon Jeong님의 프로필 이미지
Jiwoon Jeong
지식공유자

  <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% 으로 해서

이미지가 부모 태그를 넘지 못하도록 설정해주시는 것이 좋을 것 같습니다.

 

감사합니다.

 

신영현님의 프로필 이미지
신영현
질문자

감사합니다 선생님

신영현님의 프로필 이미지
신영현
질문자

선생님 말씀대로 변경했는데도 이미지 크기가 창을 벗어나거나 너무 크게 나옵니다...

아마 저는 유튜브 주소를 이용하지 않고 이미지주소를 이용해 소스를 가져와서 그런가봅니다..

 

어떻게 조정해야 할까요?

image

Jiwoon Jeong님의 프로필 이미지
Jiwoon Jeong
지식공유자

개발자도구를 키신 다음, 해당 부분을 선택하여 적용되어있는 CSS를 보여주시면 파악이 가능할 것 같네요.

배포하신 상태라면 url을 주시면 함께 확인해보겠습니다

신영현님의 프로필 이미지
신영현
질문자

www.iparimap.kr 입니다.

한번 봐주시면 감사드리겠습니다.

신영현님의 프로필 이미지
신영현

작성한 질문수

질문하기