7. BS (웹스톰)

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

2. CSS vs BS

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

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 이상일 때이고 스마트폰은 디바이스 사이즈가 최대 767px 이상일 때임

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

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보다 크면 다음 줄로 넘어감