부트스트랩 그리드시스템

부트스트랩
웹 프론트엔드 개발 프레임워크
"트위터 부트스트랩은 웹디자인을 쉽게하기 위해서 css의 클래스 선택자에 정의된 스타일시트와
자바스크립트 플러그인의 라이브러리이다"

장점
-자주 사용하는 내용들을 간편하고 손쉽게 사용가능
-틀이 규격화되어 있어 다른 사람과 디자인 공유가 쉬움

단점
-이미 정의해놓은 정형화된 틀에 맞추어서 작업해야 하므로 복잡하게 꾸미거나 수정하기 힘듬
-다른 css와 중복되거나 클래스가 꼬일 수 있으므로 주의해야함
-부트스트랩만 믿고 디자인에 소홀해지거나 나태해 질 수 있음

핵심 요소
CSS / GRID SYSTEM / 컴포넌트 / JAVASCRIPT PLUGIN

GRID SYSTEM
반응형, 유동형 레이아웃을 지원하는 구역 분할 시스템 (총 12분할)
-한요소가 차지할 크기를 1칸에서 12칸까지 설정해줄 수 있다.
.col-lg (1200px 보다 클 때)
.col-md(992px 보다 클 때)
.col-sm(768px 보다 클 때)
.col-xs(768px 보다 작을때)
-한 요소가 차지할 크기를 해상도별로 따로 설정해줄 수 있다.
COMPONENTS
"버튼, 드롭다운, 네비게이션, 페이징, 프로그레스바 등등 자주 사용되는 CSS 요소들을 미리 구성하여 만들어 놓음"

JAVASCRIPT
"Modal, Dropdown, Tab, Carousel 등등 자주 사용되는 자바스크립트 요소들을 미리 구성하여 만들어 놓음"

부트스랩은 반응형 웹디자인을 쉽게 하기 위해 css의 클래스 선택자별 스타일이 정의되어 있고
동적으로 반응하는 요소들을 위해 자바스크립트 라이브러리를 활용한 코딩이 짜여져 있다.

부트스트랩의 구성요소는 css, 그리드 시스템, 컴포넌트 자바스크립트 라이브러리이다.

그리드 시스템은 한 요소가 차지할 크기를 해상도별로 따로 지정해줄 수 있는데 사용하는 그리드 시스템의 클래스명은
col-lg-*, col-md-*, col-sm-*, col-xs-*이다.

구조의 최상위 div요소에 .container 혹은 .container-fluid 추가
전체 가로폭을 정하는 클래스 값이다.

-.container : 고정폭 레이아웃을 만들 때 사용
-container-fluid : 좌우로 꽉 찬 레이아웃을 만들 때 사용한다.

offset의 활용:offset키워드를 이용했을 때에는 옆에 있는 컨텐츠에 영향을 주어서 같이 밀린다.
push, pull의 활용:ordering관련된 키워드는 옆에 있는 컨텐츠의 영향을 주지 않고 독단적으로 밀고 당겨온다.

컨텐츠 요소를 이동하고 싶을 때에는 offset을 사용하고 순서를 바꾸고 싶을 때에는 push, pull을 사용한다.

포인트 :
1) 부트스트랩을 활용하여 웹 코딩을 하려면 제일 처음 부트스트랩 사이트에서 필요한 파일을 다운 받거나
CDN 방식을 활용하려면 필요한 파일을 링크 걸어준다.
2) 구조의 최상위 구조에 div태그로 감싸고 .container 혹은 .container-fluid라는 클래스명을 붙여준다.
3) 구조의 최상위 컨테이너 요소 안쪽에 새로운 가로 한 줄을 넣으려면 div에 row라는 클래스명을 붙여 행을 만든다.
4) div.row 안쪽에 차지하기 원하는 영역 레이아웃을 %를 기획하여 col-미디어 사이즈-숫자의 클래스명을 지정한다.

포인트:
1) 불렛이나 번호의 스타일이 없는 list-style: none과 왼쪽의 여백을 제거하는 스타일을 주려면 ul이나 ol에
.list-unstyled 클래스명을 부여한다.
2) 해당요소의 꼭지점이 모가 둥근 스타일을 주려면 img-rounded, 동그란 원을 만드는스타일을 주려면 .img-circle, 
썸네일 형식의 스타일을 주려면 .img-thumbnail 클래스명을 부여한다.
3) 부트스트랩의 다양한 폰트 컬러를 지정하는 클래스명은 .text-muted, .text-primary, . text-success, .text-info, .text-warning, .text-danger가 있다.
4) 부트스트랩의 다양한 배경 컬러를 지정하는 클래스명으로는 .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger가 있다.

포인트:
1) 데스크탑 사이즈에서 원하는 요소를 그리드 영역안에서 두 칸 이동시키려면 .col-md-offset-2를 사용한다.
2) 그리드 영역 안에서 순서를 바꿀 때 사용하는 클래스명으로 오른쪽으로 밀어줄때는 .col-*push-*, 왼족으로 잡아당길 때에는 .col-*-pull-*를 사용한다.
3) .row안에 또 .row를 사용하여 해당요소 안에서 계속 12개의 그리드를 나눌 수 있는데 이러한 구문을 중첩구문이라 부른다.