이유제 / CultureGallery

Go to a project
Toggle navigation Toggle navigation pinning
YujeLee
e270a1eb 1 parent db484063

mapPage 기능 보강 및 css 기능 test

Expand all
Inline Side-by-side
Showing 3 changed files with 88 additions and 6 deletions
This diff is collapsed. Click to expand it.
1 +
2 +*
3 +{
4 + margin: 0;
5 + padding: 0;
6 + box-sizing: border-box;
7 + font-family: 'Poppins', sans-serif;
8 +}
9 +
10 +.nav-bar
11 +{
12 + position: relative;
13 + background: rgb(0,0,0,0.5);
14 + height: 80px;
15 +}
16 +
17 +.logo{
18 + background-color: #fff;
19 + margin: 10px 50px;
20 + height: 60px;
21 +}
22 +
23 +.menu{
24 + float: right;
25 + list-style: none;
26 + margin:20px;
27 +}
28 +
29 +.menu li{
30 + display: inline-block;
31 + margin: 10px 5px;
32 +}
33 +
34 +.menu li a{
35 + text-decoration: none;
36 + color: #fff;
37 + padding: 5px 10px;
38 + font-family: sans-serif;
39 + letter-spacing: 2px;
40 + border: 1px solid #fff;
41 +}
42 +
43 +.menu li a:hover{
44 + background: #fff;
45 + transition: .4s;
46 + color: #000;
47 +}
48 +
49 +.welcome{
50 + position: absolute;
51 + top:20%;
52 + left: 50%;
53 + width: 700px; height: 160px;
54 +
55 + text-align:center;
56 + font-family: sans-serif;
57 + color:#000;
58 +}
...\ No newline at end of file ...\ No newline at end of file
...@@ -3,17 +3,41 @@ ...@@ -3,17 +3,41 @@
3 <head> 3 <head>
4 <title> 4 <title>
5 <%= title%> 5 <%= title%>
6 -
7 </title> 6 </title>
7 + <link rel="stylesheet" href='/stylesheets/mapPage_style.css' type="text/css">
8 +
8 </head> 9 </head>
9 <body> 10 <body>
10 - <p style="margin-top:-12px"> 11 + <header>
11 - <b>Chrome 브라우저는 https 환경에서만 geolocation을 지원합니다.</b> 참고해주세요. 12 + <div class="nav-bar">
12 - </p> 13 + <img src="../images/camera.png" alt="" class="logo">
13 - <div id="map" style="width:500px;height:350px;"></div> 14 + <ul class="menu">
15 + <li><a href="">Home</a></li>
16 + <li><a href="">Services</a></li>
17 + <li><a href="">Portfolio</a></li>
18 + <li><a href="">Testimonimal</a></li>
19 + <li><a href="">Career</a></li>
20 + <li><a href="">Contact</a></li>
21 + </ul>
22 + </div>
23 + <div class="welcome">
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>
29 + </header>
30 +
31 + <div id="map"
32 + style="
33 + position: absolute;
34 + border-radius: 5%;
35 + width:500px; height:350px;
36 + top:50%;
37 + left: 50%;
38 + "></div>
14 <div> 39 <div>
15 </div> 40 </div>
16 - <div>hi</div>
17 <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c"></script> 41 <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c"></script>
18 <script> 42 <script>
19 var mapContainer = document.getElementById('map'), // 지도를 표시할 div 43 var mapContainer = document.getElementById('map'), // 지도를 표시할 div
......