양주미 / favorite_restaurant

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

html, css, js 기본코드 구현

Inline Side-by-side
Showing 3 changed files with 160 additions and 0 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