<!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="#F2B6C1">
<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="contentWrap">
<h1 class="text_border">봄비</h1>
<div id="seatTable">
</div>
<div id="content" class="text_border">
<p class="align_r">장범준</p>
<p>그녀를 잊어 보려 하지만</p>
<p>비가 또 내려 모르는 이 맘</p>
<p>난 지금 비가 오면 떠올라</p>
<p>니가 더 내려오려는 이 밤</p>
<br/>
<p>주루루 루루루</p>
<p>주루루 루루루</p>
<p>그날의 봄비가 떨어진다</p>
<p></p>
<p>주루루 루루루</p>
<p>주루루 루루루</p>
<p>다시 또 이 비가 떨어진다</p>
<br/>
<p>이제는 아무것도 아닌데</p>
<p>비가 더 내려 보내는 이 맘</p>
<p>언제나 비 내리면 떠올라</p>
<p>비가 또 내려 부르는 이 맘</p>
<br/>
<p>주루루 루루루</p>
<p>주루루 루루루</p>
<p>그날의 봄비가 떨어진다</p>
<p>주루루 루루루</p>
<p>주루루 루루루</p>
<p>다시 또 이 비가 떨어진다</p>
<br/>
<p>우 아름답죠 늘</p>
<p>그저 바래다 줬어</p>
<p>어쩌나 그녀와 이 비를</p>
<p>또 기다리고 있어</p>
<br/>
<p>한 번 더 그녀의</p>
<p>집 앞을 거닐다</p>
<p>기다렸던 비가 떨어지면</p>
<p>한 번 더 그날의</p>
<p>기억이 번지고</p>
<p>사랑했던 비가 떨어진다</p>
</div>
</div>
</div>
<script>
$('#bgmContainer').delay(1600).slideUp(drawerSp);
</script>
</body>
</html>
@charset "UTF-8";
/* Default */
body{
font-family: "맑은고딕", Arial;
font-size: 16px;
margin: 0;
}
/* 티스토리 툴바 제거 */
#tistorytoolbarid{
display:none;
}
/* Classes */
.mark{
border: 1px solid red;
}
.container{
margin:0;
}
.wrap{
margin: 0;
width:100%;
height:100%;
}
.text_border{
color: #ffffff;
text-shadow: -2px 0 4px #F294a0, 0 2px 4px #F294a0, 2px 0 4px #F294a0, 0 -2px 4px #F294a0;
}
.align_l{
text-align:left;
}
.align_r{
text-align:right;
}
/* Elements */
#bodyWrap{
/* 배경이미지 출처: http://8888888888.tistory.com/ */
background-image: url('./images/cherry_blossoms.jpg');
background-color:#D0ECF2;
height: 100vh;
padding: 0;
}
#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;
}
#header{
width: 100%;
height: 32px;
background-color: red;
/* <h1>을 사용했을 시,
header에 (+position) padding, border값을 주지 않거나 0을 주면 자꾸 <body>위에 원인을 알수없는 공백이 생김 (margin도 안됨)
P.S. 상단의 공백은 position을 제거하면 생기는 것으로 보아 <h1>의 태그가 자체적으로 가지는 높이값이 원인이 아닌가 한다.*/
}
#contentWrap{
text-align:center;
overflow:scroll;
height:100%
}
#content{
padding-left: 80px;
padding-right: 80px;
text-align: justify;
}
