양주미 / favorite_restaurant

Go to a project
Toggle navigation Toggle navigation pinning
Jumi Yang
1ee3895b 1 parent 187f9d54

Delete on main branch

Inline Side-by-side
Showing 3 changed files with 0 additions and 160 deletions
1 -<!DOCTYPE html>
2 -<html lang="en">
3 - <head>
4 - <meta charset="UTF-8" />
5 - <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 - <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 - <title>맛집지도</title>
8 - <meta name="author" content="양주미" />
9 - <meta name="description" content="맛집지도 서비스" />
10 - <meta
11 - name="keywords"
12 - content="맛집지도, 맛집추천, 실시간채팅"
13 - />
14 - <link rel="stylesheet" href="style.css" />
15 - </head>
16 -
17 - <body>
18 - <nav>
19 - <div class="inner">
20 - <div class="nav-container">
21 - <h1 class="nav-title">맛집지도</h1>
22 - <button class="nav-contact">Contact</button>
23 - </div>
24 - </div>
25 - </nav>
26 -
27 - <main>
28 - <section id="category">
29 - <div class="inner">
30 - <div class="category-container">
31 - <h2 class="category-title">💜맛집지도 카테고리를 선택해보세요💜</h2>
32 - <div class="category-list">
33 - <button class="category-item">한식🍚</button
34 - ><button class="category-item">중식🍜</button
35 - ><button class="category-item">일식🍙</button
36 - ><button class="category-item">양식🍝</button
37 - ><button class="category-item">분식🍭</button
38 - ><button class="category-item">구이🍖</button
39 - ><button class="category-item">회/초밥🍣</button
40 - ><button class="category-item">기타🍴</button>
41 - </div>
42 - </div>
43 - </div>
44 - </section>
45 - <!-- 카테고리 -->
46 - <div id="map" class="inner"></div>
47 -
48 - <!-- 카카오지도 -->
49 - </main>
50 -
51 - <script
52 - type="text/javascript"
53 - src="//dapi.kakao.com/v2/maps/sdk.js?appkey=2263ae9eb197ad864a94eb1ed7b912c9">
54 -</script>
55 -
56 - <script src="script.js"></script>
57 - </body>
58 -</html>
...\ No newline at end of file ...\ No newline at end of file
1 -var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
2 -var options = { //지도를 생성할 때 필요한 기본 옵션
3 - center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
4 - level: 3 //지도의 레벨(확대, 축소 정도)
5 -};
6 -
7 -var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
...\ No newline at end of file ...\ No newline at end of file
1 -@font-face {
2 - font-family: 'Noto Sans KR', sans-serif;
3 - src: url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap');
4 - font-weight: normal;
5 - font-style: normal;
6 - }
7 -
8 - * {
9 - padding: 0;
10 - margin: 0;
11 - box-sizing: border-box;
12 - }
13 -
14 - html {
15 - font-size: 10px;
16 - font-family: 'Noto Sans KR', sans-serif;
17 - }
18 -
19 - nav {
20 - /* background-color: #e69a06; */
21 - }
22 -
23 - .nav-container {
24 - padding: 1rem 0;
25 - display: flex;
26 - flex-direction: row;
27 - justify-content: space-between;
28 - align-items: center;
29 - }
30 -
31 - .nav-title {
32 - font-size: 2.5rem;
33 - color :rebeccapurple;
34 - }
35 -
36 - .nav-contact {
37 - font-size: 1.5rem;
38 - border: 0;
39 - background: none;
40 - cursor: pointer;
41 - font-family: inherit;
42 - color :lightslategray;
43 - }
44 -
45 - .category-title {
46 - font-size: 2rem;
47 - }
48 -
49 - .category-item {
50 - width: 25%;
51 - height: 5rem;
52 - background: none;
53 - border: none;
54 - font-family: inherit;
55 - font-size: 1.6rem;
56 - }
57 -
58 - .category-item:hover {
59 - color: #e69a06;
60 - cursor: pointer;
61 - }
62 -
63 - .inner {
64 - padding: 0 1.5rem;
65 - }
66 -
67 - @media all and (min-width: 1024px) {
68 - .inner {
69 - max-width: 1024px;
70 - margin: 0 auto;
71 - }
72 - }
73 -
74 - /* 카카오맵 CSS */
75 -
76 - body {
77 - height: 100vh;
78 - }
79 -
80 - nav {
81 - height: 59px;
82 - }
83 -
84 - main {
85 - padding-top: 1.5rem;
86 - height: calc(100% - 59px);
87 - display: flex;
88 - flex-direction: column;
89 - }
90 -
91 - #map {
92 - flex-grow: 1;
93 - width: 100%;
94 - height: 100%;
95 - }
...\ No newline at end of file ...\ No newline at end of file