<!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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.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="containerWrap">
<div class="homeNotice">
<h3 class="article"></h3>
</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 card">
<div class="titleWrap">
<h3><a href="/20">160519</a></h3>
</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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.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="containerWrap">
<div class="homeNotice">
<h3 class="article"></h3>
</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 card">
<div class="titleWrap">
<h3><a href=""></a></h3>
</div>
<div class="article">
</div>
</div>
</s_article_rep>
<!-- 공지 사항 -->
<s_notice_rep>
<div class="entryNotice">
<a href="">
<strong></strong>
<p></p>
</a>
</div>
</s_notice_rep>
<!-- 위치 로그 -->
<s_local>
<div class="infoWrap card">
<div class="infoEntry"></div>
<div class="infoToggle">
<p class="infoTitle">홍보 영상 보기</p>
</div>
</div>
<div class="mmcWrap card">
<div class="mmcHead">
<h3>Screen</h3>
<p>영역을 선택하세요</p>
</div>
<div class="mmcBody">
<form>
<p>
<label id="seatSection" for="leftSection">왼쪽</label>
<label id="seatSection" for="rightSection">오른쪽</label>
</p>
<input id="leftSection" name="seatSection" type="radio" value="leftSection"/>
<input id="rightSection" name="seatSection" type="radio" value="rightSection"/>
</form>
</div>
<div class="mmcFoot">
점 3개 디렉터 들어갈 예정
</div>
</div>
</s_local>
</div>
</div>
</s_t3>
<!-- 드로워 -->
<nav id="drawer" class="hidden">
<div class="drawerWrap inlineBlock">
<div class="drawerTitle">
<a href="/">
<h1>UNIT</h1>
<div class="drawerName">
<p></p>
</div>
</a>
</div>
<div class="drawerList">
<ol>
<li>
<a href="https://project-unit.tistory.com/">
<p>메인으로</p>
</a>
</li>
<li>
<a href="https://project-unit.tistory.com/guestbook"><p>방명록</p></a>
</li>
<li>
<a href="https://project-unit.tistory.com//admin/center/">
<p>관리자 메뉴</p>
</a>
</li>
<li>
<a href="https://project-unit.tistory.com/location">
<p>티켓팅 사이트 제작중</p>
</a>
</li>
<li>
<label class="drawerCloseLabel" for="drawerClose">닫기</label>
<input id="drawerClose" class="hidden" type="button" value="닫기" onclick="window.history.back();"/>
</li>
</ol>
</div>
</div>
<div id="drawerShadow" class="drawerShadow inlineBlock" onclick="window.history.back();">
</div>
</nav>
</div>
<script>
drawerReset();
</script>
</body>
</html>
* CSS
css3의 -webkit-box-shadow 를 이용하여 드로워에 박스 그림자 추가
+ -webkit-border-radius를 이용해 둥근 모서리를 사용하게 됨
위치로그의 label의 속성을 inline-block으로 바꾸어 상자처럼 만듬
entry와 비슷한 형태의 카드박스들을 위해 card라는 새로운 클래스를 만들고 다른 클래스들 에서 중복되는 부분들을 정리함
드로워를 열었을 때 배경에 생기는 음영을 구현하려다 생겼던 잡 버그들을 다 고침
- 위치 곂침문제
- 화면에 나타나지 않는 문제
- 지정된 위치로 안가고 위나 아래방향으로 왜곡되던 문제
- 양옆에 거슬리는 스크롤바가 나타나는 문제
iframe의 넓이를 항상 100%, 높이를 '넓이의 52%'로 지정함
@charset "UTF-8";
/* LocalLog - aka MMC */
div.infoWrap{
z-index:700;
}
div.infoToggle{
height: 1em;
text-align: center;
position: relative;
top: -4px;
}
p.infoTitle{
font-weight:600;
margin: 0;
}
div.mmcWrap{
text-align:center;
}
label#seatSection{
display:inline-block;
width:47%;
height: 400px;
background-color: gray;
}
/* Header */
header{
background-color: #5d78b8;
width: 100%;
height: 56px;
position: fixed;
z-index:800;
}
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 */
/* Notice rep */
div.entryNotice{
width: 100%;
height: 800px;
background-color: pink;
}
#content{
background-color: white;
height: 1000px;
}
/* Drawer */
#drawer{
position: fixed;
top: 0;
z-index: 1000;
width:calc(100% + 320px);
height: 100%;
}
div.drawerWrap{
position:inherit;
background-color: #ffffff;
width:320px;
height: 100%;
z-index:990;
-webkit-box-shadow: 2px 0 8px 0 #4f4f4f;
}
div.drawerShadow{
position:inherit;
width:calc(100% + 320px);
background-color:black;
height:100%;
z-index:980;
opacity: 0.2;
}
div.drawerTitle{
color: white;
text-align: center;
width: 100%;
height: 160px;
background-image: url('./images/rainbow.png');
background-size: cover;
}
label.drawerCloseLabel{
cursor: pointer;
}
div.drawerList{
padding-left: 20px;
font-size: 20px;
}
/* Elements */
#bodyWrap{
overflow-y: scroll;
overflow-x: hidden;
height: 100vh;
/* background-image: url('./images/cherry_blossoms.jpg'); */
background-size:cover;
}
div.containerWrap{
margin: 12px 12px 0 12px;
}
/*
* =====================================
* 공 통 영 역
* =====================================
*/
/* 티스토리 툴바 제거 */
#tistorytoolbarid{
display:none;
}
/* Classes */
.mark{
border: 1px solid red;
}
.wrap{
margin: 0;
width:100%;
height:100%;
}
.inlineBlock{
display: inline-block;
}
.a_img{
display: block;
overflow: hidden;
text-indent: 100em;
}
.hidden{
display:none;
}
.card{
background-color:white;
margin-bottom:12px;
padding:8px 8px 8px 8px;
-webkit-border-radius: 3px;
text-align: justify;
overflow: auto;
}
/* Default */
body{
font-family: "맑은고딕", Arial;
font-size: 16px;
margin: 0;
background-color: black;
}
ul, ol{
list-style: none;
padding: 0;
margin: 0;
}
a{
text-decoration: none;
color:inherit;
}
h1, h2, h3, h4, h5, h6{
margin:0;
}
iframe{
width:100%;
height: 52vw;
}
* JavaScript
변화없음
javascript
</div>
</div>
</s_article_rep>
<!-- 공지 사항 -->
<s_notice_rep>
<div class="entryNotice">
<a href="">
<strong></strong>
<p></p>
</a>
</div>
</s_notice_rep>
<!-- 위치 로그 -->
<s_local>
<div class="infoWrap card">
<div class="infoEntry"></div>
<div class="infoToggle">
<p class="infoTitle">홍보 영상 보기</p>
</div>
</div>
<div class="mmcWrap card">
<div class="mmcHead">
<h3>Screen</h3>
<p>영역을 선택하세요</p>
</div>
<div class="mmcBody">
<form>
<p>
<label id="seatSection" for="leftSection">왼쪽</label>
<label id="seatSection" for="rightSection">오른쪽</label>
</p>
<input id="leftSection" name="seatSection" type="radio" value="leftSection"/>
<input id="rightSection" name="seatSection" type="radio" value="rightSection"/>
</form>
</div>
<div class="mmcFoot">
점 3개 디렉터 들어갈 예정
</div>
</div>
</s_local>
</div>
</div>
</s_t3>
<!-- 드로워 -->
<nav id="drawer" class="hidden">
<div class="drawerWrap inlineBlock">
<div class="drawerTitle">
<a href="/">
<h1>UNIT</h1>
<div class="drawerName">
<p></p>
</div>
</a>
</div>
<div class="drawerList">
<ol>
<li>
<a href="https://project-unit.tistory.com/">
<p>메인으로</p>
</a>
</li>
<li>
<a href="https://project-unit.tistory.com/guestbook"><p>방명록</p></a>
</li>
<li>
<a href="https://project-unit.tistory.com//admin/center/">
<p>관리자 메뉴</p>
</a>
</li>
<li>
<a href="https://project-unit.tistory.com/location">
<p>티켓팅 사이트 제작중</p>
</a>
</li>
<li>
<label class="drawerCloseLabel" for="drawerClose">닫기</label>
<input id="drawerClose" class="hidden" type="button" value="닫기" onclick="window.history.back();"/>
</li>
</ol>
</div>
</div>
<div id="drawerShadow" class="drawerShadow inlineBlock" onclick="window.history.back();">
</div>
</nav>
</div>
<script>
drawerReset();
</script>
</body>
</html>
@charset "UTF-8";
/* LocalLog - aka MMC */
div.infoWrap{
z-index:700;
}
div.infoToggle{
height: 1em;
text-align: center;
position: relative;
top: -4px;
}
p.infoTitle{
font-weight:600;
margin: 0;
}
div.mmcWrap{
text-align:center;
}
label#seatSection{
display:inline-block;
width:47%;
height: 400px;
background-color: gray;
}
/* Header */
header{
background-color: #5d78b8;
width: 100%;
height: 56px;
position: fixed;
z-index:800;
}
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 */
/* Notice rep */
div.entryNotice{
width: 100%;
height: 800px;
background-color: pink;
}
#content{
background-color: white;
height: 1000px;
}
/* Drawer */
#drawer{
position: fixed;
top: 0;
z-index: 1000;
width:calc(100% + 320px);
height: 100%;
}
div.drawerWrap{
position:inherit;
background-color: #ffffff;
width:320px;
height: 100%;
z-index:990;
-webkit-box-shadow: 2px 0 8px 0 #4f4f4f;
}
div.drawerShadow{
position:inherit;
width:calc(100% + 320px);
background-color:black;
height:100%;
z-index:980;
opacity: 0.2;
}
div.drawerTitle{
color: white;
text-align: center;
width: 100%;
height: 160px;
background-image: url('./images/rainbow.png');
background-size: cover;
}
label.drawerCloseLabel{
cursor: pointer;
}
div.drawerList{
padding-left: 20px;
font-size: 20px;
}
/* Elements */
#bodyWrap{
overflow-y: scroll;
overflow-x: hidden;
height: 100vh;
/* background-image: url('./images/cherry_blossoms.jpg'); */
background-size:cover;
}
div.containerWrap{
margin: 12px 12px 0 12px;
}
/*
* =====================================
* 공 통 영 역
* =====================================
*/
/* 티스토리 툴바 제거 */
#tistorytoolbarid{
display:none;
}
/* Classes */
.mark{
border: 1px solid red;
}
.wrap{
margin: 0;
width:100%;
height:100%;
}
.inlineBlock{
display: inline-block;
}
.a_img{
display: block;
overflow: hidden;
text-indent: 100em;
}
.hidden{
display:none;
}
.card{
background-color:white;
margin-bottom:12px;
padding:8px 8px 8px 8px;
-webkit-border-radius: 3px;
text-align: justify;
overflow: auto;
}
/* Default */
body{
font-family: "맑은고딕", Arial;
font-size: 16px;
margin: 0;
background-color: black;
}
ul, ol{
list-style: none;
padding: 0;
margin: 0;
}
a{
text-decoration: none;
color:inherit;
}
h1, h2, h3, h4, h5, h6{
margin:0;
}
iframe{
width:100%;
height: 52vw;
}
