위키원
부트스트랩
부투스트랩은 웹 사이트나 웹 응용 프로그램을 작성하기 위해 사용하는 무료 소프트웨어 도구 모음이다.
목차
개요
부트스트랩은 동적인 웹 사이트 및 웹 응용 개발을 위한 프론트엔드 프레임워크로, 입력 창, 버튼, 네비게이션 및 기타 구성물, 각종 레이아웃 등을 HTML 및 CSS 기반의 디자인 템플릿으로 제공하며 추가적인 자바스크립트 확장들도 포함한다. 하나의 CSS 로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동하고 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다. 부트스트랩은 트위터의 두 개발자인 마크 오토(Mark Otto)와 제이콥 손튼(Jacob Thornton)에 의해 처음으로 개발되었다. 트위터 내부적으로 개발을 일관성 있게 통합하고 유지하기 위해 개발된 프레임워크로 초기에는 트위터 블루프린트(Twitter Blueprint)라 불리웠다. 그 후 몇 달의 개발 기간을 거쳐 이름을 부트스트랩으로 바꾸고 2011년 8월에 최초로 공개되었다.[1]
역사
트위터에서 시작된 jQuery 기반의 오픈 소스 웹 프레임워크로 시작은 디자이너 하나와 트위터의 한 개발자였다. 부트스트랩의 원래 이름은 Twitter Blueprint로 마크 오토(Mark Otto)와 제이콥 손튼(Jacob Thornton)이 만들었다. 기존에 여러 인터페이스에 대응하기 위한 다양한 라이브러리들이 존재했지만 정형화되지 않아 유지, 보수에 어려움이 있었다. 트위터의 개발자였던 Mark Otto는 이를 통합하기 위해 부트스트랩을 만들었고 트위터의 다른 개발자들이 개발에 기여하기 시작했다. 부트스트랩이라는 이름은 2011년 8월 19일 오픈 소스가 발표되면서 지어졌다. 2012년 1월 31일 부트스트랩 2가 발표되었다. 이 버전에서는 12컬럼 그리드 레이아웃과 반응형 디자인이 포함되었다.[2] 2013년 8월 19일 3.0 정식 버전이 나왔다. 2.x대 버전보다 구조를 단순화하고 모바일 지원을 강화했다고 한다. 이러다보니 디자인이 2.x보다 상당히 심플해졌는데, 2.x 시절의 디자인을 지원하는 테마 CSS 파일을 별도로 제공한다. 테마 CSS를 적용하면 2.x 시절의 디자인을 볼 수 있다. 2015년 8월 19일, 부트스트랩 탄생 4주년을 기념해 버전 4의 알파 테스트가 시작되었다. 컴파일러가 less에서 sass로 변경되었고, 그리드 시스템을 개선하고, Flexbox 지원, well, thumbnail, panel 컴퍼넌트를 card로 통합 등등의 많은 변경점이 예정되어 있다. 이러다보니 IE8 지원도 끊기고 최소 지원이 IE9로 올라갈 예정이다. 그래서 자연스럽게 Windows XP의 부트스트랩 지원도 버전 3에서 끊긴다. 버전 3 때 버전 2의 지원을 바로 끊어버려서 많은 혼란이 있었던 것에 비해 버전 4때는 발표 이후에도 버전 3의 지원을 당분간 계속할 것이라고 한다. 그러나 개발이 상당히 더디다. 2016년 9월 알파 테스트를 시작한지 1년이 넘도록 알파 테스트만 했었다. 버전 3이 거의 6개월만에 알파 베타 테스트를 다 하고 정식을 내놓은 것에 비하면 상당히 느린 행보다. 2015년 12월 8일에 알파 2 버전이 나온 이후로는 7개월간 아무런 소식이 없었고, 공식 블로그도 침묵에 빠졌다. 그러다 2016년 7월 27일 알파 3 버전이, 9월 5일에 알파 4 버전이 나왔다. 윈도우 XP 지원 종료로 인해 IE8 이하 버전이 버려지고, 최신 버전이자 마지막 버전인 IE11의 점유율이 증가하면서 호환성보다는 성능을 고려하여 부트스트랩 4 버전부터는 IE10 이상만 지원하게 되었다. 구버전 브라우저에서도 레이아웃 깨짐 없이 잘 보여야 하는 사이트는 부트스트랩 3을 쓰라고 권고하고 있다.[3] 현재 2019년 가장 최신버전은 4.3버전이다.
특징
타이포그래피 및 각종 메뉴를 포함한 웹 페이지에서 사용되는 거의 모든 요소를 내장하고 있기 때문에 부트스트랩의 CSS와 자바스크립트, 관련 이미지만 있으면 대부분의 웹 페이지를 손쉽게 제작할 수 있도록 지원한다. 모듈화 되어 있으며 LESS(CSS의 기능을 보완해주는 전처리기이자 스타일시트 언어)의 다양한 요소를 구현하고 있다. 웹 브라우저의 종류 및 크기에 따라 디자인 요소가 자동으로 정렬되는 그리드 레이아웃을 표준 설계로 사용하며 동일한 하나의 웹 페이지를 수정 없이 데스크탑, 태블릿, 스마트 폰에서모두 볼 수 있도록 지원한다. 버전 2.0에서는 팝 오버(pop over) 경고, 버튼, 툴 팁(tool tip), 탭 등의 플러그인이 지원되기 시작하였다.[1]
Bootstrap에서 해주고 있는 가장 기본적인 동작 중 하나는 바로 최대한 모든 브라우져들에서 동작할 수 있는 다른 스타일들을 하나로 통일 시켜주는 것이다. 예를 들면태그가 있으면, 각 브라우져별로 이 태그안에 있는 텍스트를 어떠한 방식으로, 어떠한 크기와 어떠한 폰트, 그리고 어떠한 굵기로 보여줄지 각각 판단해서 보여주어야 한다. 이럴 때 서로 다른 브라우져에서 만약 다르게 이 <h1>태그를 표시해준다면 브라우져별로 보이는 내용이 달라질 수 있는 위험성이 있기 때문에 이러한 것들을 브라우져의 기본값을 사용하도록 하는 것이 아니라, 각 태그들에 대하여 기본적인 설정들을 명시하고 있다.
프레임워크
"소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용이 가능하게끔 일련의 협업화된 형태로 클래스들을 제공하는 것" 프레임워크는 구체적이며 확장 가능한 기반 코드를 가지고 있으며, 설계자가 의도하는 여러 디자인 패턴의 집합으로 구성되어 있다.[4] 원하는 기능 구현에만 집중하여 빠르게 개발 할 수 있도록 기본적으로 필요한 기능을 갖추고 있는 것으로 재사용이 필요한 기능으로 반복적인 코드 작성을 없애기 위해 언제든지 필요한 곳에서 호출하여 사용할 수 있도록 Class나 Function으로 만들어진 라이브러리가 포함되어 있다. 프레임워크만으로는 실행되지 않으며 기능 추가를 해야 되고 프레임워크에 의존하여 개발해야 되며 프레임워크가 정의한 규칙을 준수해야 한다. 부트스트랩은 프런트엔드(사용자들에게 보이는 영역을 책임을 지는 것)용어와 프레임워크를 합쳐 프런트엔드 프레임워크라고도 불린다.
프레임워크 예시
- Java 개발자라면 Spring
- Python 개발자라면 Django
- JavaScript 개발자라면 Angularjs
- PHP 개발자라면 Laravel[5]
CSS[cascading style sheets]
웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트이다. 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄어들게 하였다. 기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS이다. 간단히 스타일 시트라고도 한다. HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹 페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다. 따라서 웹 개발자들은 보다 풍부한 디자인으로 웹을 설계할 수 있고, 글자의 크기, 글자체, 줄간격, 배경 색상, 배열위치 등을 자유롭게 선택하거나 변경할 수 있으며 유지·보수도 간편하게 할 수 있다.[6]
Bootstrap 프레임워크의 CSS 기능은 웹페이지에 적용하게 되는 CSS 규칙들을 기본적으로 설정하고, 기본 HTML 요소들에 대한 스타일을 적용하는 기능들을 포함하고 있다. 특히, Bootstrap 프레임워크에서 제공해주고 있는 반응형 웹페이지의 가장 큰 기능인 그리드 형식으로 여러 칼럼으로 보여주다가 브라우져의 크기가 작아지면 세로로 나열시키는 기능을 이 CSS 기능에서 적용하면 된다. 양식이나 버튼들에 대해서도 다양한 CSS 설정을 기본적으로 해주니 기본 UI 디자인에서 조금 더 향상된 CSS를 체험할 수 있다.[7]
CSS 기본설정
CSS 기능을 이용하기 위해서는 기본적으로 HTML5를 사용해야 한다. 그러기 위해서는 DOCTYPE에 대해서 HTML5로 정의해야 한다. 가장 위에 문서 양식은 아래와 같이 정의하면 된다.
<!DOCTYPE html>
그리고 Bootstrap 2에서는 모바일은 옵션으로 다루고 있었지만, Bootstrap 3에서는 모바일 우선(mobile first)인 프레임워크로 작성이 되었기 때문에 뷰포트에 대한 메타태그 설정을 하면 좋다. 물론 사이트에 따라서 이러한 뷰포트는 다르게 설정을 해도 되며, 기존의 사이트에 적용하는 경우에는 모바일에 대한 화면의 크기가 달라지기 때문에 예상하지 못하는 문제가 발생할 수 있으므로 조심해야 한다.
<meta name="viewport" content="width=device-width, initial-scale=1">
이후에 <head> 태그 안에서 CSS 파일을 link 시키면 기본적인 CSS 기능들은 사용할 수 있다. 아래는 CDN에 있는 Bootstrap CSS 파일을 사용하는 것으로, 필요하면 개별적으로 서버에서 다운 받아서 사용하면 된다.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
이렇게 끝내면 기본적으로 Bootstrap의 CSS 기능을 사용하는 준비는 끝났다. 자바스크립트 기능이나 위젯을 사용하려면 추가로 자바스크립트 파일을 불러와야 한다. 이렇게 Bootstrap의 CSS를 가져오기만해도 Bootstrap에서는 기본적으로 브라우져에서 기본값을 가지고 서로 다르게 나타낼 수 있는 부분들의 스타일을 정의하여 동일하게 적용하도록 한다. [7]
활용
종류
각주
참고자료
- 두산백과,〈부트스트랩〉, 《네이버 지식백과》
- 〈부트스트랩〉, 《위키백과》
- 〈Bootstrap〉, 《나무위키》
- jokergt,〈프레임워크란?〉, 《티스토리》,2012-05-28
- TERMINOLOGY,〈라이브러리, 프레임워크, 아키텍처, 플래폼이란?〉, 《gaerae》,2016-11-30
- 두산백과,〈CSS〉, 《네이버 지식백과》
- unikys,〈Bootstrap시작하기, CSS 기능: 그리드 시스템(Grid system)〉, 《티스토리》,2016-06-23
