어제 진행한 구글 메인 홈페이지에 이어 카카오맵을 클론코딩 해보았다.
부트스트랩을 거의 쓰지 않고 구현하려 노력했다.
나중에 JS를 사용하여 기능까지 구현이 끝나면
하나하나 분석하며 글을 쓸 예정이다.
아직 <footer> 부분은 미구현 되었다.
내일 css 구현마무리 후 JS 작업할 예정이다.
HTML 코드
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<link rel="stylesheet" href="./CSS/makao.css" />
<title>마카오맵</title>
<script>
navigator.geolocation.getCurrentPosition();
</script>
</head>
<header>
<!-- 상단 바 구현 -->
<div class="nav_bar">
<!-- 상단 바 1단 구현 -->
<div class="nav_bar_side">
<a class="menu">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"
fill="#000000">
<path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z" />
</svg>
</a>
<a class="logo"><img src="./img/img_logo.png" width="90" height="20" class="img_logo" alt="kakaomap"></a>
<a class="app_img"><img src="./img/app.PNG" alt=""></a>
</div>
<!-- 상단 바 2단 구현 -->
<div class="nav_bar_side input-group mb-3">
<input type="text" class="form-control" style="background-color: #f2f3f5; border: none;"
placeholder="장소, 주소, 버스 검색" aria-label="Username" aria-describedby="basic-addon1">
</div>
</div>
</header>
<body>
<div style="position: relative;">
<!-- 맵 API -->
<div id="map"></div>
<script type="text/javascript"
src="카카오맵API KEY </script>
<script type="text/javascript" src="./JS/map.js"></script>
<!-- 왼쪽 메뉴바 구현 -->
<div class="left_menu_bar">
<button class="button gps"></button>
<button class="plus_button"></button>
<button class="minus_button"></button>
</div>
<!-- 중앙 위치정보 구현 -->
<div class="middle_bar">
<p>ㅎㅇ?</p>
</div>
<!-- 오른쪽 메뉴바 구현 -->
<div class="right_menu_bar">
<button class="button road_view"></button>
<button class="button _3d_view"></button>
<button class="button expansion"></button>
</div>
</div>
</body>
<footer>
</footer>
</html>CSS 코드
body {
width: 100%;
height: 100%;
}
.nav_bar {
height: 88px;
width: 100%;
position: relative;
display: grid;
left: 0%;
top: 0%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
overflow: hidden;
box-shadow: 0px 1px 1px rgb(183, 181, 181);
z-index: 2;
}
.nav_bar_side {
height: 44px;
width: 100%;
}
.nav_bar_side>.menu {
margin-top: 10px;
margin-left: 1%;
margin-bottom: 0.5%;
float: left;
}
/* test */
.nav_bar_side>.logo {
margin-top: 10px;
margin-left: 44%;
float: left;
}
.nav_bar_side>.app_img {
margin-top: 10px;
margin-right: 1%;
float: right;
}
input {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 5px;
}
.left_menu_bar {
width: 38px;
display: flex;
flex-direction: column;
position: absolute;
top: 10px;
left: 10px;
z-index: 3;
}
.middle_bar {
width: 140px;
height: 20px;
position: absolute;
top: 10px;
left: 45%;
z-index: 3;
background-color: white;
opacity: 0.9;
border-radius: 10px;
box-shadow: 1px 1px 1px rgb(183, 181, 181);
overflow: hidden;
}
.middle_bar>p {
text-align: center;
}
.right_menu_bar {
width: 38px;
display: flex;
flex-direction: column;
position: absolute;
top: 10px;
right: 10px;
z-index: 3;
}
.button {
height: 38px;
border-radius: 50%;
margin-bottom: 10px;
background-size: cover;
border: none;
box-shadow: 1px 1px 1px rgb(183, 181, 181);
}
.gps {
background-image: url("../img/gps_button.PNG");
opacity: 0.9;
}
.road_view {
background-image: url("../img/road_view.png");
opacity: 0.9;
}
._3d_view {
background-image: url("../img/3d_view.png");
opacity: 0.9;
}
.expansion {
background-image: url("../img/expansion_view.png");
opacity: 0.9;
}
.plus_button {
height: 38px;
border-top-left-radius: 15%;
border-top-right-radius: 15%;
background-image: url("../img/plus_button.PNG");
opacity: 0.9;
box-shadow: 0px -1px 1px rgb(183, 181, 181);
border-left: none;
border-right: none;
border-top: none;
border-bottom: 1px solid rgb(183, 181, 181);
}
.minus_button {
height: 38px;
border-bottom-left-radius: 15%;
border-bottom-right-radius: 15%;
background-image: url("../img/minus_button.PNG");
opacity: 0.9;
box-shadow: 0px 1px 1px rgb(183, 181, 181);
border: none;
}
#map {
position: absolute;
z-index: 1;
width: 100%;
height: 1800px;
}
카카오맵 API
// Geolocation API 지원 여부 확인
<script>
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(
(position) => {
const { latitude, longitude, accuracy } = position.coords;
var container = document.getElementById('map');
var options = {
center: new kakao.maps.LatLng(latitude, longitude),
level: 3
};
var map = new kakao.maps.Map(container, options);
console.log(latitude,longitude);
},
(error) => {
status.textContent = `위치 정보를 가져올 수 없습니다: ${error.message}`;
var container = document.getElementById('map');
var options = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 3
};
var map = new kakao.maps.Map(container, options);
},
{
enableHighAccuracy: true, // 정확도 우선 모드
timeout: 10000, // 10초 이내에 응답 없으면 에러 발생
maximumAge: 0 // 항상 최신 위치 정보 수집
}
);
} else {
status.textContent = "브라우저가 위치 서비스를 지원하지 않습니다.";
}
</script>카카오맵 웹페이지 캡처
마카오맵 웹페이지 캡처
KAKAO MAP API를 활용하여 만들어보았다.
웹브라우저에서 권한을 받아 현재 위치를 조회 후
해당위치 맵을 띄울 수 있도록 구현하였다.
내일은 나머지 기능을 구현해보겠다.
하루 최소 1시간이라도 공부하자..