<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="hepheir">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--크롬 주소 표시줄 색상 변경-->
<meta name="theme-color" content="#6BA5F2">
<title>Project UNIT</title>
<link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
body{
font-family: "맑은고딕", Arial;
margin: 0;
}
</style>
<script>
//배경음악 플레이어 숨기기/보이기
var drawerSp = 640;
var bgmCount = 0;
function bgmDrawer(){
bgmCount++;
switch(bgmCount%2){
case 0:
$('#bgmContainer').slideUp(drawerSp);
break;
case 1:
$('#bgmContainer').slideDown(drawerSp);
break;
}
}
</script>
</head>
<body>
<div id="bodyWrap" class="wrap">
<!-- 배경음악 플레이어 -->
<div id="bgmWrap" class="container">
<div id="bgmContainer" class="container">
<iframe class="wrap" src="https://www.youtube.com/embed/playlist?list=PLSGdYLt-DLMUb6kYq5w0qA6gLvplRAptE&autoplay=1" frameborder="0"></iframe>
</div>
<div id="bgmIcon" class="container" onclick="bgmDrawer()"></div>
</div>
<!-- 헤더 -->
<div id="Header" class="container">
</div>
<div id="content">
스<br/>
크<br/>
롤<br/>
을<br/>
<br/>
내<br/>
려<br/>
도<br/>
<br/>
B<br/>
<a href="./admin/skin/edit">
G<br/>
M<br/>
</a>
박<br/>
스<br/>
는<br/>
<br/>
계<br/>
속<br/>
<br/>
그<br/>
<br/>
자<br/>
리<br/>
에<br/>
.<br/>
.<br/>
.<br/>
</div>
</div>
<script>
$('#bgmContainer').delay(3200).slideUp(drawerSp);
</script>
</body>
</html>
/*
=================================================
*
* 색상 배치표 참고
* https://color.adobe.com/ko/Color-%ED%85%8C%EB%A7%88-1-color-theme-8023844/edit/?copy=true&base=2&rule=Custom&selected=0&name=%EB%8B%A4%EC%9D%8C%EC%9D%98%20%EB%B3%B5%EC%82%AC%EB%B3%B8%20Color%20%ED%85%8C%EB%A7%88%201&mode=rgb&rgbvalues=0.4196078431372549,0.6470588235294118,0.9490196078431372,0.5019607843137255,0.7411764705882353,0.9490196078431372,0.6745098039215687,0.8431372549019608,0.9490196078431372,0.8156862745098039,0.9254901960784314,0.9490196078431372,0.4705882352941176,0.6509803921568628,0.2&swatchOrder=0,1,2,3,4
*
=================================================
*/
@charset "UTF-8";
a{
text-decoration:none;
color:black;
}
/* 티스토리 툴바 제거 */
#tistorytoolbarid{
display:none;
}
/* Elements */
#bodyWrap{
/* 배경이미지 출처: http://8888888888.tistory.com/ */
background-image: url('./images/cherry_blossoms.jpg');
background-color:#D0ECF2;
height: 100vh;
}
#bgmWrap{
position:fixed;
width:100%;
}
#bgmContainer{
background-color:#F2B6C1;
height: 240px;
display:block;
padding-bottom: 4px;
}
#bgmIcon{
width: 90px;
height:30px;
background-image:url("./images/bgm_icon_spring.png");
background-size:cover;
background-position: center;
float: right;
}
p.title{
color:#000000;
font-size: 30px;
text-shadow: 0 0 8px pink;
}
#content{
font-size: 48px;
text-align:center;
}
/* Classes */
.mark{
border: 1px solid red;
}
.container{
margin:0;
}
.wrap{
margin: 0;
width:100%;
height:100%;
}
