Bootstrap (1) 기초
Jan 11, 2021
»
Bootstrap
부트스트랩 (Bootstrap)
“Bootstrap is the most popular HTML, CSS, and JS framework for developing responsible, mobile first projects on the web.”
“부트스트랩은 반응형이며 모바일 우선인 웹 프로젝트 개발을 위한 가장 인기 있는 HTML, CSS, JS 프레임워크입니다.”
프레임워크(Framework)란?
- 프로그래밍에서 특정 운영 체제를 위한 응용 프로그램 표준 구조를 구현하는 Class와 라이브러리 모임 (웹 개발을 위한 컴포넌트 제공)
- 목적에 따라 효율적으로 구조를 짜놓는 개발 방식
- 쉽게 이야기하여 어떤 프로그램을 만들기 위한 기본 틀
라이브러리(Library)란?
- 재사용이 가능한 필요 기능으로 반복적인 코드 작성을 없애기 위해 언제든지 필요한 곳에서 호출하여 사용할 수 있도록 Class나 Function으로 만들어진 것
- 쉽게 이야기하여 프로그램 제작 시 필요한 기능
프레임워크 vs 라이브러리
- 둘의 차이는 제어 흐름에 대한 주도성이 누구 혹은 어디에 있는지
- 프레임워크: 주도성을 스스로 가지고 있고 사용자는 그 안에 필요한 코드를 입력함
- 틀 안에 이미 제어 흐름에 대한 주도성 가짐 (가져다가 쓴다기보다 거기에 들어가서 사용한다는 느낌으로 접근)
- 라이브러리: 사용자가 전체적인 흐름을 만들며 라이브러리를 가져다 씀
- 가져다가 사용하고 호출하는 측에 전적으로 주도성 가짐
- 프레임워크: 주도성을 스스로 가지고 있고 사용자는 그 안에 필요한 코드를 입력함
부트스트랩이란?
- 트위터 웹 디자이너와 개발자가 만든 오픈형 UI 프레임워크
- 동적인 웹사이트 및 웹 응용 개발을 위한 프론트엔드 프레임워크
- 입력창, 버튼, 내비게이션 및 기타 구성물, 각종 레이아웃 등을 HTML 및 CSS 기반의 디자인 템플릿으로 제공하며 추가적인 자바스크립트 확장들도 포함
- 부트스트랩과 함께 보통의 HTML 요소들, 맞춤형 HTML과 CSS 컴포넌트들 그리고 jQuery 플러그인들을 응용하여 광범위하고 다양한 문서 생성 가능
- 부트스트랩을 사용하면 미리 Class가 정해진 CSS 스타일시트로 인해 마크업 할 때 정해진 Class를 쓰는 것만으로도 자동으로 디자인됨
- 부트스트랩이 주는 편리함의 목적은 사용자가 보는 디자인과 동작 구현 방식을 보다 빠르게 구현해 주는 데에 있음 (UI)
- 편리하고 빠르게 레이아웃을 구성하고 다양한 인터페이스를 사용할 수 있음
- 웹사이트와 애플리케이션을 단일 코드 베이스로 CSS 미디어쿼리를 이용하여 휴대 전화부터 태블릿, 데스크탑까지 쉽고 효과적으로 크기를 조절함 (브라우저 호환 가능)
- 프론트엔드 웹 개발을 더 빠르고 쉽게 만들어 줌
- 모든 기술 수준의 사람들, 모든 형태의 기기들, 모든 크기의 프로젝트들을 위해 편리성을 주고자 만들어짐 (사용하기 쉬움)