이번 클래스는 페이지에서 적용할 내용은 다음과 같다. 각 페이지별로 적용 할 수도 있지만 DRY(Don't Repeate Youself)를 적용하기 위해 공통부분을 header.ejs에 적용한다.
1. Contents를 중앙에 위치 시키기
2. 각 페이지 상단에 navbar 추가 및 Login, Sign Up, Logout button 적용
3. <input> 박스를 좌우가 아닌 상하로 위치시키고, 버튼 디자인 적용
1. Contents를 중앙에 적용
기존 news.ejs 코드
<%- include("partials/header")%>
<h1>Create a New Campground</h1>
<form action="/campgrounds" method="POST">
<input type="text" name="name" placeholder="name">
<input type="text" name="image" placeholder="image">
<button>Submit!</button>
</form>
<a href="/campgrounds">Go back</a>
<%- include("partials/footer")%>
아래와 같이 변경한다.
<%- include("partials/header")%>
<div class="container"> <!-- 모든 컨텐츠를 중앙에 위치시키도록 container class를 이용 -->
<div class="row"> <!-- input 박스를 좌우가 아닌 상하로 표시하기 위해 row class 적용 -->
<h1 style="text-align: center;">Create a New Campground</h1> <!-- text가 중앙에 출력되도록 text-align 적용 -->
<div style="width: 30%; margin: 25px auto;"> <!-- input box의 크기를 30%로 적용하고, form 태그를 감싸는 div 상하에 25px, 좌우에 auto로 margin을 적용 -->
<form action="/campgrounds" method="POST">
<div class="form-group"> <!-- 각 input 태그 상하에 여유공간을 주기 위해 개별로 form-group 설정-->
<input class="form-control" type="text" name="name" placeholder="name">
</div>
<div class="form-group">
<input class="form-control" type="text" name="image" placeholder="image">
</div>
<div class="form-group">
<button class="btn btn-lg btn-primary btn-block">Submit!</button> <!-- 버튼 사이즈를 증가시키고, 색상 변경-->
</div>
</form>
<a href="/campgrounds">Go back</a> <!-- a 태그 또한 form div에 적용시켜 input 태그와 크기를 일치화시킨다.-->
</div>
</div>
</div>
<%- include("partials/footer")%>
2. 상단 메뉴바를 디자인 한 후 모든 페이지에 적용될 수 있도록 header.ejs에 적용
partials/header.ejs
<!DOCTYPE html>
<html>
<head>
<title>Yelpcamp</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<!-- 아래와 같이 적용시킨다.-->
<!DOCTYPE html>
<html>
<head>
<title>Yelpcamp</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default"> <!-- 페이지 최상단에 메뉴를 디자인 하기 위해 navbar-default 적용 -->
<div class="container-fluid"> <!-- 텍스트가 들어갈 navbar-->
<div class="navbar-header"> <!-- 헤더 생성, 페이지 이름이나 회사 이름을 적용시킬 때 사용-->
<a class="navbar-brand" href="/">YelpCamp</a> <!-- 브랜드를 강조하기 위한 클래스-->
</div>
<div class="collapse navbar-collapse"> <!-- 반응형으로 페이지 크기가 작아질 때 햄버거 메뉴 적용을 위해 추가 -->
<ul class="nav navbar-nav navbar-right"> <!-- li태그를 상하가 아닌 좌우로 위치시기 위해 적용 -->
<li><a href="/">Login</a></li>
<li><a href="/">Sign Up</a></li>
<li><a href="/">Logout</a></li>
</ul>
</div>
</div>
</nav>
# 햄버거 메뉴는 구분만 해놓고 다음 강의에서 적용
'Full stack development > The Web Developer Bootcamp(2020)' 카테고리의 다른 글
| 302. Note about the installing MongoDB (0) | 2020.09.27 |
|---|---|
| 303. Mongo Shell Bacis (0) | 2020.09.27 |
| 299. YelpCamp: Styling Campgrounds (0) | 2020.09.26 |
| 298. Note about YelpCamp: Styling Campgrounds Lecture (0) | 2020.09.26 |
| 297. YelpCamp: Creating Campgrounds (0) | 2020.09.26 |