bootstrap - grid system 그리드 시스템

요새 화면ui 앞단 작업을 하고 있다. 이 작업은 bootstrap을 기반으로 한다. 특히 컴포넌트 요소들을 삽입해서 ui 를 구성하고 있기 때문에 bootstrap의 grid 을 잘 이해해야만 한다. 여태 bootstrap gird system을 이용할 때마다 대충대충 보고 사용했었는데, 이제 완벽하게 이해하고 싶어서 정리해보는 글이다. 😎😎

1. Media Query

Bootstrap은 Mobile-first 방식을 기본 지원하므로 Media query에 포함되지 않은 모든 정의는 768px 미만 디바이스를 위한 것!

Bootstrap은 기본적으로 4개의 breakpoint로 구간을 나눈다.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) {
  /* ... */
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) {
  /* ... */
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) {
  /* ... */
}

2. Container

Bootstrap은 콘텐츠를 감싸는 wrapping 요소(container)를 포함해야 한다. container는 그리드 시스템의 필수 요소이다.

container에는 2가지 종류가 있다.

1. .container class
fixed width container로서 responsive fixed layout(반응형 고정폭 레이아웃)을 제공한다.

2. .container-fluid class
full width container로서 fluid layout(유동 최대폭 레이아웃)을 제공한다.

2가지 container를 중첩 사용해서는 안된다. padding에 문제가 발생하기 때문이다.

2.1 fixed width container (responsive fixed layout)

responsive fixed layout(반응형 고정폭 레이아웃)을 만들 때 사용한다. Media query에 의해 반응형으로 동작하며 동일 breakpoint내에서는 viewport 너비가 늘어나거나 줄어들어도 고정폭을 갖는다.

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

2.2 full width container (fluid layout)

fluid layout(유동 최대폭 레이아웃)을 만들 때 사용한다. viewport 너비에 상관없이 언제나 콘텐츠 요소를 화면에 꽉차는 너비를 갖게 한다.

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

3. Grid system

앞에서 설명한 .container와 .container-fluid는 콘텐츠 요소를 포함하는 부모 요소로서 container 또는 wrapping 요소라고 부른다. container는 그리드 시스템을 위한 필수 사항이다.

그리드 시스템은 열을 나누어 콘텐츠를 원하는 위치에 배치하는 방법(Layout)을 말한다. Bootstrap은 반응형 12열 그리드 시스템을 제공한다.

그리드 레이아웃을 구성 시에는 반드시 .row(행)를 먼저 배치하고 행 안에 .col--(열)을 필요한 갯수만큼 배치한다. 즉, container 내에 .row(행)을 먼저 배치하고 그 안에 .col--(열)을 배치한다. 그리고 콘텐츠는 .col-- 내에 배치한다.

.container or .container-fluid
  .row
    .col-xs-#
      contents
    .col-xs-#
      contents
  .row
    .col-xs-#
      contents
    .col-xs-#
      contents

3.1 행(.row)의 구성

container(.container 또는 .container-fluid) 내에 .row class를 사용하여 행을 배치한다.

<div class="container">
  <div class="row">
    <!-- ... -->
  </div>
  <div class="row">
    <!-- ... -->
  </div>
</div>

3.2 열(.col--)의 구성

열은 행(.row) 내에 배치하여야 한다. .col-- class로 열을 배치하는데 첫번째 *에는 xs, sm, md, lg 중의 하나를 지정한다.

출처: https://poiemaweb.com/bootstrap-grid-system