이유제 / CultureGallery

Go to a project
Toggle navigation Toggle navigation pinning
송효섭
14553293 1 parent 0ded4b69

FrontEnd view -> node router와 연결

Inline Side-by-side
Showing 11 changed files with 341 additions and 0 deletions
*
{
margin: 0;
padding: 0;
}
.nav-bar
{
background: #000;
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:relative;
text-align:center;
font-family: sans-serif;
color:#000;
top: 300px;
}
.welcome h1{
font-size: 42px;
margin: 25px;
}
*
{
margin: 0;
padding: 0;
}
header
{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back1.jpg);
height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: 5s;
animation-name: animate;
animation-direction: alternate-reverse;
animation-duration: 30s;
animation-fill-mode:forwards;
animation-iteration-count: infinite;
animation-play-state: running;
animation-timing-function:ease-in-out;
}
@keyframes animate{
0%{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back1.jpg);
}
33%{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back2.jpg);
}
66%{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back3.jpg);
}
}
.nav-bar
{
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:relative;
text-align:center;
font-family: sans-serif;
color:#fff;
top: 300px;
}
.welcome h1{
font-size: 42px;
margin: 25px;
}
.btn{
font-size:18px;
letter-spacing: 2px;
margin:5px;
padding:7px 10px;
text-decoration: none;
border: 1px solid #fff;
}
.btn{
color:#fff;
}
.btn:hover{
background: #fff;
color: #000;
transition: .4s;
}
\ No newline at end of file
<html>
<head>
<title>로그인 페이지</title>
<link rel="stylesheet" href='/stylesheets/login_style.css' type="text/css">
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
</head>
<body>
<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 id="kakao-login-btn"></a>
</div>
</header>
</body>
<script>
Kakao.init('0678e32dab56db1c52ac63ab4ccb7663');
console.log(Kakao.isInitialized());
Kakao.Auth.createLoginButton({
container: '#kakao-login-btn',
success: function (authObj) {
console.log(JSON.stringify(authObj));
alert(JSON.stringify(authObj));//authObj -> 토큰임.
},
fail: function (err) {
alert(JSON.stringify(err));
}
})
</script>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>login page title</title>
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
</head>
<body>
<a id="kakao-login-btn"></a>
<a href="http://developers.kakao.com/logout"></a>
<script>
Kakao.init('0678e32dab56db1c52ac63ab4ccb7663');
console.log(Kakao.isInitialized());
Kakao.Auth.createLoginButton({
container: '#kakao-login-btn',
success: function(authObj){
console.log(JSON.stringify(authObj));
alert(JSON.stringify(authObj));//authObj -> 토큰임.
redirectUrl
},
fail: function(err){
alert(JSON.stringify(err));
}
})
console.log('hi');
Kakao.Link.createDefaultButton({
container: ".kakao-link",
objectType: "feed",
content:{
title: "안녕하세요",
description: "반갑습니다.",
link:{
webUrl: "https://www.naver.com/",
mobileWebUrl: "https://www.naver.com/"
},
},
})
function kakaoLogout(){
Kakao.Auth.logout(function(response){
alert(response+'logout');
Kakao.API.request({
url: '/v1/user/unlink',
success: function(response) {
console.log(response);
},
fail: function(error) {
console.log(error);
console.log("error");
},
})
})
}
</script>
<script>
console.log('hi');
Kakao.Link.createDefaultButton({
container: ".kakao-link",
objectType: "feed",
content:{
title: "안녕하세요",
description: "반갑습니다.",
link:{
webUrl: "https://www.naver.com/",
mobileWebUrl: "https://www.naver.com/"
},
},
})
</script>
<a onclick="kakaoLogout();">카카오 로그아웃</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>login main page title</title>
</head>
</html>
\ No newline at end of file
<html>
<head>
<title>Webpage Design In HTML and CSS</title>
<link rel="stylesheet" href='/stylesheets/main_style.css' type="text/css">
</head>
<body>
<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="#" class="btn btn1">나의 근처 공연</a>
<a href="#" class="btn btn2">검색하기</a>
<a href="login" class="btn btn3">로그인</a>
</div>
</header>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>send page title</title>
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script src="send.js"></script>
</head>
<body>
<a onclick="sendLink()">보내기</a>
</body>
</html>
\ No newline at end of file