<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="hepheir">
<!-- 디바이스 화면 크기 -->
<script>/*<![CDATA[*/var desktopModeSwitch = sessionStorage.desktopModeSwitch;
if(desktopModeSwitch=="on"){
document.write('<meta name="viewport" content="width=1024, user-scalable=yes, initial-scale=1.0">')
}
else{
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">')
};/*]]>*/
</script>
<!--크롬 주소 표시줄 색상 변경-->
<meta name="theme-color" content="#5d78b8">
<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 src="./images/script.js"></script>
</head>
<body>
<nav id="bodyWrap" class="wrap">
<div id="headerWrap">
<ul class="header">
<li class="in_b">
<a href="#drawer" class="drawerLink a_img">Drawer</a>
</li>
<li class="in_b">
<a href="https://project-unit.tistory.com/" class="title">UNIT</a>
</li>
</ul>
</div>
<div id="titleWrap">
<h1 class="title">훠후!</h1>
</div>
<div id="content">
<br/>
워후!
<input type="button" onclick="helloman();" value="dodododo"/>
<br/>
<br/>
<iframe width="640px" height="360px" src="https://www.youtube.com/embed/HPC0VWBfcDQ?autoplay=1" frameborder="0" allowfullscreen></iframe>
<div id="jquerytest">
<h1>JQuery 애니메이션 예제</h1>
<table>
<tr>
<td>
<input type="button" id="fadeout" value="fade out" />
</td>
<td>
<input type="button" id="fadein" value="fade in" />
</td>
</tr>
<tr>
<td>
<input type="button" id="hide" value="hide" />
</td>
<td>
<input type="button" id="show" value="show" />
</td>
</tr>
<tr>
<td>
<input type="button" id="slidedown" value="slide down" />
</td>
<td>
<input type="button" id="slideup" value="slide up" />
</td>
</tr>
</table>
<div id="target">
훠후!
</div>
<script>
$('input[type="button"]').click( function(e) {
var $this = $(e.target);
switch($this.attr('id')) {
case 'fadeout':
$('#target').fadeOut('slow');
break;
case 'fadein':
$('#target').fadeIn('slow');
break;
case 'hide':
$('#target').hide();
break;
case 'show':
$('#target').show();
break;
case 'slidedown':
$('#target').hide().slideDown('slow');
break;
case 'slideup':
$('#target').slideUp('slow');
break;
}
})
</script>
</div>
</div>
</nav>
<nav id="drawer" style="display:none;">
<div id="drawerProfile">
<img width="160px" src="./images/movie_cam_icon.png"/>
<a href="/">
<div id="drawerName">
<p>UNIT</p>
<p>이거 완전 메뉴임</p>
</div>
</a>
</div>
<input type="button" value="닫기" onclick="window.history.back();"/>
</nav>
</body>
</html>
@charset "UTF-8";
/* Default */
body{
font-family: "맑은고딕", Arial;
font-size: 16px;
margin: 0;
}
ul, ol{
list-style: none;
padding: 0;
margin: 0;
}
a{
text-decoration: none;
color:inherit;
}
/* 티스토리 툴바 제거 */
#tistorytoolbarid{
display:none;
}
/* Classes */
.mark{
border: 1px solid red;
}
.container{
margin:0;
}
.wrap{
margin: 0;
width:100%;
height:100%;
}
.in_b{
display: inline-block;
}
.a_img{
display: block;
overflow: hidden;
text-indent: 100em;
}
/* Header */
#headerWrap{
background-color: #5d78b8;
width: 100%;
height: 56px;
position: fixed;
}
ul.header{
float: left;
margin-right: 1.5em;
margin-top: 14px;
}
a.drawerLink{
padding-left: 32px;
margin:0;
background-image: url('./images/menu_icon.png');
background-size: contain;
background-repeat: no-repeat;
width: 28px;
height: 28px;
background-position: center;
}
a.title{
vertical-align: 8px;
font-size: 24px;
color: white;
}
/* Elements */
#bodyWrap{
overflow: scroll;
height: 100vh;
}
#titleWrap{
background-image: url("./images/rainbow.png");
background-size: 640px 360px;
background-position: center 56px;
background-repeat: no-repeat;
background-attachment: fixed;
height: 360px;
}
h1.title{
padding-top: 240px;
margin:0;
text-align:center;
font-weight: 600;
font-size: 56px;
color: white;
}
#content{
background-color: white;
height: 1000px;
}
/* Drawer */
#drawer{
background-color: yellow;
position: fixed;
top: 0;
float: left;
z-index: 1000;
width:320px;
height: 100%;
}
#backgroundMask{
}
td{
width: 100px;
height: 25px;
text-align: center;
}
#jquerytest{
padding-left: 40px;
}
#target{
margin-top:20px;
padding-top:80px;
width:200px;
height:100px;
border: 2px solid red;
background-color: pink;
text-align: center;
}
