-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
166 lines (164 loc) · 7.02 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<!-- Link Swiper's CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
<script type="module" src="./common.js" defer></script>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!-- Kakao 지도 SDK 스크립트 -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=621b20595b483a42129195cf4245094c"></script>
</head>
<body>
<header>
<div class="headerWrap">
<h1>
<a href=""><img id="logo" src="./img/logo.png" alt="로고" /></a>
</h1>
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<button class="swiper-slide on">전체</button>
<button class="swiper-slide">공예/취미</button>
<button class="swiper-slide">교양/어학</button>
<button class="swiper-slide">도시/농업</butt>
<button class="swiper-slide">미술/제작</button>
<button class="swiper-slide">스포츠</button>
<button class="swiper-slide">역사</button>
<button class="swiper-slide">자연/과학</button>
<button class="swiper-slide">전문/자격증</button>
<button class="swiper-slide">정보/통신</button>
<button class="swiper-slide">청년/정보</button>
<button class="swiper-slide">기타</button>
</div>
</div>
<button class="menuBtn">
<img src="./img/hamburger.png" alt="햄버거 메뉴" />
</button>
<div class="menuAll">
<button class="menuAllBtn on">전체</button>
<button class="menuAllBtn">공예/취미</button>
<button class="menuAllBtn">교양/어학</button>
<button class="menuAllBtn">도시/농업</button>
<button class="menuAllBtn">미술/제작</button>
<button class="menuAllBtn">스포츠</button>
<button class="menuAllBtn">역사</button>
<button class="menuAllBtn">자연/과학</button>
<button class="menuAllBtn">전문/자격증</button>
<button class="menuAllBtn">정보/통신</button>
<button class="menuAllBtn">청년/정보</button>
<button class="menuAllBtn">기타</button>
</div>
</div>
</header>
<main>
<div class="wrap">
<section class="sec1">
<div class="inputArea">
<div class="itemWrap">
<select class="locaSelect" name="locaiton">
<option value="지역명">전체</option>
<option value="고양시">고양시</option>
<option value="강남구">강남구</option>
<option value="강동구">강동구</option>
<option value="강북구">강북구</option>
<option value="강서구">강서구</option>
<option value="과천시">과천시</option>
<option value="관악구">관악구</option>
<option value="광진구">광진구</option>
<option value="구로구">구로구</option>
<option value="금천구">금천구</option>
<option value="노원구">노원구</option>
<option value="도봉구">도봉구</option>
<option value="동대문구">동대문구</option>
<option value="동작구">동작구</option>
<option value="마포구">마포구</option>
<option value="서대문구">서대문구</option>
<option value="서초구">서초구</option>
<option value="성동구">성북구</option>
<option value="송파구">송파구</option>
<option value="양천구">양천구</option>
<option value="영등포구">영등포구</option>
<option value="용산구">용산구</option>
<option value="은평구">은평구</option>
<option value="종로구">종로구</option>
<option value="중구">중구</option>
<option value="중랑구">중랑구</option>
</select>
<input class="searchInput" placeholder="검색어를 입력해주세요" />
<button class="searchBtn"><img src="./img/search.png" /></button>
</div>
</div>
<div class="title">
<h2>
서울특별시 교육
<span class="point">공공서비스</span> 예약<br />이용하시려는
서비스를 빠르게 예약해보세요
</h2>
</div>
</section>
<section class="sec2">
<div class="list">
<div id="listCon"></div>
<div class="pagination"></div>
</div>
<div class="map">
<div id="mainMap" style="width:100%;height:100%;border-radius:0.8rem;"></div>
<div class="detailCon">
<!-- <p>상세내용이 들어갈 것입니다.</p> -->
</div>
<div class="reserCon">
<a href="" class="reserBtn">예약하러가기</a>
</div>
</div>
</section>
</div>
</main>
<div class="hamberMenu">
<div class="closeWrap">
<button class="closeImgBtn">
<img src="./img/close.png" alt="close" />
</button>
</div>
<div class="hamberMenuAll">
<button class="hamberMenuBtn on">전체</button>
<button class="hamberMenuBtn">공예/취미</button>
<button class="hamberMenuBtn">교양/어학</button>
<button class="hamberMenuBtn">도시/농업</button>
<button class="hamberMenuBtn">미술/제작</button>
<button class="hamberMenuBtn">스포츠</button>
<button class="hamberMenuBtn">역사</button>
<button class="hamberMenuBtn">자연/과학</button>
<button class="hamberMenuBtn">전문/자격증</button>
<button class="hamberMenuBtn">정보/통신</button>
<button class="hamberMenuBtn">청년/정보</button>
<button class="hamberMenuBtn">기타</button>
</div>
</div>
<div class="mobileDetail">
<div class="closeWrap">
<button class="closeMapBtn">
<img src="./img/close.png" alt="close" />
</button>
</div>
<div class="mobileMap">
<div class="mobileMapWrap">
<div id="mobileMap" style="width:100%;height:450px;border-radius:0.8rem;"></div>
<div class="mobileDetailCon">
<!-- <p>상세내용이 들어갈 것입니다.</p> -->
</div>
<div class="mobileReserWrap">
<a href="" class="mobileReserBtn">예약하러가기</a>
</div>
</div>
</div>
</div>
</body>
</html>