<!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>
<div id="bodyWrap" class="wrap">
<header>
<ul class="header">
<li class="inlineBlock">
<a href="#drawer" class="drawerLink a_img">Drawer</a>
</li>
<li class="inlineBlock">
<a href="https://project-unit.tistory.com/" class="title">UNIT</a>
</li>
</ul>
</header>
<div id="headerWrap"></div>
<s_t3>
<div class="container">
<div class="homeNotice">
<h2 class="article"></h2>
</div>
<!-- 방명록 -->
<s_guest>
<div class="guestbook">
<h2>임시 방명록 같은거</h2>
<s_guest_input_form>
<div class="guestWrite">
<s_guest_member>
<s_guest_form>
<p>
<label for="guestName"> 이름 :</label>
<input type="text" id="guestName" name="" value=""/>
</p>
<p>
<label for="guestPassword"> 비밀번호 :</label>
<input type="text" id="guestPassword" name="" value=""/>
</p>
</s_guest_form>
</s_guest_member>
<p>
<textarea id="guestTextarea" name=""></textarea>
</p>
<p>
<input type="submit" value="좋아, 다 쓴거 같다고 생각하면 눌러" onclick=""/>
</p>
</div>
</s_guest_input_form>
<s_guest_container>
<div class="guestList">
<ul>
<s_guest_rep>
<li id="">
<div class="">
<span class="name"></span>
<span class="date"> </span>
<span class="control">
<a href="#" onclick="">삭제</a>
<a href="#" onclick="">답글</a>
</span>
<p></p>
</div>
<s_guest_reply_container>
<ul>
<s_guest_reply_rep>
<li id=''>
<div class="">
<span class="name"></span>
<span class="date"> </span>
<span class="control">
<a href="#" onclick="">삭제</a>
</span>
<p></p>
</div>
</li>
</s_guest_reply_rep>
</ul>
</s_guest_reply_container>
</li>
</s_guest_rep>
</ul>
</div>
</s_guest_container>
</div>
</s_guest>
<!-- 글 관련 정보 -->
<s_article_rep>
<div class="entry">
<div class="titleWrap">
<h2><a href="/19">160518</a></h2>
</div>
<div class="article">
변경사항
* HTML
방명록 만듦 (매우 고급짐)
타이틀 삭제
<!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>
<div id="bodyWrap" class="wrap">
<header>
<ul class="header">
<li class="inlineBlock">
<a href="#drawer" class="drawerLink a_img">Drawer</a>
</li>
<li class="inlineBlock">
<a href="https://project-unit.tistory.com/" class="title">UNIT</a>
</li>
</ul>
</header>
<div id="headerWrap"></div>
<s_t3>
<div class="container">
<div class="homeNotice">
<h2 class="article"></h2>
</div>
<!-- 방명록 -->
<s_guest>
<div class="guestbook">
<h2>임시 방명록 같은거</h2>
<s_guest_input_form>
<div class="guestWrite">
<s_guest_member>
<s_guest_form>
<p>
<label for="guestName"> 이름 :</label>
<input type="text" id="guestName" name="" value=""/>
</p>
<p>
<label for="guestPassword"> 비밀번호 :</label>
<input type="text" id="guestPassword" name="" value=""/>
</p>
</s_guest_form>
</s_guest_member>
<p>
<textarea id="guestTextarea" name=""></textarea>
</p>
<p>
<input type="submit" value="좋아, 다 쓴거 같다고 생각하면 눌러" onclick=""/>
</p>
</div>
</s_guest_input_form>
<s_guest_container>
<div class="guestList">
<ul>
<s_guest_rep>
<li id="">
<div class="">
<span class="name"></span>
<span class="date"> </span>
<span class="control">
<a href="#" onclick="">삭제</a>
<a href="#" onclick="">답글</a>
</span>
<p></p>
</div>
<s_guest_reply_container>
<ul>
<s_guest_reply_rep>
<li id=''>
<div class="">
<span class="name"></span>
<span class="date"> </span>
<span class="control">
<a href="#" onclick="">삭제</a>
</span>
<p></p>
</div>
</li>
</s_guest_reply_rep>
</ul>
</s_guest_reply_container>
</li>
</s_guest_rep>
</ul>
</div>
</s_guest_container>
</div>
</s_guest>
<!-- 글 관련 정보 -->
<s_article_rep>
<div class="entry">
<div class="titleWrap">
<h2><a href=""></a></h2>
</div>
<div class="article">
</div>
</div>
</s_article_rep>
<!-- 공지 사항 -->
<s_notice_rep>
<div class="entryNotice">
<a href="">
<strong></strong>
<p></p>
</a>
</s_notice_rep>
<!-- 미디어 로그 -->
<s_media>
<div></div>
</s_media>
</div>
</s_t3>
<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>
<a href="guestbook">
<p>방명록</p>
</a>
<input type="button" value="닫기" onclick="window.history.back();"/>
</nav>
</div>
</body>
</html>
* CSS
드로워 넓이를 40%로 지정하면서 그 값이 240px보다는 크게 유지될 수 있도록 함
드로워 색상도 누렁색에서 흰색으로 바꿈
@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;
}
iframe{
max-width: 100%;
}
h1, h2, h3, h4, h5, h6{
margin:0;
}
/* 티스토리 툴바 제거 */
#tistorytoolbarid{
display:none;
}
/* Classes */
.mark{
border: 1px solid red;
}
.container{
margin:0;
}
.wrap{
margin: 0;
width:100%;
height:100%;
}
.inlineBlock{
display: inline-block;
}
.a_img{
display: block;
overflow: hidden;
text-indent: 100em;
}
/* Elements */
#bodyWrap{
overflow: scroll;
height: 100vh;
}
/* Header */
header{
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: 6px;
font-size: 24px;
color: white;
}
div#headerWrap{
width:100%;
height: 56px;
}
/* GuestBook */
div.guestbook{
width: 100%;
background-color: lightblue;
text-align: center;
}
textarea#guestTextarea{
width: 100%;
height: 3.5em;
}
/* Article */
div.entry{
width: 100%;
background-color: lightblue;
}
/* Notice rep */
div.entryNotice{
width: 100%;
height: 800px;
background-color: pink;
}
#content{
background-color: white;
height: 1000px;
}
/* Drawer */
#drawer{
background-color: white;
position: fixed;
top: 0;
float: left;
z-index: 1000;
width: 40%;
min-width:240px;
height: 100%;
}
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;
}
* JavaScript
/*
* 훠후!
* 고등학교 졸업전 하고싶은걸 해보는 동아리!
* Unit!!!! -김동주- ㅈㅅ
*/
$("#bodyWrap").click(function(){
window.location="";
})
window.onhashchange=function(){
if(location.hash=="#drawer"){
$("#drawer").addClass("opened");
$("#drawer").show();
}
else{
$("#drawer").hide();
$("#drawer").removeClass("opened");
}
}
function helloman(){
alert('hello -script.js에서 온 메세지');
}
</div>
</div>
</s_article_rep>
<!-- 공지 사항 -->
<s_notice_rep>
<div class="entryNotice">
<a href="">
<strong></strong>
<p></p>
</a>
</s_notice_rep>
<!-- 미디어 로그 -->
<s_media>
<div></div>
</s_media>
</div>
</s_t3>
<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>
<a href="guestbook">
<p>방명록</p>
</a>
<input type="button" value="닫기" onclick="window.history.back();"/>
</nav>
</div>
</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;
}
iframe{
max-width: 100%;
}
h1, h2, h3, h4, h5, h6{
margin:0;
}
/* 티스토리 툴바 제거 */
#tistorytoolbarid{
display:none;
}
/* Classes */
.mark{
border: 1px solid red;
}
.container{
margin:0;
}
.wrap{
margin: 0;
width:100%;
height:100%;
}
.inlineBlock{
display: inline-block;
}
.a_img{
display: block;
overflow: hidden;
text-indent: 100em;
}
/* Elements */
#bodyWrap{
overflow: scroll;
height: 100vh;
}
/* Header */
header{
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: 6px;
font-size: 24px;
color: white;
}
div#headerWrap{
width:100%;
height: 56px;
}
/* GuestBook */
div.guestbook{
width: 100%;
background-color: lightblue;
text-align: center;
}
textarea#guestTextarea{
width: 100%;
height: 3.5em;
}
/* Article */
div.entry{
width: 100%;
background-color: lightblue;
}
/* Notice rep */
div.entryNotice{
width: 100%;
height: 800px;
background-color: pink;
}
#content{
background-color: white;
height: 1000px;
}
/* Drawer */
#drawer{
background-color: white;
position: fixed;
top: 0;
float: left;
z-index: 1000;
width: 40%;
min-width:240px;
height: 100%;
}
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;
}
/*
* 훠후!
* 고등학교 졸업전 하고싶은걸 해보는 동아리!
* Unit!!!! -김동주- ㅈㅅ
*/
$("#bodyWrap").click(function(){
window.location="";
})
window.onhashchange=function(){
if(location.hash=="#drawer"){
$("#drawer").addClass("opened");
$("#drawer").show();
}
else{
$("#drawer").hide();
$("#drawer").removeClass("opened");
}
}
function helloman(){
alert('hello -script.js에서 온 메세지');
}
