비전공자의 부트스트랩(BOOTSTRAP) 공부_1일차

부트스트랩(BOOTSTRAP)으로 웹페이지 만들기_ 1일차

 

 

  부트스트랩이란?

BootStrap = 반응형 웹디자인을 쉽게 개발할 수 있는 웹 프론트엔드 개발 프레임워크(웹디자인을 쉽게 하기 위해서 CSS의 클래스 선택자에 정의된 스타일시트와 자바스크립트 플러그인의 라이브러리)

 

+) 반응형 웹디자인(디바이스 장치에 따라서 웹페이지를 볼 때 같은 layout이 layout이 서로 다른 형식으로 보이는 것)

+) CSS : 웹페이지를 만들 때 기본 정보를 가지고 스타일을 만들 수 있는 것

 

 

CSS vs BS

• <style> 속성을 직접 다 작성해야 함   VS   미리 정의된(이미 다 정의되어 있는) <style>을 'class'로 적용

 

 

  핵심 요소?

1. CSS
2. GRID SYSTEM : 반응형을 만드는데 필요한 요소
   • 반응형, 유동형 레이아웃을 지원하는 구역 분할 시스템(총 12 분할)
   • 한 요소가 차지할 크기를 해상도별로 따로 설정해줄 수 있음 
     • .col-lg-* : 1200px 보다 클 때
     • .col-md-* : 992px 보다 클 때
     • .col-sm-* : 768px 보다 클 때
     • .col-xs-* : 768px 보다 작을 때
   • 한 요소가 차지할 크기를 1칸에서 12칸까지 설정해줄 수 있다.
3. 컴포넌트(COMPONENTS)
   • 아이콘, Dropdown, 내비게이션, 경보, 팝오버 등 재사용 가능한 컴포넌트
4. JAVASCRIPT
   • Modal, Dropdown, Tap, Carousel 등 자주 사용되는 자바스크립트 요소들을 미리 구성하여 만들어 놓음

 

 

  참고사이트

• 부트스트랩 사이트 한글판
• 부트스트랩 사이트 영문판

 

 

 

 

+) min 파일은 압축된 파일(밑의 두 링크를 비교해볼 것)

• https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css
• https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.css