maptest css 수정

@@ -6,7 +6,9 @@
   box-sizing: border-box;
   box-sizing: border-box;
   font-family: 'Poppins', sans-serif;
   font-family: 'Poppins', sans-serif;
 }
 }
-
+body{
+    background-color: #212620;
+}
 .nav-bar
 .nav-bar
 {
 {
     position: relative;
     position: relative;
@@ -48,11 +50,21 @@
 
 
 .welcome{
 .welcome{
     position: absolute;
     position: absolute;
+    font-size: 30px;
+    width: 100%;
     top:20%;
     top:20%;
     left: 50%;
     left: 50%;
-    width: 700px; height: 160px;
+    transform: translate(-50%,-50%);
+    margin-top: 40px;
 
 
     text-align:center;
     text-align:center;
     font-family: sans-serif;
     font-family: sans-serif;
-    color:#000;
+    color:#fff;
+}
+.map-box{
+    width:100%
+}
+.empty-box{
+    position:absolute;
+    bottom:0%;
 }
 }
\ No newline at end of file

@@ -21,23 +21,22 @@
                 </ul>
                 </ul>
             </div>
             </div>
             <div class="welcome">
             <div class="welcome">
-                <h1>어떤 공연을 찾으시나요?</h1>
-                <a href="mappage" class="btn btn1">나의 근처 공연</a>
-                <a href="#" class="btn btn2">검색하기</a>
-                <a href="login" class="btn btn3">로그인</a>
+                <h1>당신 주위에서 열릴 공연들입니다</h1>
             </div>
             </div>
         </header>
         </header>
-            
-    <div id="map" 
-    style="    
-    position: absolute;
-    border-radius: 5%;
-    width:500px; height:350px;
-    top:50%;
-    left: 50%;
-    "></div>
-        <div>
-        </div>
+    <div class="map-box">
+        <div id="map" 
+        style="    
+        position: absolute;
+        border-radius: 5%;
+        width:500px; height:350px;
+        top:50%;
+        left: 30%;
+        "></div>
+    </div>       
+    <div class="empty-box">
+
+    </div>
         <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c"></script>
         <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c"></script>
 <script>
 <script>
 var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
 var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
@@ -58,7 +57,7 @@ if (navigator.geolocation) {
             lon = position.coords.longitude; // 경도
             lon = position.coords.longitude; // 경도
         
         
         var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
         var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
-            message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다
+            message = '<div style="padding:5px;">내 위치</div>'; // 인포윈도우에 표시될 내용입니다
             displayMarker(locPosition, message);
             displayMarker(locPosition, message);
             
             
                     var data=[];                
                     var data=[];                
@@ -84,7 +83,7 @@ if (navigator.geolocation) {
 
 
             
             
       });
       });
-    
+      
 } else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
 } else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
     
     
     var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),    
     var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),