HTML5(7) - BS

1. BS = 웹 프런트엔드 개발 프레임워크 
    1) 트위터에서 웹 디자인을 쉽게하기 위해서
       CSS의 클래스 선택자에 정의된 스타일시트와
       자바스크립트 플러그인의 라이브러리임.

2. CSS vs BS 

3. BS 핵심요소
    1) CSS 
    2) Grid system
    3) 컴포넌트 
    4) JS 플러그인 


4. Grid system
    1) 반응형, 유동형 레이아웃을 지원하는 구역 분할 시스템 (총12분할)
    2) Magic Number 12
    3) 한 요소가 차지할 크기를 1칸에서 12칸까지 설정해줄수 있음.
    4) 한 요소가 차지할 크기를 해상도별로 따로 설정해줄수 있음.

5. 반응형 웹페이지
    1) 디바이스 장치에서 레이아웃이 달라지는 반응형 웹페이지를 만들 때 기본적으로
       꼭 포함해야하는 meta태그로 viewport 설정 :
        <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    2) 미디어쿼리 규칙
        @media(디바이스 사이즈){
            css 스타일
        }
    3) 부트스트랩에서는 디바이스 장치의 사이즈를 크게 5개로 나누는데 
       그중 laptop 컴퓨터용 사이즈가 최소 992px 이상일때이고,
       스마트폰은 디바이스 사이즈가 최대 767 px 이상일때 임.     

6. .container, .container-fluid
    1) 레이아웃을 만드는 가장 상위 요소 
    2) 전체 가로폭을 정하는 클래스 값
        - container : 고정폭 레이아웃을 만들때 사용함.
        - container-fluid : 좌우로 꽉 찬 레이아웃을 만들 때 사용함. 
                            가로 해상도에 상관없이 100%의 가록폭을 가짐.

7. .row 
    1) .container 또는 .container-fluid 안에 .row로 행을 만듦.

8. .col-*-*
    1) .row 안에 .col-*-*로 열을 만듦.
    2) 첫번째 *에는 sm,md,lg,xl,xxl 중의 하나가 (미디어사이즈),
       두번째 *에는 1부터 12까지의 수 중의 하나가 들어감.
    3) 1-12 : 행을 12등분하여 그 중 몇개를 사용할지 정함.  
    4) 행을 12등분 했으므로, 숫자의 합이 12면 .container(.container-fluid)를 꽉 채움.
       숫자의 합이 12보다 작으면 오른쪽에 공간이 남으며,
       12보다 크면 다음 줄로 넘어감.