YujeLee

maptest css 수정

...@@ -6,7 +6,9 @@ ...@@ -6,7 +6,9 @@
6 box-sizing: border-box; 6 box-sizing: border-box;
7 font-family: 'Poppins', sans-serif; 7 font-family: 'Poppins', sans-serif;
8 } 8 }
9 - 9 +body{
10 + background-color: #212620;
11 +}
10 .nav-bar 12 .nav-bar
11 { 13 {
12 position: relative; 14 position: relative;
...@@ -48,11 +50,21 @@ ...@@ -48,11 +50,21 @@
48 50
49 .welcome{ 51 .welcome{
50 position: absolute; 52 position: absolute;
53 + font-size: 30px;
54 + width: 100%;
51 top:20%; 55 top:20%;
52 left: 50%; 56 left: 50%;
53 - width: 700px; height: 160px; 57 + transform: translate(-50%,-50%);
58 + margin-top: 40px;
54 59
55 text-align:center; 60 text-align:center;
56 font-family: sans-serif; 61 font-family: sans-serif;
57 - color:#000; 62 + color:#fff;
63 +}
64 +.map-box{
65 + width:100%
66 +}
67 +.empty-box{
68 + position:absolute;
69 + bottom:0%;
58 } 70 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -21,22 +21,21 @@ ...@@ -21,22 +21,21 @@
21 </ul> 21 </ul>
22 </div> 22 </div>
23 <div class="welcome"> 23 <div class="welcome">
24 - <h1>어떤 공연을 찾으시나요?</h1> 24 + <h1>당신 주위에서 열릴 공연들입니다</h1>
25 - <a href="mappage" class="btn btn1">나의 근처 공연</a>
26 - <a href="#" class="btn btn2">검색하기</a>
27 - <a href="login" class="btn btn3">로그인</a>
28 </div> 25 </div>
29 </header> 26 </header>
30 - 27 + <div class="map-box">
31 <div id="map" 28 <div id="map"
32 style=" 29 style="
33 position: absolute; 30 position: absolute;
34 border-radius: 5%; 31 border-radius: 5%;
35 width:500px; height:350px; 32 width:500px; height:350px;
36 top:50%; 33 top:50%;
37 - left: 50%; 34 + left: 30%;
38 "></div> 35 "></div>
39 - <div> 36 + </div>
37 + <div class="empty-box">
38 +
40 </div> 39 </div>
41 <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c"></script> 40 <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c"></script>
42 <script> 41 <script>
...@@ -58,7 +57,7 @@ if (navigator.geolocation) { ...@@ -58,7 +57,7 @@ if (navigator.geolocation) {
58 lon = position.coords.longitude; // 경도 57 lon = position.coords.longitude; // 경도
59 58
60 var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다 59 var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
61 - message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다 60 + message = '<div style="padding:5px;">내 위치</div>'; // 인포윈도우에 표시될 내용입니다
62 displayMarker(locPosition, message); 61 displayMarker(locPosition, message);
63 62
64 var data=[]; 63 var data=[];
......