map table 생성

@@ -160,10 +160,9 @@ header
 
 .welcome{
     position: absolute;
-    top:50%;
+    top:20vh;
     left: 50%;
     width: 700px; height: 160px;
-    margin-top: -80px;
     margin-left: -350px;
     text-align:center;
     font-family: sans-serif;

@@ -7,7 +7,7 @@
   font-family: 'Poppins', sans-serif;
 }
 body{
-    background-color: #212620;
+    background-color: #fff;
 }
 .nav-bar
 {
@@ -52,14 +52,12 @@ body{
     position: absolute;
     font-size: 30px;
     width: 100%;
-    top:20%;
-    left: 50%;
-    transform: translate(-50%,-50%);
+    height: 50px;
     margin-top: 40px;
 
     text-align:center;
     font-family: sans-serif;
-    color:#fff;
+    color:#000;
 }
 .map-box{
     width:100%

@@ -20,25 +20,42 @@
                     <li><a href="">Contact</a></li>
                 </ul>
             </div>
-            <div class="welcome">
-                <h1>당신 주위에서 열릴 공연들입니다</h1>
-            </div>
+            
         </header>
-    <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 class="welcome">
+            <h1>당신 주위에서 열릴 공연들입니다</h1>
+        </div>
+        <div class="map-box">
+            <div id="map" 
+            style="    
+            position: absolute;
+            border-radius: 5%;
+            width:500px; height:60vh;
+            top:40vh;
+            left: 50%;
+            margin-left:-250px;
+            margin-top:-30x;
+            "></div>
+            <div style="position:absolute; top: 110vh; color: #000;">
+                <h2 > 주변 공연 </h2>
+            </div>
+        </div>
+        <table style="position: absolute; top: 120vh;">
+            <tr>
+                <th>id</th>
+                <th>행사 이름</th>
+                <th>시작 날짜</th>
+            </tr>
+            <tbody id="map-data">
+
+            </tbody>
+        </table>
+
+       
 
-    </div>
         <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c"></script>
 <script>
+    var dataContainer=document.getElementById('map-data');
 var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
     mapOption = { 
         center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
@@ -76,8 +93,16 @@ if (navigator.geolocation) {
                             displayShowMarker(locP,message);
                             
                             console.log("near_show:"+data[i]);
+                            var row = `<tr>
+                                    <td> ${data[i][0]}</td>
+                                    <td> ${data[i][1]}</td>
+                                    <td> ${data[i][2]}</td>
+                                    
+                                  </tr>`
+                                dataContainer.innerHTML+=row;
                         }
-                    }   
+                    }
+ 
    
         // 마커와 인포윈도우를 표시합니다