이유제 / 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.
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.nav-bar
{
position: relative;
background: rgb(0,0,0,0.5);
height: 80px;
}
.logo{
background-color: #fff;
margin: 10px 50px;
height: 60px;
}
.menu{
float: right;
list-style: none;
margin:20px;
}
.menu li{
display: inline-block;
margin: 10px 5px;
}
.menu li a{
text-decoration: none;
color: #fff;
padding: 5px 10px;
font-family: sans-serif;
letter-spacing: 2px;
border: 1px solid #fff;
}
.menu li a:hover{
background: #fff;
transition: .4s;
color: #000;
}
.welcome{
position: absolute;
top:20%;
left: 50%;
width: 700px; height: 160px;
text-align:center;
font-family: sans-serif;
color:#000;
}
\ No newline at end of file
......@@ -3,17 +3,41 @@
<head>
<title>
<%= title%>
</title>
<link rel="stylesheet" href='/stylesheets/mapPage_style.css' type="text/css">
</head>
<body>
<p style="margin-top:-12px">
<b>Chrome 브라우저는 https 환경에서만 geolocation을 지원합니다.</b> 참고해주세요.
</p>
<div id="map" style="width:500px;height:350px;"></div>
<header>
<div class="nav-bar">
<img src="../images/camera.png" alt="" class="logo">
<ul class="menu">
<li><a href="">Home</a></li>
<li><a href="">Services</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Testimonimal</a></li>
<li><a href="">Career</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
<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>
</div>
</header>
<div id="map"
style="
position: absolute;
border-radius: 5%;
width:500px; height:350px;
top:50%;
left: 50%;
"></div>
<div>
</div>
<div>hi</div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
......