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 #

JavaScript #

Customize #

기타 #

구성 #

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

데모 #

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

테마 #

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

맺음말 #

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

참고자료 #

  1. Redfrost 블로그
  2. CMSFactory.NET

Incoming Links #

Related Etcs #

0.0.1_20140628_0