웹린이 html 하나 만드려는데 질문좀요 ㅠㅠㅠ
조회수 168회
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 좌표를 아무리 바꿔도 그림 위치가 그대로인데 뭐가 잘못된걸까요? ㅠㅠㅠㅠ
댓글 입력