static 폴더 설정, CSS 적용 #static site #css
static site : 하나의 html파일이 하나의 웹페이지 구성, 웹 사이트의 route 구조가 파일 디렉토리 구조와 동일, 파일들이 접근 제한이 없음
dynamic site : 하나의 html파일이 여러개의 웹페이지 가능, router를 통해 개별 파일에 접근 제한
[Static 폴더 설정]
1. public 폴더 생성
2. public 폴더 내에
1. 프로젝트 내 index.html 파일 생성
3. index.html 파일내에 하단 정보 입력 후 저장 (html입력 후 tab 누르면 자동 생성)
body 태그 안에 <h1>Hello, world (static)</h1> 내용 입력
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1> Hello, world (static)</h1>
</body>
</html>
4. index.js 파일내에 기 입력된 하단 부분 주석 처리 후 하단 app.use 문구 입력
//app.get('/',function (req,res) {
// res.send('Hello World!');
//});
var path = require('path');
app.use(express.static(path.join(__dirname,'public')));
app.use(express.static(path.join(__dirname,'/')));
5. cmd 또는 git bash에서 nodemon으로 서버 스타트 후 http://localhost:3000 호출 하여 확인
$ nodemon
[nodemon] 1.11.0
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node index.js`
server start
[CSS 추가/적용]
1. public 폴더 내에 stylesheets 폴더 생성
2. stylesheets 폴더 내에 master.css 파일 생성
3. master.css 파일 내에 하단 문구 입력 후 저장
h1{
color:blue;
}
4. index.html의 내용에 css 파일을 연결하는 문구 삽입
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/stylesheets/master.css" type="text/css">
<title></title>
</head>
<body>
<h1> Hello, world (static)</h1>
</body>
</html>
5. http://localhost:3000 호출 하여 확인
'Development > NodeJS' 카테고리의 다른 글
| postgresql 설치, db, table 생성, pg-promise로 연결, counter구현 (0) | 2017.02.03 |
|---|---|
| ejs 활용, mongoose 데이터 연동, simple counter 구현 (0) | 2017.01.25 |
| mongo DB 로컬 설치, robomongo 설치, import sample json (0) | 2017.01.05 |
| node, atom, express, nodemon 설치 및 helloworld (0) | 2016.12.05 |