부트스트랩 RAW , COL

기존에는 부트스트랩을 이쁜 css 작성용으로 생각했었는데,
부트스트랩의 강력함은 그리드에 있었다.

 

https://getbootstrap.kr/docs/5.3/layout/grid/

그리드 시스템

 

화면의 크기에 따라 반응형으로 중단점 을 위와같이 사이즈 별로 나눠놓았고

하나의 row 에 최대 12개의 col 이 들어갈 수 있도록 레이아웃이 구성되어있다.

 

<div class="container text-center">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

위와 같이, col-    뒤에 숫자를 붙임으로서 12개의 칸 중에 몇 개를 차지할 지 선택할 수 있고
col의 상위 요소에 옵션을 넣는 것으로 어떤 형태로 정렬할지 선택할 수 있다.

 

offset-  을 사용하면 왼쪽으로 부터 해당 칸 수 만큼 공백으로 만들 수 있다.

col-md-4 의 경우, md 사이즈보다 큰 화면일 경우, 해당 요소를 raw 내에서 4칸만큼 차지하게 만들겠다는 의미이다.

 

부트스트랩 3 기준으로, col 은 float 속성을 가지므로, 먼저 선언한 것이 왼쪽부터 쌓이게 된다.

 

 

 

부트스트랩 공식문서를 활용하면 유용한 class 명을 알 수 있으니 시간이 날 때 하나씩 보는 것도 좋다.