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

@@ -381,18 +381,18 @@ select::-ms-expand {
   cursor: pointer;
   cursor: pointer;
 }
 }
 
 
-#sample4_roadAddress{
+#home-address,
+#school-address{
   width: 100%; 
   width: 100%; 
   height: auto; 
   height: auto; 
   line-height : normal; 
   line-height : normal; 
   padding: .8em .5em;
   padding: .8em .5em;
   font-family: inherit; 
   font-family: inherit; 
-   border: 1px solid #999; 
-   border-radius: 0; 
-   outline-style: none;
-   -webkit-appearance: none; 
-   -moz-appearance: none; appearance: none;
-
+  border: 1px solid #999; 
+  border-radius: 0; 
+  outline-style: none;
+  -webkit-appearance: none; 
+  -moz-appearance: none; appearance: none;
 }
 }
 
 
 
 
@@ -493,13 +493,6 @@ iframe{
   padding-top: 20px;
   padding-top: 20px;
 }
 }
 
 
-.odsay{
-  position : relative;
-  float:right;
-  right:-110px;
-  bottom:-285px;
-}
-
 .answer-grid-container {
 .answer-grid-container {
   display: grid;
   display: grid;
   margin:30px 30px;
   margin:30px 30px;

@@ -107,8 +107,7 @@
         </div></div>
         </div></div>
       </div>
       </div>
         <a href="#result" class="button2 text-center tm-down-arrow-link">
         <a href="#result" class="button2 text-center tm-down-arrow-link">
-          <button style= "color:black" class="fas fa-3x fa-caret-down tm-down-arrow" type="button" onclick="semester();return false;">계산해보기
-            </button>
+          <button style= "color:black" class="fas fa-3x fa-caret-down tm-down-arrow" type="button" onclick="semester();return false;">계산해보기</button>
         </a>
         </a>
       </div>
       </div>
     </section>
     </section>
@@ -116,18 +115,18 @@
 
 
     <section id="result">
     <section id="result">
       <div class="answer-grid-container">
       <div class="answer-grid-container">
-        <div class="map" id="map" style="width:500px;height:300px;"">
-          <img class="odsay" src="ODsay.png">
-        </div>
+        <div class="map" id="map" style="width:500px;height:300px;""></div>
+        
         <div class="answer-field" style="width:300px;"><br><br>한번 갈 때마다 ...<br>
         <div class="answer-field" style="width:300px;"><br><br>한번 갈 때마다 ...<br>
           <span class="answer-highlight" id="hour">?</span> 시간 
           <span class="answer-highlight" id="hour">?</span> 시간 
           <span class="answer-highlight" id="min">?</span> 분 <br>
           <span class="answer-highlight" id="min">?</span> 분 <br>
           <span class="answer-highlight" id="dist">?</span> km <br>
           <span class="answer-highlight" id="dist">?</span> km <br>
+          <img class="odsay" src="ODsay.png">
         </div>
         </div>
 
 
         <div class="list-answer-field">
         <div class="list-answer-field">
           지금까지 <span class="answer-highlight" id="since">?</span>시간을 길에서 보내셨군요<br>
           지금까지 <span class="answer-highlight" id="since">?</span>시간을 길에서 보내셨군요<br>
-            졸업까지 앞으로 <span class="answer-highlight" id="until">?</span>시간은 더 길에서 보내시면 됩니다.<br>
+          졸업까지 앞으로 <span class="answer-highlight" id="until">?</span>시간은 더 길에서 보내시면 됩니다.<br>
         </div>
         </div>
         <div class="detail-answer-field">
         <div class="detail-answer-field">
           <div class="detail-answer-box salary-field">이 시간에 알바를 했다면?<br>
           <div class="detail-answer-box salary-field">이 시간에 알바를 했다면?<br>
@@ -180,24 +179,23 @@
 
 
               // 우편번호와 주소 정보를 해당 필드에 넣는다.
               // 우편번호와 주소 정보를 해당 필드에 넣는다.
               document.getElementById("home-address").value = roadAddr;
               document.getElementById("home-address").value = roadAddr;
-              
-              // 참고항목 문자열이 있을 경우 해당 필드에 넣는다.
-          
-              var guideTextBox = document.getElementById("guide");
-              // 사용자가 '선택 안함'을 클릭한 경우, 예상 주소라는 표시를 해준다.
-              if(data.autoRoadAddress) {
-                  var expRoadAddr = data.autoRoadAddress + extraRoadAddr;
-                  guideTextBox.innerHTML = '(예상 도로명 주소 : ' + expRoadAddr + ')';
-                  guideTextBox.style.display = 'block';
-
-              } else if(data.autoJibunAddress) {
-                  var expJibunAddr = data.autoJibunAddress;
-                  guideTextBox.innerHTML = '(예상 지번 주소 : ' + expJibunAddr + ')';
-                  guideTextBox.style.display = 'block';
-              } else {
-                  guideTextBox.innerHTML = '';
-                  guideTextBox.style.display = 'none';
-              }
+          }
+      }).open();
+    }
+  </script>
+  <script>
+    function school_execDaumPostcode() {
+      new daum.Postcode({
+          oncomplete: function(data) {
+              // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
+
+              // 도로명 주소의 노출 규칙에 따라 주소를 표시한다.
+              // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
+              var roadAddr = data.roadAddress; // 도로명 주소 변수
+
+
+              // 우편번호와 주소 정보를 해당 필드에 넣는다.
+              document.getElementById("school-address").value = roadAddr;
           }
           }
       }).open();
       }).open();
   }
   }
@@ -289,8 +287,8 @@
     btn.addEventListener('click', updateBtn);
     btn.addEventListener('click', updateBtn);
 
 
     function updateBtn() {
     function updateBtn() {
-      var start = document.getElementById('start').value;
-      var end = document.getElementById('end').value;
+      var start = document.getElementById('home-address').value;
+      var end = document.getElementById('school-address').value;
       naver.maps.Service.geocode({
       naver.maps.Service.geocode({
         address: start
         address: start
 
 
@@ -424,10 +422,6 @@
     }
     }
   </script>
   </script>
   <script> //값 계산
   <script> //값 계산
-    $('button-calculate').click(function () {
-
-    })
-
     function semester() {
     function semester() {
       var target = document.getElementById("semester").value;
       var target = document.getElementById("semester").value;
       var input = 0
       var input = 0