안녕하세요. 지도에 마커를 찍고 오버레이를 띄우는데 오버레이 크기에 대해 질문드립니다

지도/로컬 API
#1

질문 사진

<div id="tab-1" class="tab-content current">
    <div id="map1" style="width:760px;height:500px;"></div>

    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=cc21730f86b17af444ee67c76f8a4059"></script>
    <script th:inline="javascript">
        /*<![CDATA[*/

        var mapContainer1 = document.getElementById('map1'), // 지도를 표시할 div
            mapOption1 = {
                center: new kakao.maps.LatLng(33.39033271403803, 126.24018141591685), // 지도의 중심좌표
                level: 5 // 지도의 확대 레벨
            };

        // 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
        var map1 = new kakao.maps.Map(mapContainer1, mapOption1);

        // th:if="${jeju.id}%5 == 0"
        var positions = [
            /*[# th:each="jeju : ${jejuList}" th:if="${jeju.flag.toString().equals('호텔')}"]*/

            {
                title : '<div style="padding:10px;, bottom:-30px; position: relative;">&nbsp<a href="[(${jeju.address})]" >[(${jeju.name})]</a>' +
                    '&nbsp<a href="https://map.kakao.com/link/to/[(${jeju.name})],[[${jeju.latitude}]], [[${jeju.longitude}]]" ' +
                    'style="">' +
                    '&nbsp<img src="https://raw.githubusercontent.com/BinBinToure/Dulle-gil/main/image/kakaomap.png" style=""></a>'
                    +   '&nbsp<a href="[(${jeju.reviewAdd})]"><img src="https://raw.githubusercontent.com/BinBinToure/Dulle-gil/main/image/star.png" style=""></a></div>',
                latlng : new kakao.maps.LatLng(/*[[${jeju.latitude}]]*/, /*[[${jeju.longitude}]]*/),
                content : '<div>[(${jeju.name})]</div>'
            },
            /*[/]*/
        ];

        for(let i=0; i < positions.length; i++){
            var data = positions[i];
            displayMarker(data);
        }

        // 지도에 마커를 표시하는 함수입니다
        function displayMarker(data) {

            var imageSrc = "https://raw.githubusercontent.com/BinBinToure/Dulle-gil/main/image/test1.png";
            var imageSize = new kakao.maps.Size(24, 30);
            var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);

            var marker = new kakao.maps.Marker({
                map     : map1,
                position: data.latlng,
                image   : markerImage
            });
            var overlay = new kakao.maps.CustomOverlay({
                yAnchor : 1.2,
                position: marker.getPosition()
            });

            var content = document.createElement('div');
            content.innerHTML = data.title;
            content.style.cssText = 'background: white; border: 1px solid black;'

            var closeBtn = document.createElement('button');
            closeBtn.innerHTML = 'x';
            closeBtn.style.cssText = "    position: absolute;\n" +
                "    top: -0.8px;\n" +
                "    right: -23px;\n";
            closeBtn.onclick = function () {
                overlay.setMap(null);
            };
            content.appendChild(closeBtn);
            overlay.setContent(content);

            kakao.maps.event.addListener(marker, 'click', function () {
                overlay.setMap(map1);
            });
            // kakao.maps.event.addListener(map1, 'click', function() {
            //     overlay.setMap(null)
            // })
        };


        /*]]>*/
    </script>
</div>

탭안에 지도를 불러오고 마커와 오버레이를 찍고 있습니다.

탭안에 지도를 넣으니 마커를 찍었을때 오버레이 크기가 비대해져서 줄이고 싶은데

adfadfa

해당 div 크기를 줄이면 위에가 고정된채로 줄어들고 안의 내용이 따라가지 않아 질문드립니다.

#2

img 크기를 30x30로 설정하면 content에 맞게 장소 정보가 들어가네요.
이미지 크기나 내부 element에 적용된 스타일도 함께 확인해주세요.