[CSS] 클론코딩 - 마카오

GDORI·2024년 8월 8일
APICSS마카오맵카카오맵클론코딩
0

CSS

목록 보기
5/5

어제 진행한 구글 메인 홈페이지에 이어 카카오맵을 클론코딩 해보았다.
부트스트랩을 거의 쓰지 않고 구현하려 노력했다.

나중에 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를 활용하여 만들어보았다.
웹브라우저에서 권한을 받아 현재 위치를 조회 후
해당위치 맵을 띄울 수 있도록 구현하였다.

내일은 나머지 기능을 구현해보겠다.

profile
GDORI
하루 최소 1시간이라도 공부하자..
이전 포스트

[CSS] 클론 코딩 - 쭈글

0개의 댓글

관련 채용 정보