css 수정

@@ -17,7 +17,8 @@ body {
   margin: 0;
   margin: 0;
   padding: 0;
   padding: 0;
   overflow-x: hidden;
   overflow-x: hidden;
-	font-family:'NanumBarunGothic'
+  font-family:'NanumBarunGothic';
+  min-width: 1200px;
 }
 }
 a {
 a {
   transition: all 0.3s ease;
   transition: all 0.3s ease;
@@ -230,6 +231,78 @@ a:focus {
   background: white;
   background: white;
 }
 }
 
 
+/* Dropdown list*/
+select{
+  -webkit-appearance: none;  /* 네이티브 외형 감추기 */
+  -moz-appearance: none;
+  appearance: none;
+  display:none;
+}
+
+select::-ms-expand {
+  display: none;
+}
+
+.custom-select {
+  position: relative;
+  font-family: Arial;
+}
+
+.custom-select select {
+  display: none; /*hide original SELECT element:*/
+}
+
+.select-selected {
+  background-color: white;
+}
+
+/*style the arrow inside the select element:*/
+.select-selected:after {
+  position: absolute;
+  content: "";
+  top: 14px;
+  right: 10px;
+  width: 0;
+  height: 0;
+  border: 6px solid transparent;
+  border-color: #fff transparent transparent transparent;
+}
+
+/*point the arrow upwards when the select box is open (active):*/
+.select-selected.select-arrow-active:after {
+  border-color: transparent transparent #fff transparent;
+  top: 7px;
+}
+
+/*style the items (options), including the selected item:*/
+.select-items div,.select-selected {
+  color: #333; font-size:15px;
+  text-align: center;
+  border: 1px solid transparent;
+  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
+  cursor: pointer;
+  user-select: none;
+}
+
+/*style items (options):*/
+.select-items {
+  position: absolute;
+  background-color:white;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 99;
+}
+
+/*hide the items when the select box is closed:*/
+.select-hide {
+  display: none;
+}
+
+.select-items div:hover, .same-as-selected {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
 /* Introduction */
 /* Introduction */
 
 
 .tm-section-title {
 .tm-section-title {
@@ -298,7 +371,7 @@ a:focus {
 select::-ms-expand {
 select::-ms-expand {
     display: none;
     display: none;
 }
 }
-출처: https://doolyit.tistory.com/126 [동해둘리의 IT Study]
+
 input{
 input{
   border-radius:5px;
   border-radius:5px;
 }
 }
@@ -309,6 +382,7 @@ input{
 	margin-top:40px;
 	margin-top:40px;
 	border:none;
 	border:none;
   border-radius:5px;
   border-radius:5px;
+  color : -internal-light-dark(black, white);
 }
 }
 
 
 #map-answer{
 #map-answer{

@@ -94,8 +94,9 @@
           </div>
           </div>
           <div class="container question-field">
           <div class="container question-field">
             <div class="question-text">몇 학년인가요?</div>
             <div class="question-text">몇 학년인가요?</div>
-            <div class="question-input">
-              <select name="semester" id="semester">
+            <div class="custom-select" style="width:208px; margin-right:42px">
+              <select>
+                <option value="0">1학년 1학기</option>
                 <option value="sem-1-1">1학년 1학기</option>
                 <option value="sem-1-1">1학년 1학기</option>
 								<option value="sem-1-2">1학년 2학기</option>
 								<option value="sem-1-2">1학년 2학기</option>
 								<option value="sem-2-1">2학년 1학기</option>
 								<option value="sem-2-1">2학년 1학기</option>
@@ -115,12 +116,136 @@
 <br>
 <br>
 	    
 	    
 <div id="map" style="width:700px;height:700px;"></div>
 <div id="map" style="width:700px;height:700px;"></div>
-<script>
-var btn = document.querySelector('button');
+	<div class="answer-field">
+          한번 갈 때마다 ...<br>
+          <span class="answer-highlight">n</span> 시간 <span class="answer-highlight">n</span> 분 <br>
+          <span class="answer-highlight">n</span> 원 <br>
+        </div>
+      </div>
+      <div class="row">
+        <div id="list-answer">
+          <div class="answer-field" id="answer-how-many-hours">
+            지금까지 <span class="answer-highlight" id="since">?</span>시간을 길에서 보내셨군요<br>
+            졸업까지 앞으로 <span class="answer-highlight" id="until">?</span>시간은 더 길에서 보내시면 됩니다.<br>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="answer-detail-question">
+          이 시간에 알바를 했다면? <br>
+          교통비로 국밥 <br>
+          이 거리라면 에베레스트 등반을 <br>
+          지구를
+        </div>
+        <div class="answer-detail-answer">
+          <span id = "salary">?</span>원<br>
+          <span id = "dish">?</span>그릇<br>
+          <span id = "everest">?</span>번이나...<br>
+          <span id = "earth">?</span>바퀴나 돌아요<br><br><br>
+        </div>
+      </div>
+    </div>
+    <footer class="text-center small tm-footer">
+      <p class="mb-0">
+        Copyright &copy; 2020 TongGilMut
+
+        - Design: <a rel="nofollow" href="https://github.com/wjdwl001" class="tm-footer-link">Joung Jiwon</a>
+      </p>
+    </footer>
+  </section>
+
+
+  <script src="js/jquery-1.9.1.min.js"></script>
+  <script src="slick/slick.min.js"></script>
+  <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> //dropdown list
+    var x, i, j, l, ll, selElmnt, a, b, c;
+    /*look for any elements with the class "custom-select":*/
+    x = document.getElementsByClassName("custom-select");
+    l = x.length;
+    for (i = 0; i < l; i++) {
+      selElmnt = x[i].getElementsByTagName("select")[0];
+      ll = selElmnt.length;
+      /*for each element, create a new DIV that will act as the selected item:*/
+      a = document.createElement("DIV");
+      a.setAttribute("class", "select-selected");
+      a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
+      x[i].appendChild(a);
+      /*for each element, create a new DIV that will contain the option list:*/
+      b = document.createElement("DIV");
+      b.setAttribute("class", "select-items select-hide");
+      for (j = 1; j < ll; j++) {
+        /*for each option in the original select element,
+        create a new DIV that will act as an option item:*/
+        c = document.createElement("DIV");
+        c.innerHTML = selElmnt.options[j].innerHTML;
+        c.addEventListener("click", function(e) {
+            /*when an item is clicked, update the original select box,
+            and the selected item:*/
+            var y, i, k, s, h, sl, yl;
+            s = this.parentNode.parentNode.getElementsByTagName("select")[0];
+            sl = s.length;
+            h = this.parentNode.previousSibling;
+            for (i = 0; i < sl; i++) {
+              if (s.options[i].innerHTML == this.innerHTML) {
+                s.selectedIndex = i;
+                h.innerHTML = this.innerHTML;
+                y = this.parentNode.getElementsByClassName("same-as-selected");
+                yl = y.length;
+                for (k = 0; k < yl; k++) {
+                  y[k].removeAttribute("class");
+                }
+                this.setAttribute("class", "same-as-selected");
+                break;
+              }
+            }
+            h.click();
+        });
+        b.appendChild(c);
+      }
+      x[i].appendChild(b);
+      a.addEventListener("click", function(e) {
+          /*when the select box is clicked, close any other select boxes,
+          and open/close the current select box:*/
+          e.stopPropagation();
+          closeAllSelect(this);
+          this.nextSibling.classList.toggle("select-hide");
+          this.classList.toggle("select-arrow-active");
+        });
+    }
+    function closeAllSelect(elmnt) {
+      /*a function that will close all select boxes in the document,
+      except the current select box:*/
+      var x, y, i, xl, yl, arrNo = [];
+      x = document.getElementsByClassName("select-items");
+      y = document.getElementsByClassName("select-selected");
+      xl = x.length;
+      yl = y.length;
+      for (i = 0; i < yl; i++) {
+        if (elmnt == y[i]) {
+          arrNo.push(i)
+        } else {
+          y[i].classList.remove("select-arrow-active");
+        }
+      }
+      for (i = 0; i < xl; i++) {
+        if (arrNo.indexOf(i)) {
+          x[i].classList.add("select-hide");
+        }
+      }
+    }
+    /*if the user clicks anywhere outside the select box,
+    then close all select boxes:*/
+    document.addEventListener("click", closeAllSelect);
+  </script>
+  <script> //API
+    var btn = document.querySelector('button');
     
     
-btn.addEventListener('click', updateBtn);
+    btn.addEventListener('click', updateBtn);
     
     
-function updateBtn() {
+    function updateBtn() {
       var start = document.getElementById('start').value;
       var start = document.getElementById('start').value;
       var end = document.getElementById('end').value;
       var end = document.getElementById('end').value;
       naver.maps.Service.geocode({
       naver.maps.Service.geocode({
@@ -253,53 +378,9 @@ function updateBtn() {
       }
       }
       });
       });
       });
       });
-}
-</script>
-	    
-        
-	<div class="answer-field">
-          한번 갈 때마다 ...<br>
-          <span class="answer-highlight">n</span> 시간 <span class="answer-highlight">n</span> 분 <br>
-          <span class="answer-highlight">n</span> 원 <br>
-        </div>
-      </div>
-      <div class="row">
-        <div id="list-answer">
-          <div class="answer-field" id="answer-how-many-hours">
-            지금까지 <span class="answer-highlight" id="since">?</span>시간을 길에서 보내셨군요<br>
-            졸업까지 앞으로 <span class="answer-highlight" id="until">?</span>시간은 더 길에서 보내시면 됩니다.<br>
-          </div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="answer-detail-question">
-          이 시간에 알바를 했다면? <br>
-          교통비로 국밥 <br>
-          이 거리라면 에베레스트 등반을 <br>
-          지구를
-        </div>
-        <div class="answer-detail-answer">
-          <span id = "salary">?</span>원<br>
-          <span id = "dish">?</span>그릇<br>
-          <span id = "everest">?</span>번이나...<br>
-          <span id = "earth">?</span>바퀴나 돌아요<br><br><br>
-        </div>
-      </div>
-    </div>
-    <footer class="text-center small tm-footer">
-      <p class="mb-0">
-        Copyright &copy; 2020 TongGilMut
-
-        - Design: <a rel="nofollow" href="https://github.com/wjdwl001" class="tm-footer-link">Joung Jiwon</a>
-      </p>
-    </footer>
-  </section>
-  <script src="js/jquery-1.9.1.min.js"></script>
-  <script src="slick/slick.min.js"></script>
-  <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>
+    }
+  </script>
+  <script> //값 계산
     $('button-calculate').click(function () {
     $('button-calculate').click(function () {
 
 
     })
     })
@@ -499,11 +580,11 @@ function updateBtn() {
               slidesToShow: 1,
               slidesToShow: 1,
               slidesToScroll: 1
               slidesToScroll: 1
             }
             }
-          }
-        ]
+          }]
        });
        });
     });
     });
   </script>
   </script>
+  
 </body>
 </body>
 
 
 </html>
 </html>