Redirected from page "부트스트랩"

E,AHRSS

Bootstrap

last modified: 2016-06-11 21:08:33 Contributors

bootstrap.png
[PNG image (Unknown)]
Bootstrap

홈페이지

Contents

1. 개요
2. 설명
3. 관련 항목
4. 부트스트랩이 적용된 사이트

1. 개요

트위터에서 만든 HTML5 기반의 오픈 소스 웹 디자인 프레임워크.

2. 설명

트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS자바스크립트로 만들어 놓은 것이다. 웹 디자이너나 개발자 사이에서는 웹 디자인의 혁명이라고 불릴 정도로 폭발적인 반응을 얻는 프레임워크이다.

그 이유는, 글자, 인용문, 목록, 표, 입력폼, 버튼, 이미지, 아이콘 등의 자잘한 것 뿐만이 아니라, 드롭다운 메뉴, 버튼, 탭, 리스트, 메뉴바, 페이지 이동 바, 알림 메시지, 썸네일, 진행 바 등의 웹 페이지에서 많이 쓰이는 요소를 거의 전부 내장하고 있기 때문이다. 이 때문에 웬만한 웹 페이지는 부트스트랩의 CSS와 자바스크립트, 관련 이미지만 설치하고 미리 지정된 CSS 클래스나 자바스크립트 함수만 불러오면 트위터에서 쓰는 것과 엇비슷한 디자인이 뚝딱 만들어진다. 거기다 PC용 디자인 뿐만 아니라 태블릿이나 스마트폰 같은 모바일용 디자인도 지원한다. 이 때문에 디자인을 할 시간이 크게 줄어들고, 여러 웹 브라우저를 지원하기 위한 크로스 브라우징에 골머리를 썩일 필요가 없다. 크로스 브라우징을 위한 각종 핵도 들어 있기 때문이다[1]. 거기다 웹 브라우저 크기에 따라 자동으로 정렬되는 "그리드 시스템"[2]을 채용하고 있기 때문에 하나의 웹 페이지를 데스크탑, 태블릿, 스마트폰 모두에서 무리없이 보게 만들 수 있다. 즉 반응형 웹 디자인을 지원한다는 의미이다.

거기다 이게 오픈소스다. GPL은 아니고 아파치 라이선스를 사용하는데, 재배포 면에서는 GPL보다 휠씬 자유로운 라이선스이다. 단 같이 들어 있는 아이콘은 CCL BY 3.0을 사용하므로 출처를 밝혀야 한다. 소스까지 오픈되어있다 보니 여기서 파생된 프로젝트만 해도 수백 개를 넘어간다.

단점은 디자인이 정형화 되어 있다 보니 기본 디자인을 그대로 사용할 경우 비슷한 웹페이지가 양산될 수 있다는 것인데, 조금만 신경쓴다면 기본 디자인이 아닌 다른 디자인을 얼마든지 고를 수 있다. 다양한 테마중에 하나를 고르기가 힘들 정도이다. 물론 테마는 상용인 경우도 있으나 오픈소스이다보니 테마의 다양함이 한계가 없을 지경.

오픈소스이다 보니 사용자가 커스터마이징 하는 것도 자유롭고, 이 커스터마이징 한 것을 재배포해도 된다. 심지어는 상업적으로 판매하는 것도 허용한다. 물론 우리나라에서 선호되는 디자인때문에 소스를 뜯어 고치다시피 코딩을 해야해야 하는 경우도 있을 수는 있다. 이것 이외에는 HTML5에 맞춰져 있다 보니 구형 브라우저 지원이 미흡하다. HTML5가 제대로 지원되지 않는 IE7,8의 경우에는 강제로 HTML5를 인식시키는 자바스크립트 코드가 필요하고, 가뜩이나 자바스크립트 해석이 느린 IE 구버전을 더 느려지게 하는 주범이 된다. 부트스트랩을 쓰려면 예전 브라우져 지원은 포기하자. 버전 3.0에서는 IE7를 지원하지 않으며 IE8부터 정식 지원한다.

2013년 8월 19일 3.0 정식 버전이 나왔다. 2.x대 버전보다 구조를 단순화하고 모바일 지원을 강화했다고 한다. 이러다보니 디자인이 2.x보다 상당히 밋밋해졌는데, 2.x 시절의 디자인을 지원하는 테마 css 파일을 별도로 제공한다. 테마 css를 적용하면 2.x 시절의 디자인을 볼 수 있다.

----
  • [1] 물론 인터넷 익스플로러 6은 너무 오래된 브라우저라서 지원하지 않는다. 최소 지원은 인터넷 익스플로러 7부터다. 그나마 새로 나온 3.0에서는 IE7 지원이 없어졌다.
  • [2] 화면을 가로로 12개의 그리드로 분할하여 거기에 맞춰 각 요소의 박스 크기를 정해 쓸 수 있다. 이 그리드의 크기는 웹 브라우저의 크기에 따라 바뀌거나 자동으로 알맞게 정렬된다.
  • [3] 지금은 스킨이 바뀌어 해당되지 않는다.
  • [4] 2014년도에 홈페이지 폐쇄