[HTML5Project] ejs-locals 모듈로 head, header, layout, footer 구성하기
[프로젝트 생성 및 필요 확장 모듈 다운로드]
1. File - New - Node.js express project로 새로운 프로젝트 생성
1-1. Project name 'project', Template engine 'ejs' - Finish로 생성
2. 해당 프로젝트 폴더에서 nodemon실행시키고 localhost:3000에 Welcome to express 나타나면 성공
3. 프로젝트의 package.json파일내의 dependencies내에 "ejs-locals": "~1.0.2"를 추가하고 저장
3-1. package.json 우클릭하여 Ran As - npm install로 설치하여 ejs-locals 설치되는지 확인
[app.js] - middleware 등록 및 에러 처리, 순서가 중요함. 순차적 실행
var ejsLocals = require('ejs-locals');
app.set('view engine', 'ejs'); 위쪽에 추가 app.engine('ejs',ejsLocals);
app.use('/', index);
[index.js] - router 역할만
1. home page를 redirect하여 각
/* GET home page. */
router.get('/', function(req, res, next) {
res.redirect('main.html'); //main page로 redirect
});
router.get('/*.html', function(req, res, next) {
var url = req.url.substring(1,req.url.indexOf('.html'));
res.render(url,{title:'프로젝트', bodyId:url, js:url+'.js'});
});
[index.ejs] - 사용하지 않으니 삭제
[main.ejs] - views 폴더 내에 아래 내용으로 생성
<% layout('layout/layout')%>
<h1><%= title %></h1>
<p>Welcome to <%= title %> Main Page!</p>
[main.js] - public\js 폴더내에 생성
console.log('main page console');
layout - views\layout 폴더를 생성하여 아래 4개의 ejs를 생성함
[head.ejs]
<head>
<meta charset="utf-8">
<title><%= title %></title>
<meta name="description" content="project site">
<meta name="keywords" content="html5,css3,svg">
<link rel="shortcut icon" href="image/favicon.ico">
<link rel="stylesheet" media="all" type="text/css" href="stylesheets/layout.css">
<% if(js){ %><script src="js/<%= js %>"></script><% } %>
</head>
[header.ejs]
<header id="header">
<hgroup>
<h1 class="logo">
<a href="#"><img src="#" alt="헤더 로고"></a>
</h1>
<h2 class="theme">HTML5 프로젝트 Site</h2>
</hgroup>
<nav id="nav">
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
<li><a href="#">메뉴4</a></li>
</ul>
</nav>
</header>
[layout.ejs]
<!DOCTYPE html>
<html lang="ko">
<%- partial('head') %>
<body id="<%= bodyId %>">
<a href="#main" id="skipNavi">본문바로가기</a>
<div id="page">
<%- partial('header') %>
<%- body %>
<%- partial('footer') %>
</div>
</body>
</html>
/*리셋===================================================================*/
* {
margin: 0;
padding: 0;
}
time {
display: inline;
}
/*기본 font 설정*/
body {
font-size: 0.75em;
font-family: 돋움, dotum, 굴림, gulim, sans-serif;
color: #000;
background: #e3dfd9;
}
a {
text-decoration: none;
color: #000;
}
a:hover {
text-decoration: underline;
}
/*이미지 설정*/
img {
border: 0;
vertical-align: top;
}
/*리스트 설정*/
ul, ol {
list-style: none;
}
/*테이블 설정*/
table {
width: 100%;
border-collapse: collapse;
}
/*기본 form 설정*/
select, input, textarea {
font-family: 돋움, dotum, 굴림, gulim, sans-serif;
font-size: 12px;
}
input[type="radio"] {
position: relative;
top: 2px;
}
input[type="checkbox"] {
position: relative;
top: 2px;
}
input[type="submit"] {
cursor: pointer;
border: 0;
}
button {
cursor: pointer;
border: 0;
}
/*===================================================================리셋*/
/*페이지==================================================================*/
/*==================================================================페이지*/
/*헤더===================================================================*/
#header>hgroup {/*페이지 로고 영역*/
position: relative;
height: 60px;
}
.logo {/*페이지 로고*/
position: absolute;
bottom: 13px;
left: 50px;
overflow: hidden;
}
.logo img {
width: 144px;
height: 33px;
-webkit-animation-name: logoAnimation;
-webkit-animation-duration: 1s;
}
.theme {/*페이지 로고 슬로건*/
position: absolute;
top: 18px;
left: 200px;
overflow: hidden;
}
.theme img {
width: 78px;
height: 27px;
-webkit-animation-name: logoSloganAnimation;
-webkit-animation-duration: 1s;
}
#nav ul {/*메인메뉴 위치*/
position: absolute;
top: 0;
right: 0;
}
#nav li {/*메뉴 아이템*/
position: relative;
display: inline-block;
text-align: center;
}
#nav a {
display: inline-block;
width: 130px;
font-family: NanumGothicExtraBoldWeb;
font-size: 120%;
color: #fff;
line-height: 60px;
}
/*===================================================================헤더*/
/*푸터===================================================================*/
#footer { /*페이지 헤더*/
color: #888682;
font-size: 90%;
border-top: #c1beb9 solid 1px;
}
#footer .logo {
position: absolute;
top: 5px;
left: 0;
padding-top: 20px;
padding-left: 7px;
}
#footer li {
display: inline-block;
padding-bottom: 5px;
}
#footer li a {
color: #888682;
font-weight: bold;
}
#footer address {
font-style: normal;
}
/*===================================================================풋터*/
#page {
width: 980px;
overflow: hidden;
margin: 0 auto;
}
#header {/*페이지 헤더*/
position: relative;
height: 110px;
margin-bottom: 20px;
}
#main {
position: relative;
padding:0 10px;
}
#footer { /*페이지 헤더*/
position: relative;
margin-top: 45px;
padding: 15px 0 15px 160px;
}
'Development > WEB' 카테고리의 다른 글
| MongoDB에서 데이터 가져와서 template 뷰와 바인딩 (0) | 2017.03.06 |
|---|---|
| MongoDB 테스트 데이터 생성 스크립트 (0) | 2017.03.06 |
| mongodb client로 연결, db데이터 (0) | 2017.02.14 |
| express, ejs, nodemon 설치, Hello express (0) | 2017.02.13 |
| Node.js 개요, Hello node, ENIDE(eclipse) 설치, 설정 (0) | 2017.02.13 |