[Web][Bootstrap] Bootstrap v5.1 간단히 따라하기 -3. container와 grid이용하기

Bootstrap grid를 이용해서 컨텐츠 배열을 뷰포트에 따라 반응하도록 만들 수 있다.

1.  1열에 여러행 만들기

    <div class="container">
      <div class="row">
        <div class="col" style="background-color : coral">1</div>
        <div class="col" style="background-color : green">2</div>
        <div class="col" style="background-color : yellow">3</div>
        <div class="col" style="background-color : powderblue">4</div>
      </div>
    </div>

2. 1행에 여러열 만들기 

    <div class="container">
      <div class="col">
        <div class="row" style="background-color : rgb(60, 76, 170)">1</div>
        <div class="row" style="background-color : rgb(234, 145, 228)">2</div>
        <div class="row" style="background-color : rgb(107, 181, 131)">3</div>
        <div class="row" style="background-color : rgb(247, 184, 133)">4</div>
      </div>
    </div>

뷰포트에 따른 배치하기

화면의 하나의 셀이 차지하는 공간이 최대 12이라 여기면 

col-lg-1~12/col-md-1~12/ col-sm-1~12

으로 나눠서 lg은 pc 화면 md는 패드화면 sm 은 휴대폰 화면일 경우의 뷰포트 크기 설정을 할 수 있다. 

예를 들어 가장 첫번째1의 셀이 가로를 모두 차지하고 싶다면

<div class="col col-lg-12" style="background-color : coral">1</div>

와 같이 변경해주면 된다. 이를 이용해서 배치 설정을 다양하게 할 수 있다.

 

4. container

 

기본컨테이너는 고정너비 컨테이너이다.

이전 포스팅에서도 grid을 만들 때 container안에 넣어서 저절로 padding이 설정되어 있다.

max-width 가 속성에 따라서 다르게 지정되는데 

 

1).contianer : 기본 컨테이너

.container의 max-width은 각 반응형 중단점에 설정되어있다. 

<div class="container">
  <!-- Content here -->
</div>

 

2) .container-fluid : 플루이드 컨테이너

.container-fluid 은 중단점은 width:100% 설정되어있다.

<div class="container-fluid">
  ...
</div>

 

위 두가지 기본형과 플루이드의 큰차이는 플루이드는 어떤 화면이든 가득차게 설정되어있고 기본형은 sm반응형이 아닌 이상 padding이 설정되어 있다.

 

3).container-{breakpoint}

sm / md / lg / xl / xxl 등이 있다.