주소록 - bootstrap으로 스타일링하기

작성자: Ian H
Date: 2016/09/23

소스코드

이 게시물에는 코드작성이 포함되어 있습니다. 소스코드를 받으신 후 진행해 주세요. MEAN Stack/개발 환경 구축에서 설명된 프로그램들(git, npm, atom editor)이 있어야 아래의 명령어들을 실행할 수 있습니다.

이 게시물의 소스코드는 주소록 만들기 / 주소록 - Module만들기에서 이어집니다.

contact-book.git 을 clone 한 적이 있는 경우: 터미널에서 해당 폴더로 이동 후 아래 명령어들을 붙여넣기합니다. 폴더 내 모든 코드가 이 게시물의 코드로 교체됩니다. 이를 원치 않으시면 이 방법을 선택하지 마세요.

git reset --hard
git pull
git reset --hard 40f9796
git reset --soft 0928756
npm install
atom .

contact-book.git 을 clone 한 적이 없는 경우: 터미널에서 코드를 다운 받을 폴더로 이동한 후 아래 명령어들을 붙여넣기하여 contact-book.git 을 clone 합니다.

git clone https://github.com/a-mean-blogger/contact-book.git
cd contact-book
git reset --hard 40f9796
git reset --soft 0928756
npm install
atom .

- Github에서 소스코드 보기: https://github.com/a-mean-blogger/contact-book/tree/40f97962e61679419e0298c0149d8708015acfa2

Bootstrap을 사용해서 웹사이트 스타일링을 해봅시다.
Bootstrap은 bootstrap css와 bootstrap js로 구성되어 있는데, 이 글에서는 bootstrap js는 사용하지 않고 bootstrap css만 사용합니다.

폴더구조

주황색은 변경된 파일, 회색은 변화가 없는 파일입니다.
웹사이트 스타일만 바꾸기 때문에 js파일들은 변화가 없고, ejs, css파일만 변화가 있습니다.

코드

<!-- views/partials/head.ejs -->

<meta name="viewport" content="width=device-width,initial-scale=1"> <!-- 1 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 2 -->
<link rel="stylesheet" href="/css/master.css">
<title>Contact</title>

1. mobile 브라우저는 데스크탑 사이트를 작은 화면에 보여주기 위해 자동으로 줌아웃을 하게 되어있습니다. viewport meta 태그로 이를 조절할 수 있습니다.

  • width: device-width로 브라우저의 너비를 모바일 기기의 width로 지정합니다. 
  • initial-scale: 1은 100%를 뜻합니다. 즉 사이트의 줌을 바꾸지 않습니다.

2. bootstrap 공식사이트가 제공하는 CDN link를 사용하였는데, css폴더에 다운로드해서 사용해도 됩니다. (bootstrap의 공식사이트의 CDN페이지: http://getbootstrap.com/getting-started/#download-cdn)
해당 주소를 복사해서 코드에 붙여넣기 하시면 됩니다.

<!-- views/partials/nav.ejs -->

<nav class="navbar navbar-default">
 <div class="container">
  <div class="navbar-header">
   <div class="navbar-brand">Contact Book</div>
  </div>
  <ul class="nav navbar-nav">
   <li><a href="/contacts">Index</a></li>
   <li><a href="/contacts/new">New</a></li>
  </ul>
 </div>
</nav>

nav는 class만 추가된 것이 아니라 구성이 약간 바뀌었는데, 추가된 tag는 class가 container인 div와 navbar-header인 div 두개 뿐입니다.
(사이트의 메인 메뉴 목록이 긴 막대안에 들어 있는 형식을 navigation bar(네비게이션 바)인데, bootstrap에서 이를 줄여서 navbar라고 합니다.)
navbar는 구성이 복잡하기 때문에 구성을 외울려고 하지 말고 필요할때마다 bootstrap의 nav페이지(http://getbootstrap.com/components/#navbar)에서 복사 붙여넣기 한 후에 불필요한 부분을 때어내는 방식으로 사용하도록 합시다. 쉽게 만들기 위해 mobile view에서 collapse 기능(버튼을 클릭시 메뉴가 열리고 닫히는 기능)은 제거하였습니다.

<!-- views/contacts/index.ejs -->

<!DOCTYPE html>
<html>
 <head>
  <% include ../partials/head %>
 </head>
 <body>
  <% include ../partials/nav %>

  <div class="container contact contact-index">
   <h2>Index</h2>
   <ul class="list-group">
    <% contacts.forEach(function(contact) { %>
     <li class="list-group-item">
      <a href="/contacts/<%= contact._id %>"><%= contact.name %></a>
     </li>
    <% }) %>
   </ul>
  </div>
 </body>
</html>

기존 코드에서 container, list-group, list-group-item class만 추가되었습니다.

<!-- views/contacts/new.ejs -->

<!DOCTYPE html>
<html>
 <head>
  <% include ../partials/head %>
 </head>
 <body>
  <% include ../partials/nav %>

  <div class="container contact contact-new">
   <div class="contact-menu">
    <a class="btn btn-default" href="/contacts">Back</a>
   </div>
   <h2>New</h2>
   <form class="contact-form" action="/contacts" method="post">
    <div class="form-group">
     <label for="name">Name</label>
     <input class="form-control" type="text" id="name" name="name" value="">
    </div>
    <div class="form-group">
     <label for="email">Email</label>
     <input class="form-control" type="text" id="email" name="email" value="">
    </div>
    <div class="form-group">
     <label for="phone">Phone</label>
     <input class="form-control" type="text" id="phone" name="phone" value="">
    </div>
    <div>
     <button type="submit" class="btn btn-default">Submit</button>
    </div>
   </form>
  </div>
 </body>
</html>

기존 코드에서 container, btn btn-default, form-group, form-class class만 추가되었습니다.

<!-- views/contacts/edit.ejs -->

<!DOCTYPE html>
<html>
 <head>
  <% include ../partials/head %>
 </head>
 <body>
  <% include ../partials/nav %>

  <div class="container contact contact-edit">
   <div class="contact-menu">
    <a class="btn btn-default" href="/contacts/<%= contact._id %>">Back</a>
   </div>
   <h2>Edit</h2>
   <form class="contact-form" action="/contacts/<%= contact._id %>?_method=put" method="post">    <div class="form-group">
     <label for="name">Name</label>
     <input class="form-control" type="text" id="name" name="name" value="<%= contact.name %>">
    </div>
    <div class="form-group">
     <label for="email">Email</label>
     <input class="form-control" type="text" id="email" name="email" value="<%= contact.email %>">
    </div>
    <div class="form-group">
     <label for="phone">Phone</label>
     <input class="form-control" type="text" id="phone" name="phone" value="<%= contact.phone %>">
    </div>
    <div>
     <button type="submit" class="btn btn-default">Submit</button>
    </div>
   </div>
  </form>
 </body>
</html>

기존 코드에서 container, btn btn-default, form-group, form-class class만 추가되었습니다.

<!-- views/contacts/show.ejs -->

<!DOCTYPE html>
<html>
 <head>
  <% include ../partials/head %>
 </head>
 <body>
  <% include ../partials/nav %>

  <div class="container contact contact-show">
   <div class="contact-menu">
    <a class="btn btn-default" href="/contacts">Back</a>
    <a class="btn btn-default" href="/contacts/<%= contact._id %>/edit">Edit</a>
    <form action="/contacts/<%= contact._id %>?_method=delete" method="post">
     <a class="btn btn-default" href="#" onclick="confirm('Do you want to delete this?')?this.parentElement.submit():null;">Delete</a>
    </form>
   <div>
   <h2>Show</h2>
   <h3><%= contact.name%></h3>
   <div>
    <label>Email</label><span><%= contact.email %></span>
   </div>
   <div>
    <label>Phone</label><span><%= contact.phone %></span>
   </div>
  </div>
 </body>
</html>

기존 코드에서 container, btn btn-default class만 추가되었습니다.

/* public/css/master.css */

.contact .contact-form,
.contact-index ul{
 max-width: 500px;
}
.contact h2{
 color: tomato;
}
.contact .contact-form label,
.contact-show label{
 display: inline-block;
 width: 50px;
}
.contact .contact-menu form{
 display: inline-block;
}

css는 설명을 생략합니다.

실행결과

화면크기를 바꿔 보면 알겠지만 화면 크기에 따라서 전체 사이즈가 바뀌는 것을 알 수 있습니다. 마지막은 스마트폰까지 줄였을 경우에 표시되는 화면입니다.

마치며..

nav에 div 2개를 추가하고 class 들만 추가하여 기본 스타일링을 해봤습니다.
물론 여기서 자신만의 css를 더 추가해 주면 더 멋진 사이트를 만들 수 있겠죠.
주소록 강좌는 여기까지입니다. 수고하셨습니다.

댓글

K
Kyowon Im 2017.02.13
좋은 강좌 감사합니다.
U
Unleyng Cheon 2018.10.11
자세하게 설명 해주셔서 감사합니다:) 정말 많은 도움이 되었습니다.
I
Ian H 2018.10.11
@Unleyng Cheon,
감사합니다. 좋은 하루되세요^^
댓글쓰기

이 글에 댓글을 다시려면 SNS 계정으로 로그인하세요. 자세히 알아보기
UP