[Bootstarp] 부트스트랩이란?

부트스트랩 탄생 !!

 

웹 페이지의 개발이 진행 될 때, 개발자의 취향에 따라 도구도 다르고 자신만의 라이브러리를 사용하기도 해서 보통은 개발 시작전에 어느정도의 표준을 정해놓고 작업을 진행 하기도 한다. 그러나, 여러 이유로 이런 작업이 진행되지 않은 경우 각 개발자들이 개발한 결과물이 제각각이기 때문에, 페이지의 각 부분 또는 기능별로 부분적인 작업을 진행한 후 병합 하는데 있어서 상당한 어려움이 있다. 이런경우, 심지어는 표준을 정하는 단계부터 다시 개발에 들어가기도 한다.

 

트위터에는 수많은 직원들이 각자가 맡은 부분의 프론트엔드 개발을 진행하기 때문에, 위와 같은 일관성 유지에 관한 문제에 항상 직면하곤 했다. 위와 같은 문제점을 해결하고자 트위터의 직원인 Mark Otto와 Jacob Thornton은 1년동안 업무외 시간과 주말에 프로젝트를 진행하면서, 정형화된 인터페이스 형태의 부트스트랩의 초기버전인 Twitter Blueprint를 개발했다. 초기 버전 개발 후 사내 개발자들에게 공개했는데, 폭발적인 반응을 얻었다.

이후로 점차 많은 개발자들이 프로젝트에 투입 됐고, 하나의 프레임워크 형태로 발전했다. 

 

Twitter Blueprint 프로젝트가 부트스트랩이라는 이름을 가지게 된 것은 2011년에 깃허브에 오픈소스로 발표되면서 부터 이다. 2011년 8월에 오픈소스로 등록 된 부트스트랩은 2014년 6월을 기준으로 깃허브에서

가장 인기있는 프로젝트가 된다.

 

그래서 부트스트랩이란??

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

 

 '프레임워크' 라고 하는 것은 재사용이 가능한 요소들의 집합되어 있으며, 정해진 구조와 틀 안에서 이것들이 확장이 가능한 기반 코드로 이루어 짐을 뜻한다. jquery는 라이브러리이고, 부트스트랩은 프레임워크다. 따라서, 우리는 '부트스트랩 프레임워크에서 jquery 라이브러리를 사용할 수 있다.'라고 말 할 수 있다.

 

 부트스트랩에 열광하는 이유는 글자, 인용문, 목록, 표, 입력폼, 버튼, 이미지, 아이콘 등의 자잘한 것 뿐만이 아니라, 드롭다운 메뉴, 버튼, 탭, 리스트, 메뉴바, 페이지 이동 바, 알림 메시지, 썸네일, 진행 바 등의 웹 페이지에서 많이 쓰이는 요소를 거의 전부 내장하고 있고, 입맛에 따라 재사용 할 수 있기 때문이다. 이 때문에 웬만한 웹 페이지는 부트스트랩의 CSS와 JavaScript, 관련 이미지만 설치하고 미리 지정된 CSS 클래스나 JavaScript 함수만 불러오면

트위터에서 쓰는 것과 비슷한 디자인이 뚝딱 만들어진다.

 

 게다가 PC용 디자인 뿐만 아니라 태블릿이나 스마트폰 같은 모바일용 디자인도 지원한다. 이 때문에 디자인을 할 시간이 크게 줄어들고, 여러 웹 브라우저를 지원하기 위한 크로스 브라우징에 골머리를 썩일 필요가 없다. 크로스 브라우징을 위한 각종 핵도 들어 있기 때문이다. 거기다 웹 브라우저 크기에 따라 자동으로 정렬되는 "그리드 시스템"을 채용하고 있기 때문에 하나의 웹 페이지를 데스크탑, 태블릿, 스마트폰 모두에서 무리없이 보게 만들 수 있다. 

즉 '반응형 웹 디자인'을 지원한다는 의미

 

부트스트랩 시작해보기

https://getbootstrap.kr/docs/5.3/getting-started/introduction/

Bootstrap 시작하기