Joung Jiwon

css 9차 수정 & 함수 연결 조정

...@@ -381,7 +381,8 @@ select::-ms-expand { ...@@ -381,7 +381,8 @@ select::-ms-expand {
381 cursor: pointer; 381 cursor: pointer;
382 } 382 }
383 383
384 -#sample4_roadAddress{ 384 +#home-address,
385 +#school-address{
385 width: 100%; 386 width: 100%;
386 height: auto; 387 height: auto;
387 line-height : normal; 388 line-height : normal;
...@@ -392,7 +393,6 @@ select::-ms-expand { ...@@ -392,7 +393,6 @@ select::-ms-expand {
392 outline-style: none; 393 outline-style: none;
393 -webkit-appearance: none; 394 -webkit-appearance: none;
394 -moz-appearance: none; appearance: none; 395 -moz-appearance: none; appearance: none;
395 -
396 } 396 }
397 397
398 398
...@@ -493,13 +493,6 @@ iframe{ ...@@ -493,13 +493,6 @@ iframe{
493 padding-top: 20px; 493 padding-top: 20px;
494 } 494 }
495 495
496 -.odsay{
497 - position : relative;
498 - float:right;
499 - right:-110px;
500 - bottom:-285px;
501 -}
502 -
503 .answer-grid-container { 496 .answer-grid-container {
504 display: grid; 497 display: grid;
505 margin:30px 30px; 498 margin:30px 30px;
......
...@@ -107,8 +107,7 @@ ...@@ -107,8 +107,7 @@
107 </div></div> 107 </div></div>
108 </div> 108 </div>
109 <a href="#result" class="button2 text-center tm-down-arrow-link"> 109 <a href="#result" class="button2 text-center tm-down-arrow-link">
110 - <button style= "color:black" class="fas fa-3x fa-caret-down tm-down-arrow" type="button" onclick="semester();return false;">계산해보기 110 + <button style= "color:black" class="fas fa-3x fa-caret-down tm-down-arrow" type="button" onclick="semester();return false;">계산해보기</button>
111 - </button>
112 </a> 111 </a>
113 </div> 112 </div>
114 </section> 113 </section>
...@@ -116,13 +115,13 @@ ...@@ -116,13 +115,13 @@
116 115
117 <section id="result"> 116 <section id="result">
118 <div class="answer-grid-container"> 117 <div class="answer-grid-container">
119 - <div class="map" id="map" style="width:500px;height:300px;""> 118 + <div class="map" id="map" style="width:500px;height:300px;""></div>
120 - <img class="odsay" src="ODsay.png"> 119 +
121 - </div>
122 <div class="answer-field" style="width:300px;"><br><br>한번 갈 때마다 ...<br> 120 <div class="answer-field" style="width:300px;"><br><br>한번 갈 때마다 ...<br>
123 <span class="answer-highlight" id="hour">?</span> 시간 121 <span class="answer-highlight" id="hour">?</span> 시간
124 <span class="answer-highlight" id="min">?</span><br> 122 <span class="answer-highlight" id="min">?</span><br>
125 <span class="answer-highlight" id="dist">?</span> km <br> 123 <span class="answer-highlight" id="dist">?</span> km <br>
124 + <img class="odsay" src="ODsay.png">
126 </div> 125 </div>
127 126
128 <div class="list-answer-field"> 127 <div class="list-answer-field">
...@@ -180,24 +179,23 @@ ...@@ -180,24 +179,23 @@
180 179
181 // 우편번호와 주소 정보를 해당 필드에 넣는다. 180 // 우편번호와 주소 정보를 해당 필드에 넣는다.
182 document.getElementById("home-address").value = roadAddr; 181 document.getElementById("home-address").value = roadAddr;
182 + }
183 + }).open();
184 + }
185 + </script>
186 + <script>
187 + function school_execDaumPostcode() {
188 + new daum.Postcode({
189 + oncomplete: function(data) {
190 + // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
183 191
184 - // 참고항목 문자열이 있을 경우 해당 필드에 넣는다. 192 + // 도로명 주소의 노출 규칙에 따라 주소를 표시한다.
193 + // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
194 + var roadAddr = data.roadAddress; // 도로명 주소 변수
185 195
186 - var guideTextBox = document.getElementById("guide");
187 - // 사용자가 '선택 안함'을 클릭한 경우, 예상 주소라는 표시를 해준다.
188 - if(data.autoRoadAddress) {
189 - var expRoadAddr = data.autoRoadAddress + extraRoadAddr;
190 - guideTextBox.innerHTML = '(예상 도로명 주소 : ' + expRoadAddr + ')';
191 - guideTextBox.style.display = 'block';
192 196
193 - } else if(data.autoJibunAddress) { 197 + // 우편번호와 주소 정보를 해당 필드에 넣는다.
194 - var expJibunAddr = data.autoJibunAddress; 198 + document.getElementById("school-address").value = roadAddr;
195 - guideTextBox.innerHTML = '(예상 지번 주소 : ' + expJibunAddr + ')';
196 - guideTextBox.style.display = 'block';
197 - } else {
198 - guideTextBox.innerHTML = '';
199 - guideTextBox.style.display = 'none';
200 - }
201 } 199 }
202 }).open(); 200 }).open();
203 } 201 }
...@@ -289,8 +287,8 @@ ...@@ -289,8 +287,8 @@
289 btn.addEventListener('click', updateBtn); 287 btn.addEventListener('click', updateBtn);
290 288
291 function updateBtn() { 289 function updateBtn() {
292 - var start = document.getElementById('start').value; 290 + var start = document.getElementById('home-address').value;
293 - var end = document.getElementById('end').value; 291 + var end = document.getElementById('school-address').value;
294 naver.maps.Service.geocode({ 292 naver.maps.Service.geocode({
295 address: start 293 address: start
296 294
...@@ -424,10 +422,6 @@ ...@@ -424,10 +422,6 @@
424 } 422 }
425 </script> 423 </script>
426 <script> //값 계산 424 <script> //값 계산
427 - $('button-calculate').click(function () {
428 -
429 - })
430 -
431 function semester() { 425 function semester() {
432 var target = document.getElementById("semester").value; 426 var target = document.getElementById("semester").value;
433 var input = 0 427 var input = 0
......