매일 땡기는 마라 코딩

[인프런] 맛집지도 만들기 (5) 본문

클론코딩

[인프런] 맛집지도 만들기 (5)

cmkoi1 2023. 1. 31. 21:54

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

 

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지 - 인프런 | 강

내가 좋아하는 유튜버의 맛집지도를 만들면서 프론트엔드, 백엔드, 카카오맵 API 사용법, 배포까지 한번에 배울 수 있는 풀스택 맛집지도 강의입니다., - 강의 소개 | 인프런...

www.inflearn.com

※ 해당 링크 강의 내용을 바탕으로 작성된 포스팅입니다.

 

 

 

맛집지도 일단 만들어봐요! : HTML, CSS + 카카오맵 퍼블리싱

맛집지도 사이트 뼈대 잡고 반응형 처리하기

  • index.html, index.css 파일 생성.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>맛집지도</title>
    <link rel="stylesheet" href="index.css" />
    <meta name="author" content="동네코딩" />
    <meta name="description" content="맛집지도 서비스" />
    <meta
      name="keywords"
      content="동네코딩, 맛집지도, 유튜버맛집, 맛집유튜버"
    />
</head>
<body>
    <nav>
        <div class="inner">
            <div class="nav-container">
                <h1 class="nav-title">맛집지도</h1>
                <button class="nav-contact">Contact</button>
            </div>
        </div>
    </nav>

    <main>
        <!-- 카테고리 -->
        <section id="category">
            <div class="inner">
                <div class="category-container">
                    <h2 class="category-title">맛집지도 카테고리를 선택해보세요</h2>
                    <div class="category-list">
                        <button class="category-item">한식</button
                        ><button class="category-item">중식</button
                        ><button class="category-item">일식</button
                        ><button class="category-item">양식</button
                        ><button class="category-item">분식</button
                        ><button class="category-item">구이</button
                        ><button class="category-item">회/초밥</button
                        ><button class="category-item">기타</button>
                    </div>
                </div>
            </div>
        </section>

        <!-- 카카오지도 -->
        <div id="map"></div>

    </main>
</body>
</html>

 

index.css

@font-face {
    font-family: "KyoboHandwriting2020A";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2112@1.0/KyoboHandwriting2020A.woff")
      format("woff");
    font-weight: normal;
    font-style: normal;
  }

@media all and (min-width: 1024px) { 
    .inner {
        max-width: 1024px;
        margin: 0  auto;
    }
}

* {
    border: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-size: 10px;
    font-family: "KyoboHandwriting2020A";
}

.inner {
    padding: 0 1.5rem;
}

.nav-container {
    padding: 1rem 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.nav-title {
    font-size: 3rem;
}

.nav-contact {
    font-size: 2.5rem;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

main {
    margin-top: 1.5rem;
}

.category-title {
    font-size: 3.5rem;
}

.category-item {
    width: 25%;
    height: 5rem;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 1.6rem;
}

.category-item:hover {
    color: #e69a06;
    cursor: pointer;
}

 

중간 점검~

 

Tip
emment 사용하면 반복 작업을 더 쉽게 할 수 있음.

 

 

 

카카오맵 API를 활용해서 지도를 넣는 방법

카카오맵 API https://apis.map.kakao.com

APP KEY 발급 → 카카오 로그인 및 회원가입 → 애플리케이션 추가하기

 

API 생성

 

 

해당 APP 클릭하면 나오는 창.

 

앱 키 생성

 

 

플랫폼 생성하기 → Web 플랫폼 등록 → 사이트 도메인에 http://127.0.0.1:5500(라이브 서버가 띄운 서버) 등록

카카오맵 API https://apis.map.kakao.com에 다시 들어가 Web 클릭 → Guide

 

 

카카오맵 API 연결하기

 

지도 담을 영역 생성

 

index.html

<div id="map" style="width:500px;height:400px;"></div>

 

 

지도를 그리는 Javascript API 불러오기

appkey= 뒤에 앱 키 중 JavaScript 키를 입력해야 한다.

 

index.html

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>

 

 

지도를 띄우는 코드 작성

script.js 파일 생성.

 

script.js 

var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
	center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
	level: 3 //지도의 레벨(확대, 축소 정도)
};

var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴

 

index.html

<script src="script.js"></script> <!-- script.js 연결 -->

 

카카오 맵 API 연결

 

 

맵 사이즈 및 위치 조정

  • inner 클래스 이용하여 반응형으로 만들어 준다.

index.html

<div id="map" div class="inner" style="width:500px;height:400px;"></div>

 

 

 

  • 너비 조절

index.html

<div id="map" class="inner"></div>

 

※ main { margin-top: 1.5rem; } 코드 지우기

 

index.css

/* 카카오맵 CSS */
#map {
    width: 100%;

    /* %단위는 부모 태그를 기준으로 함.
    현재 #map의 부모 높이가 지정되지 않았음.
    따라서 높이를 100%로 하면 없어짐. */
    height: 100%;
    
    /* 플렉스 아이템 중 다른 아이템이 차지하고
    남는 공간을 모두 사용하겠다는 의미 */
    flex-grow: 1;
}

/* #map의 부모 높이를 지정해 주기 위함 */

body {
    /* 보이는 전체 화면의 높이를 기준.
    즉 전체 너비. */
    height: 100vh;
}

/* <body>에 속한 <nav>와 <main> 높이 지정 */
nav {
    height: 59px;
}

main {
    /* 부모의 100%를 가져가면 스크롤이 생겨버림.
    100% - 59px일 경우 box-sizing:border-box 설정 때문에
    마진이 박스 높이에 포함되지 않음.
    margin이 아닌 padding으로 바꿔주기.*/
    height: calc(100% - 59px);
    padding-top: 1.5rem;

    /* <section>과 map 부분 flex를 사용한 높이 조절 */
    display: flex;
    flex-direction: column;
}

 

오예

 

 

 

전체 코드

 

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>맛집지도</title>
    <link rel="stylesheet" href="index.css" />
    <meta name="author" content="동네코딩" />
    <meta name="description" content="맛집지도 서비스" />
    <meta
      name="keywords"
      content="동네코딩, 맛집지도, 유튜버맛집, 맛집유튜버"
    />
</head>
<body>
    <nav>
        <div class="inner">
            <div class="nav-container">
                <h1 class="nav-title">맛집지도</h1>
                <button class="nav-contact">Contact</button>
            </div>
        </div>
    </nav>

    <main>
        <!-- 카테고리 -->
        <section id="category">
            <div class="inner">
                <div class="category-container">
                    <h2 class="category-title">맛집지도 카테고리를 선택해보세요</h2>
                    <div class="category-list">
                        <button class="category-item">한식</button
                        ><button class="category-item">중식</button
                        ><button class="category-item">일식</button
                        ><button class="category-item">양식</button
                        ><button class="category-item">분식</button
                        ><button class="category-item">구이</button
                        ><button class="category-item">회/초밥</button
                        ><button class="category-item">기타</button>
                    </div>
                </div>
            </div>
        </section>

        <!-- 카카오지도 -->
        <div id="map" class="inner"></div>

    </main>

    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=39adfa6fd9c92be4de0a8ff5be4f14c5"></script>
    <script src="script.js"></script>
</body>
</html>

 

index.css

@font-face {
    font-family: "KyoboHandwriting2020A";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2112@1.0/KyoboHandwriting2020A.woff")
      format("woff");
    font-weight: normal;
    font-style: normal;
  }

@media all and (min-width: 1024px) { 
    .inner {
        max-width: 1024px;
        margin: 0  auto;
    }
}

* {
    border: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-size: 10px;
    font-family: "KyoboHandwriting2020A";
}

.inner {
    padding: 0 1.5rem;
}

.nav-container {
    padding: 1rem 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.nav-title {
    font-size: 3rem;
}

.nav-contact {
    font-size: 2.5rem;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

.category-title {
    font-size: 3.5rem;
}

.category-item {
    width: 25%;
    height: 5rem;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 1.6rem;
}

.category-item:hover {
    color: #e69a06;
    cursor: pointer;
}

/* 카카오맵 CSS */
#map {
    width: 100%;

    /* %단위는 부모 태그를 기준으로 함.
    현재 #map의 부모 높이가 지정되지 않았음.
    따라서 높이를 100%로 하면 없어짐. */
    height: 100%;
    
    /* 플렉스 아이템 중 다른 아이템이 차지하고
    남는 공간을 모두 사용하겠다는 의미 */
    flex-grow: 1;
}

/* #map의 부모 높이를 지정해 주기 위함 */

body {
    /* 보이는 전체 화면의 높이를 기준.
    즉 전체 너비. */
    height: 100vh;
}

/* <body>에 속한 <nav>와 <main> 높이 지정 */
nav {
    height: 59px;
}

main {
    /* 부모의 100%를 가져가면 스크롤이 생겨버림.
    100% - 59px일 경우 box-sizing:border-box 설정 때문에
    마진이 박스 높이에 포함되지 않음.
    margin이 아닌 padding으로 바꿔주기.*/
    height: calc(100% - 59px);
    padding-top: 1.5rem;

    /* <section>과 map 부분 flex를 사용한 높이 조절 */
    display: flex;
    flex-direction: column;
}

 

script.js

var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
	center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
	level: 3 //지도의 레벨(확대, 축소 정도)
};

var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴

 

728x90

'클론코딩' 카테고리의 다른 글

[인프런] 맛집지도 만들기 - 퀴즈 5, 퀴즈 6  (0) 2023.01.31
[인프런] 맛집지도 만들기 (6)  (0) 2023.01.31
[인프런] 맛집지도 만들기 - 퀴즈 4  (0) 2023.01.27
[인프런] 맛집지도 만들기 (4)  (0) 2023.01.27
[인프런] 맛집지도 만들기 - 퀴즈 3  (0) 2023.01.27
'클론코딩' Related Articles more