웹린이 html 하나 만드려는데 질문좀요 ㅠㅠㅠ

조회수 62회

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moving Center Map</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Moving Center Map</h1>
    <div id="map-container">
        <img src="images/seoul.png" alt="Seoul" class="region" id="seoul">
        <img src="images/busan.png" alt="Busan" class="region" id="busan">
        <img src="images/daegu.png" alt="Daegu" class="region" id="daegu">
        <img src="images/incheon.png" alt="Incheon" class="region" id="incheon">
        <img src="images/gwangju.png" alt="Gwangju" class="region" id="gwangju">
        <img src="images/daejeon.png" alt="Daejeon" class="region" id="daejeon">
        <img src="images/ulsan.png" alt="Ulsan" class="region" id="ulsan">
        <img src="images/sejong.png" alt="Sejong" class="region" id="sejong">
        <img src="images/gyeonggi.png" alt="Gyeonggi" class="region" id="gyeonggi">
        <img src="images/gangwon.png" alt="Gangwon" class="region" id="gangwon">
        <img src="images/chungbuk.png" alt="Chungbuk" class="region" id="chungbuk">
        <img src="images/chungnam.png" alt="Chungnam" class="region" id="chungnam">
        <img src="images/jeonbuk.png" alt="Jeonbuk" class="region" id="jeonbuk">
        <img src="images/jeonnam.png" alt="Jeonnam" class="region" id="jeonnam">
        <img src="images/gyeongbuk.png" alt="Gyeongbuk" class="region" id="gyeongbuk">
        <img src="images/gyeongnam.png" alt="Gyeongnam" class="region" id="gyeongnam">
        <img src="images/jeju.png" alt="Jeju" class="region" id="jeju">
        <div id="info-box"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

JS

document.addEventListener('DOMContentLoaded', () => {
    const infoBox = document.getElementById('info-box');

    const regions = [
        { id: 'seoul', name: 'Seoul', info: 'Seoul Moving Center: 010-1234-5678' },
        { id: 'busan', name: 'Busan', info: 'Busan Moving Center: 010-2345-6789' },
        { id: 'daegu', name: 'Daegu', info: 'Daegu Moving Center: 010-3456-7890' },
        { id: 'incheon', name: 'Incheon', info: 'Incheon Moving Center: 010-4567-8901' },
        { id: 'gwangju', name: 'Gwangju', info: 'Gwangju Moving Center: 010-5678-9012' },
        { id: 'daejeon', name: 'Daejeon', info: 'Daejeon Moving Center: 010-6789-0123' },
        { id: 'ulsan', name: 'Ulsan', info: 'Ulsan Moving Center: 010-7890-1234' },
        { id: 'sejong', name: 'Sejong', info: 'Sejong Moving Center: 010-8901-2345' },
        { id: 'gyeonggi', name: 'Gyeonggi', info: 'Gyeonggi Moving Center: 010-9012-3456' },
        { id: 'gangwon', name: 'Gangwon', info: 'Gangwon Moving Center: 010-0123-4567' },
        { id: 'chungbuk', name: 'Chungbuk', info: 'Chungbuk Moving Center: 010-1234-5678' },
        { id: 'chungnam', name: 'Chungnam', info: 'Chungnam Moving Center: 010-2345-6789' },
        { id: 'jeonbuk', name: 'Jeonbuk', info: 'Jeonbuk Moving Center: 010-3456-7890' },
        { id: 'jeonnam', name: 'Jeonnam', info: 'Jeonnam Moving Center: 010-4567-8901' },
        { id: 'gyeongbuk', name: 'Gyeongbuk', info: 'Gyeongbuk Moving Center: 010-5678-9012' },
        { id: 'gyeongnam', name: 'Gyeongnam', info: 'Gyeongnam Moving Center: 010-6789-0123' },
        { id: 'jeju', name: 'Jeju', info: 'Jeju Moving Center: 010-7890-1234' },
    ];

    regions.forEach(region => {
        const regionElement = document.getElementById(region.id);
        regionElement.addEventListener('click', (event) => {
            const rect = regionElement.getBoundingClientRect();
            infoBox.style.top = `${rect.top + window.scrollY}px`;
            infoBox.style.left = `${rect.left + window.scrollX}px`;
            infoBox.innerHTML = `
                <h2>${region.name}</h2>
                <p>${region.info}</p>
                <button id="close-btn">Close</button>
            `;
            infoBox.style.display = 'block';

            document.getElementById('close-btn').addEventListener('click', () => {
                infoBox.style.display = 'none';
            });
        });
    });
});

CSS

body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#map-container {
    position: relative;
    width: 800px;
    height: 600px;
}

.region {
    position: absolute;
    cursor: pointer;
    transition: filter 0.3s;
}

.region:hover {
    filter: brightness(1.2);
}

#info-box {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 1000;
}

/* 각 지역 이미지의 위치를 설정 */
#region#seoul { top: 50px; left: 300px; }
#region#busan { top: 400px; left: 500px; }
#region#daegu { top: 350px; left: 450px; }
#region#incheon { top: 70px; left: 250px; }
#region#gwangju { top: 450px; left: 200px; }
#region#daejeon { top: 300px; left: 300px; }
#region#ulsan { top: 420px; left: 480px; }
#region#sejong { top: 280px; left: 320px; }
#region#gyeonggi { top: 100px; left: 280px; }
#region#gangwon { top: 50px; left: 400px; }
#region#chungbuk { top: 200px; left: 350px; }
#region#chungnam { top: 250px; left: 250px; }
#region#jeonbuk { top: 350px; left: 200px; }
#region#jeonnam { top: 450px; left: 180px; }
#region#gyeongbuk { top: 250px; left: 450px; }
#region#gyeongnam { top: 400px; left: 400px; }
#region#jeju { top: 550px; left: 300px; }

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

이렇게 짰는데, region 좌표를 아무리 바꿔도 그림 위치가 그대로인데 뭐가 잘못된걸까요? ㅠㅠㅠㅠ

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)