[Bootstrap] Grid 시스템 이해하기

우리가 보이는 웹페이지 화면을 예전에는 HTML 에서는 table 을 이용해서 화면 구성을 했다. 그 이후는 웹페이지의 표준화를 위해서 <div></div> 태그를 이용한다.

 

bootstrap에서는 좀더 편리하게 화면을 구성할 수 있는 Grid 시스템을 제공한다.

 

기본 박스(<div></div>) 를 만들고 그 안에 여러개의 박스가 자연스럽게 공간을 차지하도록 만들어준다.

<div class="row">
  <div class="col">1칸</div>
  <div class="col">1칸</div>
  <div class="col">1칸</div>
</div>

기억할 사항은 class="row", class="col" 이다.

row 는 한줄

col 은 1칸을 의미한다.

즉 한줄에 몇개의 칸을 넣어주는 형태이다.

 

각 칸의 넓이를 자유롭게 변경해 줄 수 있다.

여기서 기억할 것은 총 12칸이다.

12칸을 어떻게 나눌것인가를 생각해야 한다.

 

<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>

col-sm-3 x 4 = 12 개 이다.

<div class="row">
  <div class="col-sm-1">1칸</div>
  <div class="col-sm-6">6칸</div>
  <div class="col-sm-2">2칸</div>
  <div class="col-sm-3">3칸</div>
</div>

1칸 + 6칸 + 2칸 + 3칸 = 총 12칸

이런형식으로 보여진다.

 

col 

col-sm 576px 이하의 화면에서는 무조건 한줄씩 된다.

col-md 768px 이하의 화면에서는 무조건 한줄씩 된다.

col-lg 992px 이하의 화면에서는 무조건 한줄씩 된다.

col-xl 1200px 이하의 화면에서는 무조건 한줄씩 된다.

col-xxl 1400px 이하의 화면에서는 무조건 한줄씩 된다.

 

다음과 같이 겹쳐서 사용할 수도 있다.

<div class="row">
  <div class="col-sm-3 col-md-1">1칸</div>
  <div class="col-sm-3 col-md-6">6칸</div>
  <div class="col-sm-3 col-md-2">2칸</div>
  <div class="col-sm-3 col-md-3">3칸</div>
</div>