이 게시물에는 코드작성이 포함되어 있습니다. 소스코드를 받으신 후 진행해 주세요. MEAN Stack/개발 환경 구축에서 설명된 프로그램들(git, npm, atom editor)이 있어야 아래의 명령어들을 실행할 수 있습니다.
이 게시물의 소스코드는 주소록 만들기 / 주소록 - Module만들기에서 이어집니다.
contact-book.git 을 clone 한 적이 있는 경우: 터미널에서 해당 폴더로 이동 후 아래 명령어들을 붙여넣기합니다. 폴더 내 모든 코드가 이 게시물의 코드로 교체됩니다. 이를 원치 않으시면 이 방법을 선택하지 마세요.
contact-book.git 을 clone 한 적이 없는 경우: 터미널에서 코드를 다운 받을 폴더로 이동한 후 아래 명령어들을 붙여넣기하여 contact-book.git 을 clone 합니다.
- Github에서 소스코드 보기: https://github.com/a-mean-blogger/contact-book/tree/8da52bf30d5ccec893a7464ca2938065650cf80e
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 태그로 이를 조절할 수 있습니다.
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만 짚고 넘어가겠습니다.
<!-- 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를 더 추가해 주면 더 멋진 사이트를 만들 수 있겠죠.
주소록 강좌는 여기까지입니다. 수고하셨습니다.
** 현재 항목(Node JS 첫걸음/주소록 만들기)의 마지막 글입니다.
댓글
이 글에 댓글을 다시려면 SNS 계정으로 로그인하세요. 자세히 알아보기