320x100
이번엔 기본적인 레이아웃을 구성한다.
먼저 어떤 식으로 구성할지 대충 그리자면
대충 이런식으로 상단 네비게이션 바에 사이드바를 부르기 위한 햄버거 버튼과 소셜 로그인 버튼들, 그리고 하단 왼쪽 부분에는 게시글을, 오른쪽 부분에는 공지와 추천글들을 보여주는 형태로 만들길 바라고 있다.
글 목록을 부트스트랩의 테이블을 사용할 것이기 때문에 부트스트랩을 인스톨해준다.
app.js에 해당 경로를 설정해주어야 한다.
또한 스크린샷은 없지만 제이쿼리도 인스톨해주었다.
일단 오늘 간단하게 구성해본 레이아웃은 위 스크린샷과 같다.
사이드바에 내용은 아직 넣지 않았지만 햄버거 버튼과 사이드바 애니메이션도 추가해 주었다. 해당 애니메이션은 맛집찾아 프로젝트에서 차용하였다!!! 햄버거 버튼같은 경우 moonformeli.tistory.com/5 이분의 코드를 가져와서 수정해주었다. 해당 글 뿐만아니라 CSS로 할 수 있는 몇가지 효과에 대한 글이 있어서 나중에 참고하면 좋을 듯 하다.
<!DOCTYPE html>
<html>
<head>
<title>node로 만드는 게시판</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/stylesheets/style.css">
<link rel="stylesheet" href="/stylesheets/menu-button.css">
</head>
<body>
<aside id="sidebar">
</aside>
<div id="header">
<div id="menu-button">
<div id="menu-button-line-wrapper">
<div id="line-top" class="line init top-reverse"></div>
<div id="line-mid" class="line init mid-reverse"></div>
<div id="line-bot" class="line init bot-reverse"></div>
</div>
</div>
</div>
<div id="content">
<div id="board-title">
전체글 보기
</div>
<div id="wrap-inner">
<div id="inner-left">
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>작성자</th>
<th>제목</th>
</tr>
</thead>
<tbody>
<tr>
<td>3</td>
<td>Doe</td>
<td>글 보기 영역 샘플 글 1</td>
</tr>
<tr>
<td>2</td>
<td>Moe</td>
<td>글 보기 영역 샘플 글 2</td>
</tr>
<tr>
<td>1</td>
<td>Dooley</td>
<td>글 보기 영역 샘플 글 3</td>
</tr>
</tbody>
</table>
</div>
<div id="inner-right">
<div id="notice">
<span>(공지사항)</span>
<table class="table">
<tbody>
<tr>
<td>샘플 공지사항 1</td>
</tr>
<tr>
<td>샘플 공지사항 2</td>
</tr>
<tr>
<td>샘플 공지사항 3</td>
</tr>
</tbody>
</table>
</div>
<div id="best-posts">
<span>(추천글)</span>
<table class="table">
<tbody>
<tr>
<td>샘플 추천글 1</td>
</tr>
<tr>
<td>샘플 추천글 2</td>
</tr>
<tr>
<td>샘플 추천글 3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
<script src="/js/bootstrap.min.js"></script>
<script src="/jq/jquery.min.js"></script>
<script src="javascripts/effect.js"></script>
</html>
가장 먼저 보여지는 index.ejs의 코드이다. 테이블은 부트스트랩의 깔끔한 테이블을 사용하였다.
body,html{
height: 100%;
margin: 0;
min-width: 1160px;
}
p{
margin: 0;
}
.table{
margin-bottom: 0;
}
#header{
background-color: black;
height: 50px;
width: 100%;
position: fixed;
}
#content{
height: 100%;
min-height: 1300px;
text-align: center;
}
#board-title{
padding-top:40px;
margin-bottom: 30px;
font-size: 5em;
}
#wrap-inner{
min-height: 1100px;
display: flex;
justify-content: center;
}
#inner-left{
min-height: 1000px;
min-width: 800px;
border: solid 1px grey;
margin-right: 30px;
}
#inner-right{
min-height: 1000px;
min-width: 250px;
font-size: 10pt;
}
#sidebar {
background: grey;
width: 300px;
height: 100%;
top: 0;
left: -300px;
position: fixed;
z-index: 1;
}
#notice,#best-posts{
border: solid 1px grey;
margin-bottom: 50px;
}
#notice > span,#best-posts > span{
font-size: 15pt;
}
style.css 이다. 네비게이션 바(헤더) 의 position 옵션을 fixed로 둬서 스크롤 시에도 상단에 고정되도록 지정했다. 또한 사이드바의 기본 left값을 -300px로 두어서 평소에는 보이지 않게 하다가 버튼을 누르면 애니메이션을 통해 나오게 한다.
#menu-button {
width:50px;
height:50px;
background: black;
position:absolute;
}
#menu-button-line-wrapper {
cursor:pointer;
width:40px;
height:28px;
position:relative;
top:4.5px;
left:4px;
}
.init {
animation:none !important;
}
.line {
background:#ffffff;
margin-top:6px;
margin-bottom:6px;
width:39px;
height:5px;
border-radius:2px;
box-shadow:0 1px 3px rgba(0,0,0,.5);
position:relative;
}
.line-top {
animation:line-top .5s forwards ease-out,
line-top-rotate .3s .5s forwards ease-out;
}
.top-reverse {
animation:line-top-rotate-reverse .3s forwards ease-out,
line-top-reverse .5s .3s forwards ease-out;
}
.line-mid {
animation:line-mid .5s forwards ease-out;
}
.mid-reverse {
animation:line-mid-invisible .3s forwards ease-out,
line-mid-reverse .5s .3s forwards ease-out;
}
.line-bot {
animation:line-bot .5s forwards ease-out,
line-bot-rotate .3s .5s forwards ease-out;
}
.bot-reverse {
animation:line-bot-rotate-reverse .3s forwards ease-out,
line-bot-reverse .5s .3s forwards ease-out;
}
@keyframes line-top {
0% {transform:translateY(0px)}
100% {transform:translateY(13px)}
}
@keyframes line-top-reverse {
0% {transform:translateY(13px)}
100% {transform:translateY(0px)}
}
@keyframes line-top-rotate {
0% {transform:translateY(13px) rotateZ(0deg)}
100% {transform:translateY(13px) rotateZ(45deg)}
}
@keyframes line-top-rotate-reverse {
0% {transform:translateY(13px) rotateZ(45deg)}
100% {transform:translateY(13px) rotateZ(0deg)}
}
@keyframes line-mid {
0% {transform:scale(1)}
100% {transform:scale(0)}
}
@keyframes line-mid-reverse {
0% {transform:scale(0)}
100% {transform:scale(1)}
}
@keyframes line-mid-invisible {
0% {transform:scale(0)}
100% {transform:scale(0)}
}
@keyframes line-bot {
0% {transform:translateY(0px)}
100% {transform:translateY(-10px)}
}
@keyframes line-bot-reverse {
0% {transform:translateY(-10px)}
100% {transform:translateY(0px)}
}
@keyframes line-bot-rotate {
0% {transform:translateY(-10px) rotateZ(0deg)}
100% {transform:translateY(-10px) rotateZ(135deg)}
}
@keyframes line-bot-rotate-reverse {
0% {transform:translateY(-10px) rotateZ(135deg)}
100% {transform:translateY(-10px) rotateZ(0deg)}
}
메뉴 버튼에 적용될 애니메이션이 담긴 css파일이다. 코드가 좀 길어서 다른 파일로 분리시켰다. 이 코드에 대한 자세한 설명은 moonformeli.tistory.com/5 이 링크를 참고하면 될 듯 하다.
var duration = 300;
var $side = $('#sidebar');
$('#menu-button-line-wrapper').click(function(){
$('.line').removeClass('init');
$('#line-top').toggleClass('line-top').toggleClass('top-reverse');
$('#line-mid').toggleClass('line-mid').toggleClass('mid-reverse');
$('#line-bot').toggleClass('line-bot').toggleClass('bot-reverse');
$side.toggleClass('open');
if($side.hasClass('open')) {
$side.stop(true).animate({left:'0px'}, duration);
$('#menu-button').animate({left:'300px'},duration);
}else{
$side.stop(true).animate({left:'-300px'}, duration);
$('#menu-button').animate({left:'0px'},duration);
};
});
effect.js의 내용이다. 이 파일은 페이지에 있는 여러가지 요소들의 애니메이션들을 담기 위한 코드이다.
메인 페이지만 만들었지만 이전 프로젝트때와는 달리 꽤 빠르고 깔끔하게 만들어졌다. 이전에는 이 레이아웃보다 훨씬 쉬운걸 만드는데도 쩔쩔맸는데, 확실히 좀 나아진 것 같다.
'Projects > NodeBoard' 카테고리의 다른 글
| 글 작성 기능 제작 (0) | 2021.02.25 |
|---|---|
| 글 조회 페이지 작성 (0) | 2021.02.24 |
| 테이블 생성과 게시판별 조회 기능 (1) | 2021.02.23 |
| 기본적인 라우팅과 MySQL DB 연동 (0) | 2021.02.22 |
| 프로젝트 생성과 모듈 설치, github 레포지토리 생성 (0) | 2021.02.20 |
댓글