부트스트랩(bootstrap)

• 세계에서 제일 인기있는 모바일우선형/반응형 프론트엔드 프레임워
• 프레임워크(Framework) 패키지 : 소스 + 디렉토리 라이브러리 : 여러 개의 패키지 프레임워크가 제공하는 공간에 라이브러리들을 넣을 수 있음
• 프레임워크는 가장 쉽게 표현한 한글은 도우미
• 가장 빈번하게 사용되는 CSS, JS를 미리 만들어놓고 CDN 방식이나 다운로드 방식으로 사용하도록 서비스

(1) 설치방법 getbootstrap.com 사이트에서 다운로드 > 압축해제 css에서 링크하여 사용

(2) 탄생배경 트위터 프로젝트에서 시작 서로 다른 인터페이스를 사용한 여러 개발자들의 공통 작업 디자인 불일치, 관리의 어려움, 코드의 방대함 -> 일관성 관리 불가 트위터 개발자와 UI 디자이너가 최초로 개발 2014년 6월 깃허브 프로젝트

(3) 부트스트랩이란 Front-End 개발을 빠르고 쉽게 할 수 있는 프레임워크 HTML, CSS 기반의 템플릿 양식, 버튼, 내비게이션 및 기타 요소 포함 트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS, JS로 구현 프레임워크이기 때문에 jQuery도 사용 가능함 상업적 이용 가능 모바일디자인 포함 PC, 태블릿 디자인 지원 검색엔진에서 bootstrap template로 검색하면 엄청난 양의 자료가 검색됨

(4) Container 화면 구성 요소들을 묶기 위한 것

1. container 반응형으로 동작, 고정폭을 가지고 있음 width 설정과 margin 설정을 통해 컨테이너와 브라우저 윈도우 사이의 여백 조정
2. container-fluid viewport 전체 폭을 모두 차지

(5) Forms & Components

HTML의 기본 컴포넌트를 고도화한 것

외워서 칠 생각하기엔 너무 많음..(찾아서 뽑아먹자)

(6) Grid

테이블과 유사하게 화면을 분할하여 레이아웃을 잡기 위한 것 기본적으로 12개의 컬럼, 5개의 그리드 옵션

그리드 옵션 예)

.col- (extra small device < 576px)

.col-sm- (small device > = 576px)

.col-md- (medium device > = 768px)

.col-lg- (large device > = 992px)

.col-xl-(xlarge device > = 1200px)

col-sm-2 : sm사이즈의 2컬럼 크기

(7) Utility

어디에서든 쓸 수 있는 유용한 속성들을 정의해놓은 것