주소록 - 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 d604ee1
git reset --soft 17d7b55
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 d604ee1
git reset --soft 17d7b55
npm install
atom .

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

Bootstrap을 사용해서 웹사이트 스타일링을 해봅시다.

폴더구조

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

코드

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

<meta name="viewport" content="width=device-width,initial-scale=1"> <!-- 1 -->

<!-- jquery & bootstrap --> <!-- 2 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<!-- my css -->
<link rel="stylesheet" href="/css/master.css">

<title>Contact</title>

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

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

2. bootstrap 공식 사이트 Introduction 페이지(https://getbootstrap.com/docs/4.1/getting-started/introduction)에서 제공하는 방법대로 BootStrap을 설정하였습니다. <link rel="stylesheet" href= ...>로 bootstrap css파일들을, <script src= ...>로 boostarp에 필요한 js파일들을 불러오고 있습니다.

여기서 한가지 중요한 점은 내 css파일들(여기서는 'master.css')들을 다른 라이브러리의 css파일들(여기서는 'bootstrap.min.css') 뒤에 둬야 합니다. css는 파일간에 충돌이 있는 경우 뒤에 호출된 스타일 효과를 우선시키기 때문입니다.

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

<nav class="navbar navbar-expand-sm navbar-light bg-light mb-3">
  <div class="container">
    <div class="navbar-brand">Contact Book</div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav">
        <li class="nav-item"><a href="/contacts" class="nav-link">Index</a></li>
        <li class="nav-item"><a href="/contacts/new" class="nav-link">New</a></li>
      </ul>
    </div>
  </div>
</nav>

nav는 class만 추가된 것이 아니라 bootstrap nav 형식에 맞춰서 꽤 많이 변경이 이루어 졌는데, 세부사항은 https://getbootstrap.com/docs/4.1/components/navbar 에서 공부하시고, 여기서는 간략히 몇가지 class만 짚고 넘어가겠습니다.

  • navbar: bootstrap navbar를 알리는 class입니다.
  • container: navbar 내용을 화면 가운데로 옮기는 목적으로 쓰였습니다. 한번 이 class를 지운 후에 사이트를 보면 정확히 무슨 일을 하는 class인지 쉽게 알 수 있습니다.
  • navbar-brand: 사이트 제목을 넣는 class입니다.
  • navbar-toggler: 작은 화면에서 메뉴를 숨기고 보여주는 버튼의 class입니다. data-target에 적용될 id를 넣습니다.
  • collapse: 위 navbar-toggler class의 대상이 될 수 있는 class입니다. id를 맞춰줍니다.
  • navbar-nav: 실제 메뉴들을 가지는 class입니다.
  • nav-item: 개별 메뉴들을 가지는 class입니다.
<!-- 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 등의 bootstrap class가 추가되었습니다.

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

<!DOCTYPE html>
<html>
  <head>
    <%- include('../partials/head') %>
  </head>
  <body>
    <%- include('../partials/nav') %>

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

기존 코드에서 container, btn btn-primary, form-group, form-control 등의 bootstrap class가 추가되었습니다.

<!-- views/contacts/edit.ejs -->
<!DOCTYPE html>
<html>
  <head>
    <%- include('../partials/head') %>
  </head>
  <body>
    <%- include('../partials/nav') %>

    <div class="container contact contact-edit">
      <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 type="text" id="name" name="name" value="<%= contact.name %>" class="form-control">
        </div>
        <div class="form-group">
          <label for="email">Email</label>
          <input type="text" id="email" name="email" value="<%= contact.email %>" class="form-control">
        </div>
        <div class="form-group">
          <label for="phone">Phone</label>
          <input type="text" id="phone" name="phone" value="<%= contact.phone %>" class="form-control">
        </div>
        <div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </div>
    </form>
  </body>
</html>

기존 코드에서 container, btn btn-primary, form-group, form-control 등의 bootstrap class가 추가되었습니다.

<!-- views/contacts/show.ejs -->
<!DOCTYPE html>
<html>
  <head>
    <%- include('../partials/head') %>
  </head>
  <body>
    <%- include('../partials/nav') %>

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

기존 코드에서 container, btn btn-light class 등의 bootstrap class가 추가되고, bootstrap card(https://getbootstrap.com/docs/4.1/components/card)가 적용되었습니다.

/* 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: 70px;
}
.contact .contact-menu form{
  display: inline-block;
}

css는 설명을 생략합니다.

실행결과

Bootstrap이 적용되었습니다. 화면의 사이즈가 줄어들면 메뉴가 사라지고 세줄짜리 버튼이 생겼습니다. 참고로 이 세줄짜리 버튼의 공식 명칭은 햄버거 버튼(hamburger button)입니다.

메뉴 버튼을 누르면 메뉴가 나타납니다.


마치며..

bootstrap을 사용하면 어느정도 기본적인 느낌이 나는, 최소한 90년대 웹사이트 느낌은 나지 않는 사이트를 쉽게 만들 수 있습니다.
물론 여기서 자신만의 css를 더 추가해 주면 더 멋진 사이트를 만들 수 있겠죠.
주소록 강좌는 여기까지입니다. 수고하셨습니다.

댓글

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

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