한서흔 / OSS-TongGilMut

Go to a project
Toggle navigation Toggle navigation pinning
Joung Jiwon
b7116af3 1 parent 23f82b8f

css 수정

Inline Side-by-side
Showing 3 changed files with 308 additions and 153 deletions
This diff could not be displayed because it is too large.
...@@ -17,7 +17,8 @@ body { ...@@ -17,7 +17,8 @@ body {
17 margin: 0; 17 margin: 0;
18 padding: 0; 18 padding: 0;
19 overflow-x: hidden; 19 overflow-x: hidden;
20 - font-family:'NanumBarunGothic' 20 + font-family:'NanumBarunGothic';
21 + min-width: 1200px;
21 } 22 }
22 a { 23 a {
23 transition: all 0.3s ease; 24 transition: all 0.3s ease;
...@@ -230,6 +231,78 @@ a:focus { ...@@ -230,6 +231,78 @@ a:focus {
230 background: white; 231 background: white;
231 } 232 }
232 233
234 +/* Dropdown list*/
235 +select{
236 + -webkit-appearance: none; /* 네이티브 외형 감추기 */
237 + -moz-appearance: none;
238 + appearance: none;
239 + display:none;
240 +}
241 +
242 +select::-ms-expand {
243 + display: none;
244 +}
245 +
246 +.custom-select {
247 + position: relative;
248 + font-family: Arial;
249 +}
250 +
251 +.custom-select select {
252 + display: none; /*hide original SELECT element:*/
253 +}
254 +
255 +.select-selected {
256 + background-color: white;
257 +}
258 +
259 +/*style the arrow inside the select element:*/
260 +.select-selected:after {
261 + position: absolute;
262 + content: "";
263 + top: 14px;
264 + right: 10px;
265 + width: 0;
266 + height: 0;
267 + border: 6px solid transparent;
268 + border-color: #fff transparent transparent transparent;
269 +}
270 +
271 +/*point the arrow upwards when the select box is open (active):*/
272 +.select-selected.select-arrow-active:after {
273 + border-color: transparent transparent #fff transparent;
274 + top: 7px;
275 +}
276 +
277 +/*style the items (options), including the selected item:*/
278 +.select-items div,.select-selected {
279 + color: #333; font-size:15px;
280 + text-align: center;
281 + border: 1px solid transparent;
282 + border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
283 + cursor: pointer;
284 + user-select: none;
285 +}
286 +
287 +/*style items (options):*/
288 +.select-items {
289 + position: absolute;
290 + background-color:white;
291 + top: 100%;
292 + left: 0;
293 + right: 0;
294 + z-index: 99;
295 +}
296 +
297 +/*hide the items when the select box is closed:*/
298 +.select-hide {
299 + display: none;
300 +}
301 +
302 +.select-items div:hover, .same-as-selected {
303 + background-color: rgba(0, 0, 0, 0.1);
304 +}
305 +
233 /* Introduction */ 306 /* Introduction */
234 307
235 .tm-section-title { 308 .tm-section-title {
...@@ -298,7 +371,7 @@ a:focus { ...@@ -298,7 +371,7 @@ a:focus {
298 select::-ms-expand { 371 select::-ms-expand {
299 display: none; 372 display: none;
300 } 373 }
301 -출처: https://doolyit.tistory.com/126 [동해둘리의 IT Study] 374 +
302 input{ 375 input{
303 border-radius:5px; 376 border-radius:5px;
304 } 377 }
...@@ -308,7 +381,8 @@ input{ ...@@ -308,7 +381,8 @@ input{
308 left:44%; 381 left:44%;
309 margin-top:40px; 382 margin-top:40px;
310 border:none; 383 border:none;
311 - border-radius:5px; 384 + border-radius:5px;
385 + color : -internal-light-dark(black, white);
312 } 386 }
313 387
314 #map-answer{ 388 #map-answer{
......
...@@ -94,9 +94,10 @@ ...@@ -94,9 +94,10 @@
94 </div> 94 </div>
95 <div class="container question-field"> 95 <div class="container question-field">
96 <div class="question-text">몇 학년인가요?</div> 96 <div class="question-text">몇 학년인가요?</div>
97 - <div class="question-input"> 97 + <div class="custom-select" style="width:208px; margin-right:42px">
98 - <select name="semester" id="semester"> 98 + <select>
99 - <option value="sem-1-1">1학년 1학기</option> 99 + <option value="0">1학년 1학기</option>
100 + <option value="sem-1-1">1학년 1학기</option>
100 <option value="sem-1-2">1학년 2학기</option> 101 <option value="sem-1-2">1학년 2학기</option>
101 <option value="sem-2-1">2학년 1학기</option> 102 <option value="sem-2-1">2학년 1학기</option>
102 <option value="sem-2-2">2학년 2학기</option> 103 <option value="sem-2-2">2학년 2학기</option>
...@@ -104,7 +105,7 @@ ...@@ -104,7 +105,7 @@
104 <option value="sem-3-2">3학년 2학기</option> 105 <option value="sem-3-2">3학년 2학기</option>
105 <option value="sem-4-1">4학년 1학기</option> 106 <option value="sem-4-1">4학년 1학기</option>
106 <option value="sem-4-2">4학년 2학기</option> 107 <option value="sem-4-2">4학년 2학기</option>
107 - </select> 108 + </select>
108 </div> 109 </div>
109 </div> 110 </div>
110 <div class="container button-field"> 111 <div class="container button-field">
...@@ -115,148 +116,6 @@ ...@@ -115,148 +116,6 @@
115 <br> 116 <br>
116 117
117 <div id="map" style="width:700px;height:700px;"></div> 118 <div id="map" style="width:700px;height:700px;"></div>
118 -<script>
119 -var btn = document.querySelector('button');
120 -
121 -btn.addEventListener('click', updateBtn);
122 -
123 -function updateBtn() {
124 - var start = document.getElementById('start').value;
125 - var end = document.getElementById('end').value;
126 - naver.maps.Service.geocode({
127 - address: start
128 -
129 - }, function(status, response) {
130 - if (status !== naver.maps.Service.Status.OK) {
131 - return alert('Something wrong!');
132 - }
133 - var result = response.result, // 검색 결과의 컨테이너
134 - items = result.items;
135 - var sx = result.items[0].point.x;
136 - var sy = result.items[0].point.y;
137 -
138 - naver.maps.Service.geocode({
139 - address: end
140 -
141 - }, function(status, response) {
142 - if (status !== naver.maps.Service.Status.OK) {
143 - return alert('Something wrong!');
144 - }
145 - var result = response.result, // 검색 결과의 컨테이너
146 - items = result.items;
147 - var ex = result.items[0].point.x;
148 - var ey = result.items[0].point.y;
149 -
150 -
151 - /*var sx = 127.0739547;
152 - var sy = 37.2407701;
153 - var ex = 126.921666;
154 - var ey = 37.1308333;
155 - */
156 -
157 -
158 - var mapOptions = {
159 - center: new naver.maps.LatLng(start,end),
160 - zoom: 10
161 - };
162 -
163 - var map = new naver.maps.Map('map', mapOptions);
164 -
165 -
166 -
167 - function searchPubTransPathAJAX() {
168 - var xhr = new XMLHttpRequest();
169 - //ODsay apiKey 입력
170 - var url = "https://api.odsay.com/v1/api/searchPubTransPath?SX="+sx+"&SY="+sy+"&EX="+ex+"&EY="+ey+"&apiKey=nnsDQB1AWhpETO3HmMdDAw";
171 - xhr.open("GET", url, true);
172 - xhr.send();
173 - xhr.onreadystatechange = function() {
174 - if (xhr.readyState == 4 && xhr.status == 200) {
175 - console.log( JSON.parse(xhr.responseText) ); // <- xhr.responseText 로 결과를 가져올 수 있음
176 - //노선그래픽 데이터 호출
177 - callMapObjApiAJAX((JSON.parse(xhr.responseText))["result"]["path"][0].info.mapObj);
178 - }
179 - }
180 - }
181 -
182 - //길찾기 API 호출
183 - searchPubTransPathAJAX();
184 -
185 - function callMapObjApiAJAX(mabObj){
186 - var xhr = new XMLHttpRequest();
187 - //ODsay apiKey 입력
188 - var url = "https://api.odsay.com/v1/api/loadLane?mapObject=0:0@"+mabObj+"&apiKey=nnsDQB1AWhpETO3HmMdDAw";
189 - xhr.open("GET", url, true);
190 - xhr.send();
191 - xhr.onreadystatechange = function() {
192 - if (xhr.readyState == 4 && xhr.status == 200) {
193 - var resultJsonData = JSON.parse(xhr.responseText);
194 - drawNaverMarker(sx,sy); // 출발지 마커 표시
195 - drawNaverMarker(ex,ey); // 도착지 마커 표시
196 - drawNaverPolyLine(resultJsonData); // 노선그래픽데이터 지도위 표시
197 - // boundary 데이터가 있을경우, 해당 boundary로 지도이동
198 - if(resultJsonData.result.boundary){
199 - var boundary = new naver.maps.LatLngBounds(
200 - new naver.maps.LatLng(resultJsonData.result.boundary.top, resultJsonData.result.boundary.left),
201 - new naver.maps.LatLng(resultJsonData.result.boundary.bottom, resultJsonData.result.boundary.right)
202 - );
203 - map.panToBounds(boundary);
204 - }
205 - }
206 - }
207 - }
208 -
209 - // 지도위 마커 표시해주는 함수
210 - function drawNaverMarker(x,y){
211 - var marker = new naver.maps.Marker({
212 - position: new naver.maps.LatLng(y, x),
213 - map: map
214 - });
215 - }
216 -
217 - // 노선그래픽 데이터를 이용하여 지도위 폴리라인 그려주는 함수
218 - function drawNaverPolyLine(data){
219 - var lineArray;
220 -
221 - for(var i = 0 ; i < data.result.lane.length; i++){
222 - for(var j=0 ; j <data.result.lane[i].section.length; j++){
223 - lineArray = null;
224 - lineArray = new Array();
225 - for(var k=0 ; k < data.result.lane[i].section[j].graphPos.length; k++){
226 - lineArray.push(new naver.maps.LatLng(data.result.lane[i].section[j].graphPos[k].y, data.result.lane[i].section[j].graphPos[k].x));
227 - }
228 -
229 - //지하철결과의 경우 노선에 따른 라인색상 지정하는 부분 (1,2호선의 경우만 예로 들음)
230 - if(data.result.lane[i].type == 1){
231 - var polyline = new naver.maps.Polyline({
232 - map: map,
233 - path: lineArray,
234 - strokeWeight: 3,
235 - strokeColor: '#003499'
236 - });
237 - }else if(data.result.lane[i].type == 2){
238 - var polyline = new naver.maps.Polyline({
239 - map: map,
240 - path: lineArray,
241 - strokeWeight: 3,
242 - strokeColor: '#37b42d'
243 - });
244 - }else{
245 - var polyline = new naver.maps.Polyline({
246 - map: map,
247 - path: lineArray,
248 - strokeWeight: 3
249 - });
250 - }
251 - }
252 - }
253 - }
254 - });
255 - });
256 -}
257 -</script>
258 -
259 -
260 <div class="answer-field"> 119 <div class="answer-field">
261 한번 갈 때마다 ...<br> 120 한번 갈 때마다 ...<br>
262 <span class="answer-highlight">n</span> 시간 <span class="answer-highlight">n</span> 분 <br> 121 <span class="answer-highlight">n</span> 시간 <span class="answer-highlight">n</span> 분 <br>
...@@ -294,12 +153,234 @@ function updateBtn() { ...@@ -294,12 +153,234 @@ function updateBtn() {
294 </p> 153 </p>
295 </footer> 154 </footer>
296 </section> 155 </section>
156 +
157 +
297 <script src="js/jquery-1.9.1.min.js"></script> 158 <script src="js/jquery-1.9.1.min.js"></script>
298 <script src="slick/slick.min.js"></script> 159 <script src="slick/slick.min.js"></script>
299 <script src="magnific-popup/jquery.magnific-popup.min.js"></script> 160 <script src="magnific-popup/jquery.magnific-popup.min.js"></script>
300 <script src="js/jquery.singlePageNav.min.js"></script> 161 <script src="js/jquery.singlePageNav.min.js"></script>
301 <script src="js/bootstrap.min.js"></script> 162 <script src="js/bootstrap.min.js"></script>
302 - <script> 163 + <script> //dropdown list
164 + var x, i, j, l, ll, selElmnt, a, b, c;
165 + /*look for any elements with the class "custom-select":*/
166 + x = document.getElementsByClassName("custom-select");
167 + l = x.length;
168 + for (i = 0; i < l; i++) {
169 + selElmnt = x[i].getElementsByTagName("select")[0];
170 + ll = selElmnt.length;
171 + /*for each element, create a new DIV that will act as the selected item:*/
172 + a = document.createElement("DIV");
173 + a.setAttribute("class", "select-selected");
174 + a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
175 + x[i].appendChild(a);
176 + /*for each element, create a new DIV that will contain the option list:*/
177 + b = document.createElement("DIV");
178 + b.setAttribute("class", "select-items select-hide");
179 + for (j = 1; j < ll; j++) {
180 + /*for each option in the original select element,
181 + create a new DIV that will act as an option item:*/
182 + c = document.createElement("DIV");
183 + c.innerHTML = selElmnt.options[j].innerHTML;
184 + c.addEventListener("click", function(e) {
185 + /*when an item is clicked, update the original select box,
186 + and the selected item:*/
187 + var y, i, k, s, h, sl, yl;
188 + s = this.parentNode.parentNode.getElementsByTagName("select")[0];
189 + sl = s.length;
190 + h = this.parentNode.previousSibling;
191 + for (i = 0; i < sl; i++) {
192 + if (s.options[i].innerHTML == this.innerHTML) {
193 + s.selectedIndex = i;
194 + h.innerHTML = this.innerHTML;
195 + y = this.parentNode.getElementsByClassName("same-as-selected");
196 + yl = y.length;
197 + for (k = 0; k < yl; k++) {
198 + y[k].removeAttribute("class");
199 + }
200 + this.setAttribute("class", "same-as-selected");
201 + break;
202 + }
203 + }
204 + h.click();
205 + });
206 + b.appendChild(c);
207 + }
208 + x[i].appendChild(b);
209 + a.addEventListener("click", function(e) {
210 + /*when the select box is clicked, close any other select boxes,
211 + and open/close the current select box:*/
212 + e.stopPropagation();
213 + closeAllSelect(this);
214 + this.nextSibling.classList.toggle("select-hide");
215 + this.classList.toggle("select-arrow-active");
216 + });
217 + }
218 + function closeAllSelect(elmnt) {
219 + /*a function that will close all select boxes in the document,
220 + except the current select box:*/
221 + var x, y, i, xl, yl, arrNo = [];
222 + x = document.getElementsByClassName("select-items");
223 + y = document.getElementsByClassName("select-selected");
224 + xl = x.length;
225 + yl = y.length;
226 + for (i = 0; i < yl; i++) {
227 + if (elmnt == y[i]) {
228 + arrNo.push(i)
229 + } else {
230 + y[i].classList.remove("select-arrow-active");
231 + }
232 + }
233 + for (i = 0; i < xl; i++) {
234 + if (arrNo.indexOf(i)) {
235 + x[i].classList.add("select-hide");
236 + }
237 + }
238 + }
239 + /*if the user clicks anywhere outside the select box,
240 + then close all select boxes:*/
241 + document.addEventListener("click", closeAllSelect);
242 + </script>
243 + <script> //API
244 + var btn = document.querySelector('button');
245 +
246 + btn.addEventListener('click', updateBtn);
247 +
248 + function updateBtn() {
249 + var start = document.getElementById('start').value;
250 + var end = document.getElementById('end').value;
251 + naver.maps.Service.geocode({
252 + address: start
253 +
254 + }, function(status, response) {
255 + if (status !== naver.maps.Service.Status.OK) {
256 + return alert('Something wrong!');
257 + }
258 + var result = response.result, // 검색 결과의 컨테이너
259 + items = result.items;
260 + var sx = result.items[0].point.x;
261 + var sy = result.items[0].point.y;
262 +
263 + naver.maps.Service.geocode({
264 + address: end
265 +
266 + }, function(status, response) {
267 + if (status !== naver.maps.Service.Status.OK) {
268 + return alert('Something wrong!');
269 + }
270 + var result = response.result, // 검색 결과의 컨테이너
271 + items = result.items;
272 + var ex = result.items[0].point.x;
273 + var ey = result.items[0].point.y;
274 +
275 +
276 + /*var sx = 127.0739547;
277 + var sy = 37.2407701;
278 + var ex = 126.921666;
279 + var ey = 37.1308333;
280 + */
281 +
282 +
283 + var mapOptions = {
284 + center: new naver.maps.LatLng(start,end),
285 + zoom: 10
286 + };
287 +
288 + var map = new naver.maps.Map('map', mapOptions);
289 +
290 +
291 +
292 + function searchPubTransPathAJAX() {
293 + var xhr = new XMLHttpRequest();
294 + //ODsay apiKey 입력
295 + var url = "https://api.odsay.com/v1/api/searchPubTransPath?SX="+sx+"&SY="+sy+"&EX="+ex+"&EY="+ey+"&apiKey=nnsDQB1AWhpETO3HmMdDAw";
296 + xhr.open("GET", url, true);
297 + xhr.send();
298 + xhr.onreadystatechange = function() {
299 + if (xhr.readyState == 4 && xhr.status == 200) {
300 + console.log( JSON.parse(xhr.responseText) ); // <- xhr.responseText 로 결과를 가져올 수 있음
301 + //노선그래픽 데이터 호출
302 + callMapObjApiAJAX((JSON.parse(xhr.responseText))["result"]["path"][0].info.mapObj);
303 + }
304 + }
305 + }
306 +
307 + //길찾기 API 호출
308 + searchPubTransPathAJAX();
309 +
310 + function callMapObjApiAJAX(mabObj){
311 + var xhr = new XMLHttpRequest();
312 + //ODsay apiKey 입력
313 + var url = "https://api.odsay.com/v1/api/loadLane?mapObject=0:0@"+mabObj+"&apiKey=nnsDQB1AWhpETO3HmMdDAw";
314 + xhr.open("GET", url, true);
315 + xhr.send();
316 + xhr.onreadystatechange = function() {
317 + if (xhr.readyState == 4 && xhr.status == 200) {
318 + var resultJsonData = JSON.parse(xhr.responseText);
319 + drawNaverMarker(sx,sy); // 출발지 마커 표시
320 + drawNaverMarker(ex,ey); // 도착지 마커 표시
321 + drawNaverPolyLine(resultJsonData); // 노선그래픽데이터 지도위 표시
322 + // boundary 데이터가 있을경우, 해당 boundary로 지도이동
323 + if(resultJsonData.result.boundary){
324 + var boundary = new naver.maps.LatLngBounds(
325 + new naver.maps.LatLng(resultJsonData.result.boundary.top, resultJsonData.result.boundary.left),
326 + new naver.maps.LatLng(resultJsonData.result.boundary.bottom, resultJsonData.result.boundary.right)
327 + );
328 + map.panToBounds(boundary);
329 + }
330 + }
331 + }
332 + }
333 +
334 + // 지도위 마커 표시해주는 함수
335 + function drawNaverMarker(x,y){
336 + var marker = new naver.maps.Marker({
337 + position: new naver.maps.LatLng(y, x),
338 + map: map
339 + });
340 + }
341 +
342 + // 노선그래픽 데이터를 이용하여 지도위 폴리라인 그려주는 함수
343 + function drawNaverPolyLine(data){
344 + var lineArray;
345 +
346 + for(var i = 0 ; i < data.result.lane.length; i++){
347 + for(var j=0 ; j <data.result.lane[i].section.length; j++){
348 + lineArray = null;
349 + lineArray = new Array();
350 + for(var k=0 ; k < data.result.lane[i].section[j].graphPos.length; k++){
351 + lineArray.push(new naver.maps.LatLng(data.result.lane[i].section[j].graphPos[k].y, data.result.lane[i].section[j].graphPos[k].x));
352 + }
353 +
354 + //지하철결과의 경우 노선에 따른 라인색상 지정하는 부분 (1,2호선의 경우만 예로 들음)
355 + if(data.result.lane[i].type == 1){
356 + var polyline = new naver.maps.Polyline({
357 + map: map,
358 + path: lineArray,
359 + strokeWeight: 3,
360 + strokeColor: '#003499'
361 + });
362 + }else if(data.result.lane[i].type == 2){
363 + var polyline = new naver.maps.Polyline({
364 + map: map,
365 + path: lineArray,
366 + strokeWeight: 3,
367 + strokeColor: '#37b42d'
368 + });
369 + }else{
370 + var polyline = new naver.maps.Polyline({
371 + map: map,
372 + path: lineArray,
373 + strokeWeight: 3
374 + });
375 + }
376 + }
377 + }
378 + }
379 + });
380 + });
381 + }
382 + </script>
383 + <script> //값 계산
303 $('button-calculate').click(function () { 384 $('button-calculate').click(function () {
304 385
305 }) 386 })
...@@ -499,11 +580,11 @@ function updateBtn() { ...@@ -499,11 +580,11 @@ function updateBtn() {
499 slidesToShow: 1, 580 slidesToShow: 1,
500 slidesToScroll: 1 581 slidesToScroll: 1
501 } 582 }
502 - } 583 + }]
503 - ] 584 + });
504 - });
505 }); 585 });
506 </script> 586 </script>
587 +
507 </body> 588 </body>
508 589
509 </html> 590 </html>
......