Skip to content

Bootstrap #
Find similar titles

Structured data

Category
Programming

부트스트랩(Bootstrap) #

트위터 부트스트랩이란? #

- 웹 사이트 개발을 위한 오픈 소스 UI 개발 프레임워크
    * 개발자: Mark Otto와 Jacob Thornton
    * 현재 버전 : 3.3.2 (2015.03.25일 현재)

부트스트랩(Bootstrap)은 웹사이트 제작에 유용한 요소들을 모아 CSS와 JS로 만들어 놓은 오픈소스 통합 라이브러리다. 960.gs 그리드 시스템 기반으로 리스폰시브 레이아웃 모드를 지원한다.

트위터에서 일하던 두 명으로부터 시작된 이 프로젝트는 오늘날 많은 개발자 및 웹디자이너들에게 사랑받는 웹 개발 도구로 성장하였다. 수많은 새로운 사이트들이 부트스트랩을 기반으로 제작이 되고 있으며, 그 과정에서 찾은 버그나 새로운 기능에 대한 생각들은 토론과 검증을 통해 새 버전에 반영이 되어 많은 사람들이 함께 발전시켜 나가고 있다.

부트스트랩의 장점은 웹사이트 제작에 필요한 도구들을 빠르게 집어 쓸 수 있도록 해 놓은 편의성에 있지만, 다른 개발자들과 팀으로 작업을 하거나 프로젝트를 이어 받을 때 부트스트랩을 사용한다면 빠른 캐치업이 가능하다는 점이 있다.

부트스트랩 3 특징 #

* 반응형 (Responsive) : One framework, every device
* 그리드 (Grid) : 빠르고 쉽게 레이아웃 구성 가능
* 구성요소들 (Components) : 버튼, 모달 등 페이지 구성요소들 제공
* 테마 (Theme) : 기본제공 테마 외 다양한 유,무료 테마들

부트스트랩 3 레퍼런스 살펴보기 #

시작하기 (Getting Start) #

  1. 필요파일 다운로드 받는 법 :

    • 소스 다운로드
      • Download Bootstrap
      • Source Code
      • Sass
    • GitHub 를 통해 복제 또는 분기
    • Bower(프론트엔드 패키지 관리자) 로 설치
    • Bootstrap CDN
  2. 파일 구조

    • Precompiled Bootstrap
    • Bootstrap source code
  3. 어떻게 파일을 인클루드 할 것인가? (HTML 템플릿)

  4. 브라우저 지원

    • 크롬 (맥, 윈도우, iOS, 안드로이드)
    • 사파리 (맥, iOS만 지원, 윈도우는 거의 중단되었음)
    • 파이어폭스 (맥, 윈도우)
    • 오페라
    • 인터넷 익스플로러
      • IE8은 미디어쿼리 지원을 가능하게 하기 위해 respond.js 필요
      • IE8에서는 CSS3 속성이 지원되지 않음 Ex) 둥근모서리, 그림자효과 등
      • 오래된 IE 호환성 모드를 지원하지 않으므로 IE 최신 렌더링 모드를 사용할 수 있는 meta 태그 추가 Ex) <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
  5. 부트스트랩의 예제들

CSS #

  1. Overview

    • HTML5 doctype
      <!DOCTYPE html><html lang="en"> ... </html>

    • Mobile first

      <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    • Typography 와 links

      • body에 background-color: #fff; 설정
      • 기본 타이포그래피 : @font-family-base, @font-size-base, @line-height-base
      • 전역링크 색 : @link-color 에 설정, 밑줄효과는 :hover만 적용되 있음 (scaffolding.less)
    • CSS 초기화 : Noarmalize.css

    • Containers

      • 고정폭 반응형 : <div class=“container”>…</div>
      • 뷰포트 full-size : <div class=“container-fluid”>…</div>
  2. Grid system (12Column)

    • 미디어쿼리

      /* 모바일, 768px 이하 */ /* 기본 */ /* 태블릿, 768px 이상 */ @media (min-width: @screen-sm-min) { ... } /* 데스크탑, 992px 이상 */ @media (min-width: @screen-md-min) { ... } /* 데스크탑 와이드, 1200px 이상 */ @media (min-width: @screen-lg-min) { ... } - Grid Options

  3. Typography

    • 제목(Headings) <h1> ~ <h6>

    • 본문(Body copy)

      <body>와 모든 단락 전역 적용 : font-size: 14px, line-height: 1.428

      <p> 단락 : 행 높이의 절반의 하단 마진 가짐 (기본값기준 10px)

    • 인라인 텍스트 (Inline text elements), 정렬(Alignment), 약어(Abbreviations)

      • 리드문단 : <p class=“lead”>…</p>, 작은 텍스트: <small>…<small>, 굵게 : <strong>…</strong>
      • 이탤리체 : <em>…</em>, 정렬: .text-left, .text-center, .text-right, 약어: <abbr title=“풀네임”>…</abbr>

Components #

  • 버튼그룹

    • 일련의 버튼들을 그룹으로 한줄로 표현하는 컴포넌트이다.
    • 사용 예시

      <div class="btn-group" role="group" aria-label="...">
        <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>
      
  • 입력그룹

    • 텍스트 타입의 <input>의 왼쪽 시작부분 혹은 오른쪽 끝부분에 문자나 버튼을 추가하여 표현하는 컴포넌트이다.
    • 사용 예시

      <!-- 왼쪽 시작부분에 추가 -->
      <div class="input-group">
        <span class="input-group-addon" id="basic-addon1">@</span>
        <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
      </div>
      
      <!-- 오른쪽 끝부분에 추가 -->
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
        <span class="input-group-addon" id="basic-addon2">@example.com</span>
      </div>
      
      <!-- 양쪽 끝단에 추가 -->
      <div class="input-group">
        <span class="input-group-addon">$</span>
        <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
        <span class="input-group-addon">.00</span>
      </div>
      
  • 네비게이션

    • 메뉴를 여러가지 형태로 표현하는 컴포넌트이다.
    • 사용 예시

      <!-- 탭형 -->
      <ul class="nav nav-tabs">
        <li role="presentation" class="active"><a href="#">Home</a></li>
        <li role="presentation"><a href="#">Profile</a></li>
        <li role="presentation"><a href="#">Messages</a></li>
      </ul>
      
      <!-- 알약형 -->
      <ul class="nav nav-pills">
        <li role="presentation" class="active"><a href="#">Home</a></li>
        <li role="presentation"><a href="#">Profile</a></li>
        <li role="presentation"><a href="#">Messages</a></li>
      </ul>
      
  • 페이지네이션

    • 페이지로 분할된 상태 및 다른 페이지 이동 등의 컨트롤러를 표현하는 컴포넌트이다.
    • 사용 예시

      <nav>
        <ul class="pagination">
          <li>
            <a href="#" aria-label="Previous">
              <span aria-hidden="true">«</span>
            </a>
          </li>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li>
            <a href="#" aria-label="Next">
              <span aria-hidden="true">»</span>
            </a>
          </li>
        </ul>
      </nav>
      
  • 라벨

    • 텍스트를 라벨 모양으로 표현하는 컴포넌트이다.
    • 사용 예시

      <span class="label label-default">Default</span>
      <span class="label label-primary">Primary</span>
      <span class="label label-success">Success</span>
      <span class="label label-info">Info</span>
      <span class="label label-warning">Warning</span>
      <span class="label label-danger">Danger</span>
      
  • 배지

    • 텍스트를 배지 모양으로 표현하는 컴포넌트이다.
    • 사용 예시

      <a href="#">Inbox <span class="badge">42</span></a>
      
  • 패널

    • DOM을 여러가지 형태로 묶어서 표현하는 컴포넌트이다.
    • 사용 예시

      <!-- 기본 패널 -->
      <div class="panel panel-default">
        <div class="panel-body">
          Basic panel example
        </div>
      </div>
      
      <!-- 상단이 있는 패널 -->
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Panel title</h3>
        </div>
        <div class="panel-body">
          Panel content
        </div>
      </div>
      
      <!-- 하단이 있는 패널 -->
      <div class="panel panel-default">
        <div class="panel-body">
          Panel content
        </div>
        <div class="panel-footer">Panel footer</div>
      </div>
      

JavaScript #

Customize #

부트스트랩 4 #

부트스트랩의 최신버전은 4.3(2019년 기준)이다. 버전 3와의 차이는 컴파일러, 그리드 시스템 등 많은 점이 변경되었다. 또한 지원되는 브라우저 목록도 변경되었다. 구체적으로는 다음과 같은 변경사항이 있다.

* 최소 사양이 IE8에서 IE10로 변경되었다.
* 컴파일러가 Less에서 Sass로 변경되었다.
* CSS에서의 기본 단위가 pixel 단위에서 rem 단위로 변경되었다.
* Flexbox를 지원하여 유연성이 향상되었다.
* Material design과 비슷하게 Flat한 디자인이 적용되었다.
* reset이 Normalize.css에서 Reboot.css로 변경되었다.
* Cards 컴포넌트가 추가되고 Wells 및 Thumbnails 컴포넌트를 대체하였다.

기타 #

구성 #

  • 압축을 해제하면 기본 스타일시트, 반응형 스타일시트, 이미지, 자바스크립트 등이 있다.
  • 화면을 구성하는 요소들을 최대 12등분 할 수 있다.
  • 12개를 넘을 수 없다. 예를 들면, 10:2, 5:7 이런식으로 총합을 12로 맞춰주어야 한다.
  • 그리드테스트 참고

데모 #

다음 링크에서 고정 레이아웃과 반응형 모드의 차이를 확인할 수 있다. * 고정 레이아웃 데모 * 반응형 레이아웃 데모

테마 #

부트스트랩은 널리 사용되는 프론트엔드 프레임워크이다. 반응형 웹디자인을 기본으로 하고 있고, 폼 디자인, 메뉴바, 드롭다운 등 자주 사용되지만 손이 많이 가는 요소들의 디자인과 기능을 포함하고 있어 쉽게 사이트를 제작할 수 있다. 하지만, 부트스트랩 기본 모양을 사용하면 모든 사이트가 같은 디자인이 된다는 단점이 있다. 그래서 어느 정도 수정을 해야 차별화된 모습을 갖출 수 있다. [^2] 아래 사이트들에서 테마를 구입하여 비교적 쉽게 개발에 사용할 수 있다.

맺음말 #

즉시 반응형 웹사이트 프로토타입을 개발할 수 있다는 장점이 있어 부트스트랩은 현재도 널리 사용 중이며 계속 업데이트 되고 있다. 테마를 판매하여 수익을 창출하는 조직들도 점진적으로 생겨나고 있어 전망이 나쁘지 안을 것으로 예상된다. 지금부터 익혀보시기 바란다.

참고자료 #

  1. Redfrost 블로그
  2. CMSFactory.NET

Incoming Links #

Related Etcs #

0.0.1_20140628_0