<!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>
<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">
<!-- BGM 영역 시작 -->
<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>
<!-- BGM 영역 끝 -->
</div>
<!-- 헤더 영역 시작 -->
<div id="header">
워후
<!-- 헤더 영역 끝 -->
</div>
<!-- content 시작 -->
<div id="content">
<script>
for(i=0;i<=32;i++){
document.write('워후!x '+i+'<br/>');
}
</script>
</div>
<!-- Content영역 끝 -->
</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%;
}
/* 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>의 태그가 자체적으로 가지는 높이값이 원인이 아닌가 한다.*/
}
#content{
text-align:center;
overflow:scroll;
height:100%
}
