부트스트랩(BOOTSTRAP)을 활용한 반응형 웹페이지 만들기_첫째날

부트스트랩(BOOTSTRAP)을 활용한 반응형 웹페이지 만들기

 

소개

 

BS = 웹 프론트엔드 개발 프레임워크

 

"트위터 부트스트랩은 웹디자인을 쉽게하기 위해서 CSS의 클래스 선택자에 정의된 스타일시트와 자바스크립트 플러그인의 라이브러리입니다."

 

CSS vs BS

 

CSS : 일반적인 CSS -> <style> 속성을 직접 작성

 

BS : 미리 정의된 <style>을 'class'로 적용

 

만들어진 클래스명을 공부하는 것이다.

 

부트스트랩 핵심요소는?

--> CSS, GRID SYSTEM(내가 어떤 디바이스 사이즈에서 어느 정도 비율을 차지하는 레이아웃을 만들건지), 컴포넌트(구성요소), JAVASCRIPT PLUGIN 으로 구성되어 있다.

 

CSS ex - Buttons

--> class명을 가져다가 쓰면 BS가 가진 버튼을 가져다가 쓸 수 있다.

 

http://getbootstrap.com -> 영어판

http://bootstrapk.com ->한글판

 

GRID SYSTEM

 

"반응형, 유동성 레이아웃을 지원하는 구역 분할 시스템 (총 12분할)"

 

Magic Number 12

 

GRID SYSTEM

 

.col-lg-    :      1200px 보다 클 때

.col-md-  :       992px 보다 클 때 ,

.col-sm-  :        768px 보다 클 때 ,

.col-xs-   :         768px 보다 작을 때

 

한 요소가 차지할 크기를 해상도별로 따로 설정해줄 수 있다.

 

http://bootstrapk.com/css/#grid 

CSS · 부트스트랩

 

JAVASCRIPT

 

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

 

꼭 기억해야 할 포인트 정리

 

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

 

2. 부트스트랩의 구성요소 css, GRID SYSTEM, 컴포넌트, 자바스크립트 라이브러리이다.

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