우편번호 API 추가 및 css 7차 수정

@@ -346,7 +346,9 @@ select::-ms-expand {
     "question-grade question-grade question-grade input-grade input-grade";
 }
 
-.input-home { grid-area: input-home; }
+.input-home { 
+  display : relative;
+  grid-area: input-home; }
 
 .question-grade { grid-area: question-grade; }
 
@@ -364,6 +366,35 @@ select::-ms-expand {
 }
 
 
+.button-address{
+  width:100px;
+  height:auto;
+  background-color: darkgrey;
+  border: none;
+  color:#fff;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 15px;
+  margin: 4px;
+  cursor: pointer;
+}
+
+#sample4_roadAddress{
+  width: 100%; 
+  height: auto; 
+  line-height : normal; 
+  padding: .8em .5em;
+  font-family: inherit; 
+   border: 1px solid #999; 
+   border-radius: 0; 
+   outline-style: none;
+   -webkit-appearance: none; 
+   -moz-appearance: none; appearance: none;
+
+}
+
+
 #semester{
 	width: 200px;
 	padding: .2em .5em;

@@ -29,14 +29,13 @@
 
 
 
-  <script type="text/css">
+<script type="text/css">
 	window.onload = function(){
 	document.getElementById('btn').onclick = function(){
 		document.getElementById('frm').submit();
 		return false;
 	};
 };
-
 </script>
 
 </head>
@@ -82,12 +81,15 @@
       <div class="grid-container">
         <div class="question-field question-home">어디에 사나요?</div>
         <div class="input-field input-home">
-          <label for="question-input-field"></label>
-          <input type="text" id="start"></div>
+          <input type="button" class="button-address" onclick="sample4_execDaumPostcode()" value="우편번호 찾기"><br>
+          <input type="text" id="sample4_roadAddress" placeholder="도로명주소">
+          <span id="guide" style="color:#999;display:none"></span>   
+        </div>   
         <div class="question-field question-school">무슨 학교에 다니나요?</div>
         <div class="input-school">
-          <label for="question-input-field"></label>
-          <input type="text" id="end">
+          <input type="button" class="button-address" onclick="sample4_execDaumPostcode()" value="우편번호 찾기"><br>
+          <input type="text" id="sample4_roadAddress" placeholder="도로명주소">
+          <span id="guide" style="color:#999;display:none"></span>     
         </div>
         <div class="question-field question-grade">몇학년인가요?</div>
         <div class="input-grade"><div class="custom-select" style="width:208px; margin-right:40px">
@@ -164,6 +166,43 @@
   <script src="magnific-popup/jquery.magnific-popup.min.js"></script>
   <script src="js/jquery.singlePageNav.min.js"></script>
   <script src="js/bootstrap.min.js"></script>
+  <script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
+  <script> //도로명주소
+    function sample4_execDaumPostcode() {
+      new daum.Postcode({
+          oncomplete: function(data) {
+              // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
+
+              // 도로명 주소의 노출 규칙에 따라 주소를 표시한다.
+              // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
+              var roadAddr = data.roadAddress; // 도로명 주소 변수
+
+
+              // 우편번호와 주소 정보를 해당 필드에 넣는다.
+              document.getElementById("sample4_roadAddress").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> //dropdown list
     var x, i, j, l, ll, selElmnt, a, b, c;
     /*look for any elements with the class "custom-select":*/