01. 부트스트랩 소개

bootstrap이란?

트위터 개발자가 오픈소스로 제공해주는 프론트엔드 프레임워크

영어버전 부트스트랩 : https://getbootstrap.com/
한글버전 부트스트랩 : http://bootstrapk.com/
( 두 부트스트랩의 version의 차이가 있을 수 있음 )

bootstrap 사용 방법

introduction -> link tag를 복사해서 stylesheet 연결하는 link 위쪽에다 붙어주기. -> script도 복붙해서 body 마지막쪽에 붙여놓기

❔ 프레임워크란 : 미리 만들어진 코드

bootstrap 사용 예시

component 중에 요소 하나 골라서 밑에 코드들을 복붙하면 그 요소가 만들어짐.

💡 실제로 사용할 때는 읽어보고 하는 것을 추천!

02. 부트스트랩 그리드

기본 구성원

1. container (컨테이너)
2. row (행)
3. column (열)

기본 규칙

💡 부트스트랩 사이트에 자세히 설명되어 있지만 많은 분들이 무시하는 몇 가지 규칙이다.

1. 행(div class="row")은 꼭 컨테이너(div class="container") 안에 넣어주기.
2. 열(div class="col")은 꼭 행(div class="row") 안에 넣어주기. 오직 열만 행의 직속 자식이 될 수 있다.
3. 콘텐츠(우리가 그리드에 넣고 싶은 내용)는 꼭 열(div class="col")안에 넣어주기.

이 규칙들만 지켜도 예상치 못한 레이아웃이 나오지 않을 것이다.

기본 사용법

부트스트랩 그리드에는 한 줄에 기본적으로 12칸의 열(column)이 있다고 생각하면 된다.
예를 들어 한 줄을 정확히 3등분하고 싶으면 네 칸을 차지하는 열 세 개를 쓰면 된다.
네 칸을 사용하는 열은 아래와 같다.

<div class="container">
    <div class="row">
      <!-- 정확히 3등분 -->
      <div class="col-4 first">first</div>
      <div class="col-4 second">second</div>
      <div class="col-4 third">third</div>
    </div>
</div>

12칸이 넘는 열이 들어간다면, 새로운 줄로 넘어가게 된다.

❔ 왜 12로 정했을까?
12는 상당히 많은 숫자들(1,2,3,4,6,12)로 나누어지기 때문에 괴장히 유연하다.
예를 들어 8칸으로 나누고 싶더라도 12라는 숫자의 유연함 덕분에 쉽게 할 수 있다.
col-6를 두 개 쓰면 2등분 할 수 있고, 그 안에서 또 col-3로 4등분을 하면 8칸이 생긴다.
이런식으로 열을 또 여러 열로 나누는 것을 '중첩(nesting)'한다고 부른다.
중첩을 하기 위해서는 우선 열(div class="col-6")안에 새로운 행(div class="row")을 써야한다.

03. 부트스트랩 반응형 그리드

정해둔 구간

1. Extra Small (<576px) : 모바일
2. Small (>= 576px) : 모바일
3. Medium (>= 768px) : 타블릿
4. Large (>= 992px) : 데스크탑
5. Extra Large (>=1200px) : 와이드 데스크탑

컨테이너 (container)

컨테이너는 가운데 정렬이 되어 있고, 그리드의 행들을 감싸주는 역할을 한다.

1. div class="container" : 구간별로 그리드에 고정된 width를 설정해준다.
2. div class="container-fluid" : 그리드는 항상 width : 100%;이다.

div class="container"

구간별로 그리드에 고정된 가로값을 설정해주고 싶을 때 이 container 클래스를 사용.

강사님 개인적으로 "container"클래스를 사용하는 것을 선호한다고 한다.

div class="container-fluid"

그리드가 항상 100%의 가로 길이를 갖는 것이 좋을 때 container-fluid 클래스 사용.

열 (column)

반응형 구간별로 (총 12칸 중) 열이 차지하는 칸의 개수도 다르게 할 수 있다.

예시1 (구간별로 모두 설정되어 있는 경우)

<div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">

1. Extra Small (< 576px): 12칸을 모두 차지
2. Small (≥ 576px): 6칸 차지
3. Medium (≥ 768px): 4칸 차지
4. Large (≥ 992px): 3칸 차지
5. Extra Large (≥ 1200px): 2칸 차지

예시2 (특정 구간만 설정되어 있는 경우)

<div class="col-12 col-lg-3">

1.Extra Small (< 576px): 12칸을 모두 차지
2.Small (≥ 576px): 12칸을 모두 차지
3.Medium (≥ 768px): 12칸을 모두 차지
4.Large (≥ 992px): 3칸 차지
5.Extra Large (≥ 1200px): 3칸 차지

1.Extra Small (< 576px): 6칸 차지
2.Small (≥ 576px): 6칸 차지
3.Medium (≥ 768px): 6칸 차지
4.Large (≥ 992px): 6칸 차지
5.Extra Large (≥ 1200px): 6칸 차지

❕ 현재의 트렌드는 직접 만드는 것이지만, 만일 백엔드가 더 중요시 되는 프로젝트라면 시간 절약을 위해 부트스트랩을 써서 빠르게 구현할 수 있는 점에서 부트스트랩을 사용한다.