Bootstrap 기본

Bootstrap 자체의 사용법은 사실 의외로 간단하다. 우선은 Bootstrap 사용의 준비를 하고, 기본 소스 코드에 대해 설명한다.

Bootstrap이란?

Web 사이트의 개발은 지난 몇년 동안 극적으로 바뀌었다. 크게 변화한 요인이 되고 있는 것 중 하나가 ‘스마트 폰’이다.

스마트 폰은 PC에 비해 화면이 작고 세로 길다. 따라서 PC 용으로 만들어진 Web 페이지를 그대로 보면 작고 보기 불편하다. 그래서, PC 용과는 별도로 스마트 폰용 페이지를 제공하기도 했다.

하지만 일부러 같은 내용의 Web 페이지를 여러개를 만드는 것은 비효율적이다. 또한 페이지 내용을 업데이트하게 되면, PC 용과 스마트 폰용 양쪽을 모두 변경해야 한다. 이는 매우 귀찮은 일이다.

Web 페이지를 로드할 때에, 그것이 컴퓨터 화면인지 스마트 폰인지를 확인하여 환경에 따라 자동으로 최적의 레이아웃에 표시하는 구조라면, 이러한 귀찮은 일은 없어질 것이다.

그런 생각에서 태어난 것이 “반응형 디자인(responsive design)“이라는 개념이다. 다양한 디바이스에 따라 최적화된 레이아웃을 생성하자는 것이 기본이다. 그리고 그것을 쉽게 실현할 수 있는 소프트웨어로 주목 받고 있는 것이 “Bootstrap"이다.

Bootstrap은 “프론트 엔드, Web 응용 프로그램 프레임워크"라는 프로그램이다. 일반적으로 Web 응용 프로그램을 개발하는데 “Web 응용 프로그램 프레임워크"라는 것이 사용되기도 하지만, 이것은 백엔드(서버 측)에서 동작하는 것이 기본이다. Bootstrap는 프런트엔드(Web 브라우저 측)에서 움직이는 프레임워크이다.

이 Bootstrap은 Mark Otto와 Jacob Thornton 2명이 중심이 되어 개발되는 오픈 소스 프로그램이다. Twitter 내부에서 개발하던 라이브러리로 각종 UI Component들을 모아 놓은 묶음이며, Bootstrap을 이용하면 간단한 스크립트와 CSS/HTML 만으로 깔끔한 형태의 UI/UX를 구성할 수 있다. 디자인에 익숙하지 않은 개발자들이 데모 또는 프로토타입을 만들기에 아주 유용하며, 구현하기 까다로운 여러 Javascript action들도 간단하게 라이브러리로 제공하고 있어 쉽게 사용할 수 있다. 현재 아래 사이트에서 공개되고 있다.

http://getbootstrap.com/

이 페이지에 있는 “Download Bootstrap"라는 버튼을 클릭하면 Getting Started 페이지의 다운로드 항목으로 이동한다. 여기에서 “Download Bootstrap"버튼을 클릭하면 Bootstrap 본체를 다운로드할 수 있다.

Bootstrap는 파일을 다운로드하여 직접 Web 사이트에 통합하여 사용하는 방법 이외에, CDN (Contents Delivery Network)을 이용하여 온라인상에서 파일을 다운로드하고 사용하는 방법 등이 있다. CDN을 이용한다면 파일을 다운로드할 필요가 없다. (이것에 대해서는 나중에 설명한다.)

Bootstrap 파일 구성

Bootstrap 배포 파일은 Zip 압축되어 있고, 압축을 풀면 필요한 파일들이 폴더별로 정리되어 있다.

이 폴더는 사실 Bootstrap의 Web 어플리케이션의 기본적인 파일 구성 그대로 되어있다. 알기 쉽게 말하자면, 이 폴더에 Bootstrap 사용할 HTML 파일을 배치하고, 폴더마다 Web 서버에 접속하면 그대로 Web 어플리케이션으로 동작하게 되어 있다.

Boostrap 다운로드

gitbub에서 다운로드 받는다.
https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip

혹은, 다음 링크에서 Boostrap을 다운로드 받는다.
http://getbootstrap.com/getting-started/

이 Bootstrap 폴더는 아래와 같은 형태로 되어 있다.

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

보면 알 수 있듯이, 스타일 시트(style sheet), 글꼴(font), JavaScript의 3가지가 각각 정리되어 있다. “css"폴더와 “js"폴더 안에는 같은 파일명으로 “min"가 붙여 있는 것과 붙어 있지 않은 것이 준비되어 있다(bootstrap.css과 bootstrap.min.css 등). 이것은 사실 내용은 동일하다. min이 붙은 것은 붙지 않은 것을 최소 크기로 압축한 것이다. 실제로 하나만 있어도 된다.

그리고, 이것이 Bootstrap에 필요한 모든 파일이 아니기 때문에 주의하자. 이 밖에 또 필요한 것이 있다. 그것은 “jQuery"이다.

Bootstrap에서는 jQuery를 이용하고 있지만, 이 파일은 jQuery 본체는 포함되지 않는다. 아무튼, 샘플 등에는 jQuery는 CDN을 이용하여 읽을 수 있게 되어 있기 때문에 준비하지 않아도 사용할 수 있지만, 만약 “CDN을 사용하지 않고 모든 파일을 자신의 사이트에 제공하고 싶다"생각한다면, jQuery 스크립트 파일을 다운로드"js “폴더에 저장한다.

jQuery 다운로드

https://jquery.com/download/

Bootstrap 기본 코드

그럼 Bootstrap을 사용한 Web 페이지가 어떻게 되는지, 그 기본적인 소스 코드를 작성해 보자. 우선, CDN을 사용하지 않고 파일을 로컬로 설치하는 경우의 작성법이다.

아래는 HTML 소스 코드가 예제이다. 이것을 설명하고 Bootstrap 폴더에 “index.html"와 같은 이름으로 저장한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Bootstrap</title>
 
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/bootstrap-theme.min.css">
 
</head>
<body >
     
<div class="container">
     
    <h1>Hello, world!</h1>
    <p>This is Bootstrap sample page!</p>
 
</div>
 
<script src="./js/jquery-3.1.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
</body>
</html>

(여기에서는 jquery-3.1.1.min.js라는 이름으로 “js"에 jQuery 파일을 배치한 전제로 설명되어 있다.)

언뜻 보면 보통 소스 코드 보이지만, 여러가지 포인트가 있다. 대충 포인트를 정리해 보자.

bootstrap.css / bootstrap-theme.css 로드

Bootstrap은 스타일 시트가 중요한 역할을 한다. “bootstrap.css"와 “bootstrap-theme.css” 2개는 반드시 로딩해 준다. 또한, 여기에서는 bootstrap.min.css / bootstrap-theme.min.css를 사용하고 있습지만, 어느 쪽도 동일하다.

스크립트는 어디에서 로드?

스크립트 파일은 두 가지가 있다. jQuery (jquery-xxx.js)과 Bootstrap 본체(bootstrap.js)이다. 이것들은 <body> 태그의 로드가 완료된 후에 로드하도록 한다.

이것은 Bootstrap 템플릿으로 그렇게 되어 있기 때문에, 거기에 맞춰서 있다. 그런데 사실은 <head> 내에 <script> 태그를 준비해도 문제없이 동작한다. Bootstrap 스크립트를 보면,

$(window).on('load', function () {...}

이렇게 하여 로드 후에 처리가 실행되도록 하여 제대로 동작되기 때문에, <body> 후에 로드하도록 작성하여서 움직이지 않거나 하지 않는다. 원하는 위치 바란다.

표시 내용은 `<div class="container">` 안에 작성한다.

보면 알 수 있듯이 <body> 안에는 우선 <div class="container">라는 태그가 있고, 그 안에 내용이 작성되어 있다. 이것은 별도로 필수는 아니지만, 약속으로 이렇게 작성하는 것이 좋다.

이 <div class="container"> 태그는 내용의 주위에 약간의 여백을 제공한다. 이것이 없으면 콘텐츠는 윈도우의 끝까지 빈틈없이 표시되어 버린다.

Bootstrap는 표시 디바이즈와 윈도우의 폭에 따라 콘텐츠의 폭을 자동 조정되지만, <div class="container">이 없으면 “처음부터 끝까지 꽉차게 표시"가 되어, Bootstrap 특징이 없어지고 말것이다.

CDN 사용 및 Compile, Bower

이제 기본적인 코드는 알았다. 로컬 환경에 파일을 두지 않고, CDN을 이용하는 방법을 설명한다.

Bootstrap을 다운로드 받고 업로드하는 것이 번거롭거나, 트래픽을 절약하고 싶다면 CDN을 이용해서 Bootstrap을 사용할 수 있다.

아래에 CDN 이용의 경우 기본 코드를 올려 두었다. 또한, 여기에서는 Bootstrap 3.3.7 기반에서 사용하는 경우를 전제로 설명하고 있다. 최신 버전이 있다면 변경하면 된다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Bootstrap</title>
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" crossorigin="anonymous">
 
</head>
<body>
     
<div class="container">
     
    <h1>Hello, world!</h1>
    <p>This is Bootstrap sample page!</p>
 
</div>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>
     
</body>
</html>

CDN은 여기에서 두 가지 서비스를 이용하고 있다. 아래에 같이 정리된다.

bootstrapcdn.com
이것은 Bootstrap가 제공하는 CDN이다. 2개의 스타일 시트와 Bootstrap 본체는 여기에서 로드 하도록 되어 있다.

Google Ajax API
jQuery 만은 ajax.googleapis.com라는 서버를 사용하고 있지만, 여기서는 Google이 제공하는 CDN 서비스를 이용하고 있다. jQuery에 게제된 CDN도 좋지만, Google Ajax API 라이브러리는 매우 안정적으로 사용할 수 있으므로 편리하다. Bootstrap의 샘플에서도 이를 사용하고 있기 때문에, 거기에 맞게 되어 있다.

기본적으로 <link>와 <script> 파일의 접근하는 곳이 바뀌어 있을 뿐, 그 이외는 동일하다. CDN 사용은 만일 CDN 서버에 문제가 있거나 하면 페이지 액세스가 매우 늦어지거나 하지만, 파일 관리 및 유지 보수가 쉬워진다. 버전 업도 링크 버전 번호를 갱신만하면 되기 때문이다.

그밖에

Compile하여 사용하기

Less, Javascript, Font 들이 묶인 파일을 다운로드 받는다. Less를 위해서는 Less 컴파일러와 몇 가지 설정이 필요하다.

https://github.com/twbs/bootstrap/archive/v3.3.7.zip

Bower를 통해서 Bootstrap을 설치

$ bower install bootstrap

Bootstrap은 설치를 위한 다양한 방법을 제공하고 있으면 각 방법들은 난이도와 용도의 차이가 있고, 모두 장단 점이 있다. 자신이 원하는 형태에 따라 설치하면 된다. 특정 방법으로 하지 않으면 문제가 생기거나 하는 것은 없다.

`<meta>` 태그에 대해

Bootstrap 자체의 기능은 아니지만, Bootstrap 이용의 Web 페이지를 준비할 때 반드시 작성해 두어야 하는 <meta> 태그가 있다. 그것들에 대해서도 부족한 것을 채워 두도록 하자.

IDEALLY 호환성 보기에 대해

<meta http-equiv = "X-UA-Compatible"content = "IE = edge">

이 태그는 Internet Explorer 대책을 위한 것이다. IE는 버전에 따라 표시가 바뀐다. 경우에 따라서는 마음대로 “호환성보기"라는 모드를 사용하여 IE7의 예전 버전에 따라 표시를 해 버리는 일이 있다. 이를 금지하는 태그가 이것이다. 이 태그를 넣으면 IE에서도 호환성 보기가 되지 않고, 표준 표시대로 된다.

뷰포트의 스케일 설정에 대해

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

이것은 스마트 폰의 Web 사이트를 작성을 해 본 사람이라면 알고 있을 것이다. 스마트 폰의 화면 해상도에 관계없이 동일하게 표시하기 위해 작성한다. 스마트 폰은 “뷰포트"라는 가상 스크린과 같은 것에 Web 페이지를 렌더링하고, 그것을 디바이스의 화면에 집어 넣은 것 같이 표시하고 있다. 그것을 잘 조정해 주기 위한 것이다.

이것들은 IE를 사용하지 않고, 스마트 폰도 이용이 아니라면 불필요한 것이지만, 지금의 시대에는 어떤 환경에서 액세스 올지 알 수 없기 때문에 반드시 기술해 두는 편이 좋다.

Bootstrap의 구성

Bootstrap은 사용방법에 따라 크게 3가지로 구분이 가능하다.

CSS stylesheet
Reusable component
Javascript component

CSS stylesheet

HTML 자체의 기능을 확장하고 강화할 수 있게 해주는 css들입니다. Bootstrap의 UI 요소중 가장 간단하게 사용할 수 있는 방법으로 Boostrap의 css에 정의된 class들을 tag에 적용하여 사용하는 방법이다.

예를들어 간단한 버튼을 만들기 위해서는 일일이 마우스 이벤트들을 처리해줘야하지만 이미 Bootstrap에 정의된 버튼 css를 사용하면 간단하게 버튼을 생성할 수 있다.

<a class="btn btn-primary" >link with bootstrap</a>

<a >link without bootstrap</a>

확인하기

아래는 Bootstrap에서 제공하는 CSS들을 기능별로 구분해 놓은 목록입니다. 각 카테고리 별로 자세한 내용은 링크를 통해 확인할 수 있다.

Overview : 개요
Grid system : Grid 형태의 영역구분을 가능하게 해주는 Layout 체계
Typography : 각종 텍스트 서식을 위한 스타일
Code : 코드 또는 키코드 표시를 위한 스타일
Tables : 테이블 스타일
Forms : 폼 스타일
Buttons : 버튼 스타일
Images : 이미지 스타일
Helper classses : 자주 사용하는 기능을 모아 놓은 유틸
Responsive utilities : 반응형 페이지 동작을 위한 유틸

Reusable component

HTML만으로는 표현할 수 없었던 화면 구성 요소들을 Bootstrap에서 css와 javascript의 조합을 통해 다양하게 제공한다.
버튼 묶음을 예로 들자면 HTML에서는 버튼을 단순하게 나열하는 것만으로 표시할 수 밖에 없었지만 Bootstrap을 통하면 시작적으로나 기능적으로 묶음으로서의 동작을 구현할 수 있다.

이런 Bootstrap 컴포넌트들을 사용할 때는 단순하게 tag안 class 입력만으로 가능하다.

<div class="btn-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>