Bootstrap #

Find similar titles

총 16회 업데이트 됨.

Edit

최초 작성자
SunsooHwang 2014-06-30 13:11:46
최근 업데이트
dongiljogun 2022-07-05 07:59:43

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) #

필요 파일 다운로드 받는 법 :
- 소스 다운로드
  - Download Bootstrap
  - Source Code
  - Sass
- GitHub 를 통해 복제 또는 분기
- Bower(프론트엔드 패키지 관리자) 로 설치
- Bootstrap CDN
파일 구조
- Precompiled Bootstrap
- Bootstrap source code
어떻게 파일을 인클루드 할 것인가? (HTML 템플릿)
브라우저 지원
- 크롬 (맥, 윈도우, iOS, 안드로이드)
- 사파리 (맥, iOS만 지원, 윈도우는 거의 중단되었음)
- 파이어폭스 (맥, 윈도우)
- 오페라
- 인터넷 익스플로러
  - IE8은 미디어쿼리 지원을 가능하게 하기 위해 respond.js 필요
  - IE8에서는 CSS3 속성이 지원되지 않음 Ex) 둥근 모서리, 그림자 효과 등
  - 오래된 IE 호환성 모드를 지원하지 않으므로 IE 최신 렌더링 모드를 사용할 수 있는 meta 태그 추가 Ex) <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
부트스트랩의 예제들

CSS #

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>
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
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 컴포넌트를 대체하였다.

부트스트랩 5 #

부트스트랩의 현재(2022.06.29 기준) 최신 버전(v 5.1.3)이다. 2020년에 출시 되었으며, 구버전보다 새로운 구성 요소, 더 빠른 스타일시트 및 더 나은 응답성을 제공하고 있다. 구체적으로는 다음과 같은 변경 사항이 있다.

* IE11 이하 사양은 지원하지 않는다.
* JavaScript로 전환되었다.(jQuery 없이 바닐라 JS로 만들어져있다.)
* 반응형 컨테이너 
    * 새로운 옵션 추가
        * '.container-sm'
        * '.container-md'
* ESM 버전이 도입되어 모듈로 사용 가능 (브라우저에서 지원하는 경우만.)

부트스트랩 3, 4 버전은 계속 지원하여 사용은 가능하지만, 새로운 기능은 추가되지 않는다.

CSS & JS #

다운로드
- css
- js
- cdn

부트스트랩 5 모듈 사용 #

    <script type="module">
      import { Toast } from 'bootstrap.esm.min.js'

      Array.from(document.querySelectorAll('.toast'))
        .forEach(toastNode => new Toast(toastNode))
    </script>

jQuery 사용 가능 여부 #

jQuery 없이 사용하도록 설계되었지만, jQuery와 함께 구성 요소를 사용할 수 있다. 부트스트랩이 jQuery를 감지하면 jQuery 플러그인 시스템에 모든 구성 요소를 추가한다.

기타 #

구성 #

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

데모 #

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

테마 #

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

맺음말 #

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

참고자료 #

Incoming Links #

Related Etcs (Etc 0) #

Bootstrap/Responsive tables

Structured data

Table of Contents

부트스트랩(Bootstrap) #

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

부트스트랩 3 특징 #

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

시작하기 (Getting Start) #

CSS #

Components #

JavaScript #

Customize #

부트스트랩 4 #

부트스트랩 5 #

CSS & JS #

부트스트랩 5 모듈 사용 #

jQuery 사용 가능 여부 #

기타 #

구성 #

데모 #

테마 #

맺음말 #

참고자료 #

Incoming Links #

Related Etcs (Etc 0) #