Bootstrap IMG

부트스트랩(Bootstrap)이란?

웹에서 모바일 우선 반응형 프로젝트를 개발하기 위한 HTML, CSS 및 javascript 프레임 워크.
(HTML, CSS, and framework for developing responsive, mobile first projects on the web)


부트스트랩(Bootstrap)의 탄생배경

여러 명의 개발자들이 하나의 웹 페이지 개발을 진행하면, 개발 시작 전 표준 지침을 정해 놓아도 개발자의 취향에 따라 도구/라이브러리/코드 등에서의 일관성이 떨어지고 결과물이 제각각인 문제가 있다. 이를 수정하고 병합하려면 상당한 시간이 소요되며, 심한 경우 표준을 정하는 단계부터 다시 개발에 들어가야한다.
트위터에는 수많은 직원들이 각자가 맡은 부분의 프론트엔드 개발을 진행하기 때문에, 위와 같은 일관성 유지에 관한 문제에 항상 직면하곤 했다.
위와 같은 문제점을 해결하고자 트위터의 직원인 Mark Otto와 Jacob Thornton은 1년동안 업무 외 시간과 주말에 프로젝트를 진행하면서, 정형화된 인터페이스 형태의 부트스트랩의 초기버전인 Twitter Blueprint를 개발했다. 초기 버전 개발 후 사내 개발자들에게 공개했는데, 폭발적인 반응을 얻었다. 이후로 점차 많은 개발자들이 프로젝트에 투입됐고, 하나의 프레임워크 형태로 발전했다.

출처 : 개발자의 기록습관, [Bootstrap] 부트스트랩이란?, 김남준

=> “여러 명의 개발자들이 하나의 웹 페이지를 개발할 때, 일관성을 유지하기 위해 탄생한 웹 디자인 프레임워크”


부트스트랩이란?

  • 웹 사이트나 웹 응용 프로그램을 작성하기 위해 사용하는 무료 소프트웨어 도구 모음

  • 동적인 웹 사이트 및 응용 개발을 위한 프론트엔드 프레임워크로, 입력 창, 버튼, 네비게이션 및 기타 구성물, 각종 레이아웃 등 웹사이트를 쉽게 만들 수 있도록 HTML 및 CSS 기반의 디자인 템플릿을 제공 + 추가적인 자바스크립트 확장들도 포함

  • 웹 사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임 워크

  • 그리드 레이아웃을 표준 설계로 사용하여 동일한 하나의 웹 페이지를 수정 없이 휴대폰, 테블릿, 데스크탑을 포함한 다양한 기기에서 작동(반응형 웹 디자인 제공)

  • 다양한 기능을 제공하여 사용자가 쉽게 웹 사이트를 제작, 유지, 보수 가능



프레임워크(framework)와 라이브러리(library)


프레임워크(framework)란?

  • 프로그래밍에서 특정 운영 체제를 위한 응용 프로그램 표준 구조를 구현하는 Class와 라이브러리 모임(웹 개발을 위한 컴포넌트 제공)

  • 목적에 따라 효율적으로 구조를 짜 놓는 개발 방식

  • 쉽게 이야기하여 어떤 프로그램을 만들기 위한 기본 틀


라이브러리(library)란?

  • 재사용이 가능한 필요 기능으로 반복적인 코드 작성을 없애기 위해 언제든지 필요한 곳에서 호출하여 사용할 수 있도록 Class나 Function으로 만들어진 것

  • 쉽게 이야기하여 프로그램 제작 시 필요한 jQuery 모음


프레임워크(framework)와 라이브러리(library)의 차이점

  • 둘의 차이는 흐름(flow) 에 있다. 주도성/자율성

  • 프레임워크 : 주도성 가짐. 사용자가 필요한 코드를 직접 입력

  • 라이브러리 : 사용자가 가져온 코드에 필요한 라이브러리를 가져와 사용 (호출하여 사용)