Basic Layout
- Add Header and Footer Partials
- Include Semantic UI
- Add Simple Nav
1. header.ejs, footer.ejs
모든 페이지는 동일한 상단, 하단 메뉴 디자인을 가지므로, 개별 페이지마다 입력하기 보다는 header와 footer를 만들어 조립하는 형태로 만드는 것이 유지보수나 작업에 유리하다.
<!DOCTYPE> <!-- header.ejs -->
<html>
<head>
<title>Blog APP</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<link rel="stylesheet" type="text/css" href="/stylesheet/app.css">
</head>
<body>
<div class="ui fixed inverted menu"> <!-- container와 같은 역할 -->
<div class="ui container">
<div class="header item"><i class="code icon"></i>Blog Site</div>
<a href="/" class="item">Home</a>
<a href="/blogs/new" class="item">New Post</a>
</div>
</div>
<!-- footer.ejs-->
<!-- 해당 프로젝트는 페이지 하단에 디자인이 없으므로 간단하게 body, html을 닫는 용도로 사용-->
</body>
</html>
2. Semantic ui
해당 프로젝트에서는 semantic framework 를 사용하였다. 최신버전 및 doc는 https://semantic-ui.com/에서 확인 가능.
3. Cutomized css
<!-- 필요에 따라 수정하여 사용할 css-->
i.icon {
font-size: 2em;
}
.container.main {
margin-top: 7.0em;
}
#delete {
display: inline;
}
'Full stack development > The Web Developer Bootcamp(2020)' 카테고리의 다른 글
| 316. RESTful Blog App: NEW and CREATE (0) | 2020.10.01 |
|---|---|
| 315. Note about RESTful Blog App : New and Create (0) | 2020.10.01 |
| 313. Note about Blog App: Layout (0) | 2020.10.01 |
| 312. RESTful Blog App: INDEX (0) | 2020.10.01 |
| 310. YelpCamp: Campground Show Page Part 2 (0) | 2020.09.30 |