3.2 Bootstrap Grid System

Bootstrap 그리드 시스템

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) {
  /* ... */
}

@screen-*의 @는 LESS의 변수를 의미한다. LESS는 CSS 프리프로세서(Preprocessor)로서 Bootstrap의 소스코드는 LESS를 기반으로 작성되었다.

2. Container

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

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

.container class
fixed width container로서 responsive fixed layout(반응형 고정폭 레이아웃)을 제공한다.
.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의 룰셋은 다음과 같다.

.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의 룰셋은 다음과 같다.

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

다음은 fixed width container(container class)와 full width container(container-fluid class)이 예제이다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
  <style>
    .container, .container-fluid {
      background: #eaeaed;
    }
    .fixed, .fluid {
      background: #2db34a;
      height: 100px;
      line-height: 100px;
      text-align: center;
      color: white;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="fixed">fixed width (.container)</div>
  </div>
  <br>
  <div class="container-fluid">
    <div class="fluid">full width (.container-fluid)</div>
  </div>
</body>
</html>

3. Grid system

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

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

bootstrap grid

Bootstrap Grid System

그리드 레이아웃을 구성 시에는 반드시 .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 중의 하나를 지정한다.

Grid options

Extra small devices
Phones
(~ 767px) 		Small devices Tablets
(768px ~) 		Medium devices Desktops
(992px ~) 		Large devices Desktops
(1200px ~)
Grid behavior 항상 수평 적용 viewport 너비가 breakpoint 이상이면 수평 적용, 미만이면 stack
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Column width Auto ~62px ~81px ~97px
Nestable Yes
Offsets Yes
Column ordering Yes

Grid options

Bootstrap Breakpoint

.col-- class가 선언된 요소는 viewport width에 따라 수평정렬 상태에서 수직정렬 상태로 변경된다. 이는 class가 적용 여부에 따라 결정되는데 class가 적용되면 수평정렬 상태를 유지한다.

col-xs-*(~ 768px) 클래스가 선언된 요소의 경우, viewport width에 관계없이 언제나 class가 적용되어 수평정렬 상태를 위지하지만, col-sm-*, col-md-*, col-lg-* 클래스가 선언된 요소의 경우, viewport width에 따라 class가 적용 여부가 결정되고 이에 따라 수평정렬 상태에서 수직정렬 상태로 변경된다.

viewport width class class 적용 여부 behavior
300px의 경우 col-xs ◯ 수평정렬
  col-sm ✕ stack
  col-md ✕ stack
  col-lg ✕ stack
800px의 경우 col-xs ◯ 수평정렬
  col-sm ◯ 수평정렬
  col-md ✕ stack
  col-lg ✕ stack
1000px의 경우 col-xs ◯ 수평정렬
  col-sm ◯ 수평정렬
  col-md ◯ 수평정렬
  col-lg ✕ stack
1500px의 경우 col-xs ◯ 수평정렬
  col-sm ◯ 수평정렬
  col-md ◯ 수평정렬
  col-lg ◯ 수평정렬

Bootstrap의 그리드 시스템은 12열까지 지원한다. 두번째 *에는 1부터 12까지의 숫자 중의 하나를 지정한다.

예를 들어 col-xs-1은 행 너비의 1/12를 열의 너비로 한다는 의미이다. col-xs-6은 행 너비의 6/12를 열의 너비로, col-xs-12은 행 너비의 12/12를 열의 너비로 지정한다.

즉 col-xs-12는 전체 너비, col-xs-6은 전체 너비의 반을 의미한다.

col-xs-1의 경우, 행에 12개가 들어 올 수 있으며 col-xs-6의 경우 2개, col-xs-12의 경우 1개가 들어 올 수 있다.

즉 행에 들어 올 수 있는 열은 두번째 *의 합 만큼이다. 12보다 클 경우는 다음 줄로 넘어간다.

  • 두번째 *의 합이 12인 경우, 행의 너비를 꽉 채운다.

  • 두번째 *의 합이 12보다 작은 경우, 오른쪽에 남는 부분이 생긴다.

  • 두번째 *의 합이 12보다 큰 경우, 12를 넘게한 마지막 열이 다음 줄로 넘어간다.

3.2.1 .col-xs-* class

viewport width와 관계없이 .col-xs-* 클래스는 언제나 적용되어 .col-xs-* 틀래스가 선언된 요소는 항상 수평으로 정렬된다.

아래는 Bootstrap에 정의되어 있는 .col-xs-* 클래스의 룰셋이다.

.col-xs-1 {
  width: 8.33333333%;
}

.col-xs-2 {
  width: 16.66666667%;
}

/* .col-xs-3 ~ .col-xs-12 */

.col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
  float: left;
}

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
  <style>
    .row { margin-bottom: 10px; }
    [class|="col"] {
      background: #2db34a;
      border: 1px solid #eaeaed;
      height: 50px;
      font-size: .8em;
      line-height: 50px;
      text-align: center;
      color: white;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="container-fluid">
    <p>viewport 너비와 관계없이 항상 수평으로 정렬된다.</p>
    <div class="row">
      <div class="col-xs-1">xs-1</div>
      <div class="col-xs-1">xs-1</div>
      <div class="col-xs-1">xs-1</div>
      <div class="col-xs-1">xs-1</div>
      <div class="col-xs-1">xs-1</div>
      <div class="col-xs-1">xs-1</div>
      <div class="col-xs-1">xs-1</div>
      <div class="col-xs-1">xs-1</div>
      <div class="col-xs-1">xs-1</div>
      <div class="col-xs-1">xs-1</div>
      <div class="col-xs-1">xs-1</div>
      <div class="col-xs-1">xs-1</div>
    </div>
    <div class="row">
      <div class="col-xs-8">xs-8</div>
      <div class="col-xs-4">xs-4</div>
    </div>
    <div class="row">
      <div class="col-xs-5">xs-5</div>
      <div class="col-xs-5">xs-5</div>
    </div>
    <div class="row">
      <div class="col-xs-5">xs-5</div>
      <div class="col-xs-5">xs-5</div>
      <div class="col-xs-4">xs-4</div>
    </div>
  </div>
</body>
</html>

3.2.2 .col-sm-* class

viewport width가 768px 이상(768px ~)일 때 .col-sm-* class는 적용된다. 768px 미만일 때는 media query에 의해 .col-sm-* class가 적용되지 않고 div 요소의 block 특성에 의해 100%의 너비를 가지며 수직으로 쌓이게 된다.

아래는 Bootstrap에 정의되어 있는 .col-sm-* 클래스의 룰셋이다.

@media (min-width: 768px) {
  .col-sm-1 {
    width: 8.33333333%;
  }

  .col-sm-2 {
    width: 16.66666667%;
  }

  /* .col-sm-3 ~ .col-sm-12 */

  .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 {
    float: left;
  }
}

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
  <style>
    .row { margin-bottom: 10px; }
    [class|="col"] {
      background: #2db34a;
      border: 1px solid #eaeaed;
      height: 50px;
      font-size: .8em;
      line-height: 50px;
      text-align: center;
      color: white;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="container-fluid">
    <p>viewport width가 768px 이상(768px ~)일 때 .col-sm-* class는 적용된다. 768px 미만일 때는 media query에 의해 .col-sm-* class가 적용되지 않고 div 요소의 block 특성에 의해 100%의 너비를 가지며 수직으로 쌓이게 된다.</p>
    <div class="row">
      <div class="col-sm-1">sm-1</div>
      <div class="col-sm-1">sm-1</div>
      <div class="col-sm-1">sm-1</div>
      <div class="col-sm-1">sm-1</div>
      <div class="col-sm-1">sm-1</div>
      <div class="col-sm-1">sm-1</div>
      <div class="col-sm-1">sm-1</div>
      <div class="col-sm-1">sm-1</div>
      <div class="col-sm-1">sm-1</div>
      <div class="col-sm-1">sm-1</div>
      <div class="col-sm-1">sm-1</div>
      <div class="col-sm-1">sm-1</div>
    </div>
    <div class="row">
      <div class="col-sm-8">sm-8</div>
      <div class="col-sm-4">sm-4</div>
    </div>
    <div class="row">
      <div class="col-sm-5">sm-5</div>
      <div class="col-sm-5">sm-5</div>
    </div>
    <div class="row">
      <div class="col-sm-5">sm-5</div>
      <div class="col-sm-5">sm-5</div>
      <div class="col-sm-4">sm-4</div>
    </div>
  </div>
</body>
</html>

3.2.3 .col-md-* class

viewport width가 992px 이상(992px ~)일 때 .col-md-* class는 적용된다. 992px 미만일 때는 media query에 의해 .col-md-* class가 적용되지 않고 div 요소의 block 특성에 의해 100%의 너비를 가지며 수직으로 쌓이게 된다.

3.2.4 .col-lg-* class

viewport width가 1200px 이상(1200px ~)일 때 .col-lg-* class는 적용된다. 1200px 미만일 때는 media query에 의해 .col-lg-* class가 적용되지 않고 div 요소의 block 특성에 의해 100%의 너비를 가지며 수직으로 쌓이게 된다.

3.3 col- class의 복합 구성

지금까지는 하나의 요소에 하나의 Class prefix(.col-xs-, .col-sm-, .col-md-, .col-lg-)만을 사용하였다.

<div class="col-sm-8">sm-8</div>

하지만 Class prefix를 혼합하여 사용할 수도 있다.

<div class="col-xs-12 col-sm-6">xs-12 sm-6</div>

위와 같이 정의하면 아래와 같이 동작한다.

  • viewport 너비가 768px 미만(~ 768px)이면 .col-xs-12 class가 적용된다.
  • viewport 너비가 768px 이상(768px ~)이면 .col-sm-6 class가 적용된다.

하지만 col-xs-* class는 언제나 적용된다고 하였다.

viewport width가 768px 이상(768px ~)인 경우 요소에 지정된 두개의 클래스는 경합하게 된다. 이때 우선순위는 CSS 파일 내에서 후위에 선언된 룰셋이 더 높다. 따라서 CSS 파일(bootstrap.css) 내에서 .col-xs-12보다 후위에 정의된 col-sm-6가 적용되게 된다.

/* Extra small devices (phones, less than 768px) */
/* Rule set for col-sm-* class */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
  /* Rule set for col-sm-* class */
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
  /* Rule set for col-md-* class */
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  /* Rule set for col-lg-* class */
}

<!DOCTYPE html>
<html>
<head>
  <style>
    .blue { color: blue; }
    .red  { color: red; }
  </style>
</head>
<body>
  <div class="red blue">Text</div>
</body>
</html>

breakpoint에 해당하는 class가 선언되어 있지 않다면 하위 breakpoint에 해당하는 class가 적용된다.

<div class="row">
  <div class="col-sm-12 col-md-8">.col-sm-12 .col-md-8</div>
  <div class="col-sm-6">.col-sm-6</div>
</div>

위의 경우, viewport width가 992px 이상일 때 첫번째 div 요소는 col-md-8가 지정되어 있으므로 col-md-8 class가 적용되지만 두번째 div 요소에는 col-md-이 지정되어 있지 않다. 따라서 viewport 너비가 992px 이상이더라도 col-sm-6 class가 적용된다.

Grid options

이는 col-xs-* class를 제외한 모든 col-*- class의 media query 조건이 min-width로 설정되었기 때문이다. min-width는 프로퍼티값 이상을 의미한다. 예를 들어 min-width: 768px의 경우 viewport 너비가 768px 이상일 경우 적용된다.

3.3.1 Mobile and desktop

Bootstrap의 breakpoint는 기본적으로 아래와 같다.

  • Mobile의 경우 breakpoint는 768px 미만(~ 768px)이며 class prefix는 .col-xs-*이다.
  • Desktop의 경우, breakpoint는 992px(992px ~) 이상이며 class prefix는 .col-md-*이다.

.col-xs-* class와 .col-md-* class를 혼용하면 아래와 같이 동작한다.

  • viewport width가 992px 미만(~ 768px)이면 .col-xs-* class가 적용된다.
  • viewport width가 992px 이상(992px ~)이면 .col-md-* class가 적용된다.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
  <style>
    .row {
      margin-bottom: 10px;
    }
    [class|="col"] {
      background: #2db34a;
      border: 1px solid #eaeaed;
      height: 50px;
      font-size: .8em;
      line-height: 50px;
      text-align: center;
      color: white;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="container-fluid">
    <p>Viewport width가 992px 이상이면 2열, 미만이면 1열로 정렬된다</p>
    <div class="row">
      <!--
      viewport width가 992px(medium device) 이상이면
      .col-md-8 class가 적용되어 width는 8/12(66.66666667%)

      viewport width가 992px(medium device) 미만이면
      .col-xs-12 class가 적용되어 width는 12/12(100%)
      -->
      <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
      <!--
      viewport width가 992px(medium device) 이상이면
      .col-md-4 class가 적용되어 width는 4/12(33.33333333%)

      viewport width가 992px(medium device) 미만이면
      .col-xs-12 class가 적용되어 width는 12/12(100%)
      -->
      <div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div>
    </div>

    <p>Viewport width가 992px 이상이면 3열, 미만이면 1열로 정렬된다</p>
    <div class="row">
      <!--
      viewport width가 992px(medium device) 이상이면
      .col-md-4 class가 적용되어 width는 4/12(33.33333333%)

      viewport width가 992px(medium device) 미만이면
      .col-xs-12 class가 적용되어 width는 12/12(100%)
      -->
      <div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div>
      <div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div>
      <div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div>
    </div>

    <p>viewport width와 관계없이 2열로 정렬된다</p>
    <div class="row">
      <!--
      viewport width와 관계없이 .col-xs-6 class가 적용되어 width는 6/12(50%)
      -->
      <div class="col-xs-6">.col-xs-6</div>
      <div class="col-xs-6">.col-xs-6</div>
    </div>
  </div>
</body>
</html>

3.3.2 Mobile, tablet, desktop

Bootstrap의 breakpoint는 기본적으로 아래와 같다.

  • Mobile의 경우 breakpoint는 768px 미만이며 class prefix는 .col-xs-*이다.
  • tablet의 경우 breakpoint는 768px 이상이며 class prefix는 .col-sm-*이다.
  • Desktop의 경우, breakpoint는 992px 이상이며 class prefix는 .col-md-*이다.

.col-xs-* class, .col-sm-* class, .col-md-* class를 혼용하면 아래와 같이 동작한다.

  • viewport width가 768px 미만이면 .col-xs-* class가 적용된다.
  • viewport width가 768px 이상이면 .col-sm-* class가 적용된다.
  • viewport width가 992px 이상이면 .col-md-* class가 적용된다.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
  <style>
    .row {
      margin-bottom: 10px;
    }
    [class|="col"] {
      background: #2db34a;
      border: 1px solid #eaeaed;
      height: 50px;
      font-size: .8em;
      line-height: 50px;
      text-align: center;
      color: white;
      font-weight: 700;
    }
    p.bg-info {
      font-weight: bold;
      padding: 10px;
      margin-right: -15px;
      margin-left: -15px;
    }
  </style>
</head>
<body>
  <div class="container">
    <p class="bg-info">Viewport width가 992px 이상이면 3열, 768px~991px이면 2열, 768px미만이면 1열로 정렬된다</p>
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-4">1</div>
      <div class="col-xs-12 col-sm-6 col-md-4">2</div>
      <div class="col-xs-12 col-sm-6 col-md-4">3</div>
      <div class="col-xs-12 col-sm-6 col-md-4">4</div>
      <div class="col-xs-12 col-sm-6 col-md-4">5</div>
      <div class="col-xs-12 col-sm-6 col-md-4">6</div>
    </div>
  </div>
</body>
</html>

breakpoint에 해당하는 class가 선언되어 있지 않다면 하위 breakpoint에 해당하는 class가 적용된다.

3.4 Nesting columns

열 내부에 그리드를 추가하면 자식 그리드의 전체 너비는 부모 열의 너비와 같다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
  <style>
    .row { margin-bottom: 10px; }
    [class|="col"] {
      background: #2db34a;
      border: 1px solid #eaeaed;
      height: 50px;
      font-size: .8em;
      line-height: 50px;
      text-align: center;
      color: white;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-9">
        Level 1: .col-sm-9
        <div class="row">
          <div class="col-xs-8 col-sm-6">
            Level 2: .col-xs-8 .col-sm-6
          </div>
          <div class="col-xs-4 col-sm-6">
            Level 2: .col-xs-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

3.5 Offsetting columns

열에 .col-*-offset-* class를 추가하면 오른쪽으로 열을 이동시킬 수 있다.

예를 들어 <div class="col-md-2 col-md-offset-4">의 경우, viewport 너비가 992px 이상이면 .col-md-4 만큼 오른쪽으로 이동한 후 .col-md-2 만큼의 너비를 갖는 열을 표시한다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
  <style>
    .row { margin-bottom: 10px; }
    [class|="col"] {
      background: #2db34a;
      border: 1px solid #eaeaed;
      height: 50px;
      font-size: .8em;
      line-height: 50px;
      text-align: center;
      color: white;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-4">.col-xs-4</div>
      <div class="col-xs-4 col-xs-offset-4">.col-xs-4 .col-xs-offset-4</div>
    </div>
    <div class="row">
      <div class="col-xs-3 col-xs-offset-3">.col-xs-3 .col-xs-offset-3</div>
      <div class="col-xs-3 col-xs-offset-3">.col-xs-3 .col-xs-offset-3</div>
    </div>
    <div class="row">
      <div class="col-xs-6 col-xs-offset-3">.col-xs-6 .col-xs-offset-3</div>
    </div>
  </div>
</body>
</html>

3.6 Column ordering

.col-*-push-* 와 .col-*-pull-* 클래스를 사용하여 열의 순서를 변경할 수 있다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
  <style>
    .row { margin-bottom: 10px; }
    [class|="col"] {
      background: #2db34a;
      border: 1px solid #eaeaed;
      height: 50px;
      font-size: .8em;
      line-height: 50px;
      text-align: center;
      color: white;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-9 col-xs-push-3">.col-xs-9 .col-xs-push-3</div>
      <div class="col-xs-3 col-xs-pull-9">.col-xs-3 .col-xs-pull-9</div>
    </div>
  </div>
</body>
</html>

Reference

Back to top

HTML5

10 lessons
  1. 1 프런트엔드 개발자 학습 방향
  2. 2 HTML5 기본 문법
  3. 3 시맨틱 요소와 검색 엔진
  4. 4 웹페이지의 구성하는 기본 태그
  5. 5 텍스트 관련 태그
  6. 6 HTML의 핵심 개념인 Hyperlink
  7. 7 목록(List)와 표(Table) 형식 표현을 위한 태그
  8. 8 이미지의 표현과 동영상, 음악 등 멀티미디어를 지원하는 태그
  9. 9 사용자와의 커뮤니케이션을 위한 폼 태그
  10. 10 웹페이지의 레이아웃을 구성하기 위해 공간을 분할하는 태그

CSS3

22 lessons
  1. 1 CSS 기본 문법
  2. 2 셀렉터
  3. 3 CSS 프로퍼티 값의 단위
  4. 4 박스 모델
  5. 5 display, visibility, opacity 프로퍼티
  6. 6 백그라운드
  7. 7 폰트와 텍스트
  8. 8 요소의 위치 정의
  9. 9 요소 정렬
  10. 10 스타일의 상속과 적용 우선 순위
  11. 11 벤더 프리픽스
  12. 12 그림자
  13. 13 그레이디언트
  14. 14 트랜지션
  15. 15 애니메이션
  16. 16 트랜스폼
  17. 17 웹디자인 타이포그래피(Typography)
  18. 18 레이아웃
  19. 19 반응형 레이아웃
  20. 20 플렉스 박스 레이아웃
  21. 21 수평/수직 중앙 정렬
  22. 22 image 요소 아래에 패딩된 여분의 공간 제거하기

JavaScript

36 lessons
  1. 1 기본 개념과 동작 원리 이해의 중요성
  2. 2 자바스크립트란?
  3. 3 자바스크립트 개발 환경과 실행 방법
  4. 4 브라우저 동작 원리
  5. 5 자바스크립트의 기본 문법
  6. 6 데이터 타입과 변수
  7. 7 연산자
  8. 8 제어문
  9. 9 타입 변환과 단축 평가
  10. 10 객체
  11. 11 객체와 변경불가성(Immutability)
  12. 12 함수
  13. 13 타입 체크
  14. 14 프로토타입
  15. 15 스코프
  16. 16 보다 안정적인 자바스크립트 개발 환경을 위한 Strict mode
  17. 17 함수 호출 방식에 의해 결정되는 this
  18. 18 클로저
  19. 19 자바스크립트 객체지향 프로그래밍
  20. 20 빌트인 객체
  21. 21 전역 객체
  22. 22 Number 레퍼 객체
  23. 23 수학 상수와 함수를 위한 Math 객체
  24. 24 날짜와 시간을 위한 Date 객체
  25. 25 정규표현식
  26. 26 String 레퍼 객체
  27. 27 배열
  28. 28 자바스크립트 배열은 배열이 아니다
  29. 29 배열 고차 함수
  30. 30 문서 객체 모델(Document Object Model)
  31. 31 동기식 처리 모델 vs 비동기식 처리 모델
  32. 32 이벤트
  33. 33 디바이스의 방향 정보를 다루는 자바스크립트 이벤트
  34. 34 비동기식 처리 모델과 Ajax
  35. 35 REST(Representational State Transfer) API
  36. 36 Single Page Application & Routing

ECMAScript6

14 lessons
  1. 1 let, const와 블록 레벨 스코프
  2. 2 템플릿 리터럴
  3. 3 화살표 함수
  4. 4 매개변수 기본값, Rest 파라미터, Spread 문법, Rest/Spread 프로퍼티
  5. 5 객체 리터럴 프로퍼티 기능 확장
  6. 6 디스트럭처링
  7. 7 클래스
  8. 8 모듈
  9. 9 프로미스
  10. 10 7번째 타입 심볼(Symbol)
  11. 11 이터레이션과 for...of 문
  12. 12 제너레이터와 async/await
  13. 13 Babel과 Webpack을 이용한 ES6 환경 구축 ①
  14. 14 Babel과 Webpack을 이용한 ES6 환경 구축 ②

Angular

13 lessons
  1. 1 Angular의 소개와 특징
  2. 2 Angular CLI를 사용한 프로젝트의 생성, 구성요소 추가와 빌드
  3. 3 컴포넌트 소개와 기본 구조
  4. 4 템플릿과 템플릿 문법
  5. 5 데이터 바인딩
  6. 6 빌트인 디렉티브
  7. 7 서비스와 의존성 주입
  8. 8 Reactive Programming과 RxJS
  9. 9 Cold observable과 Hot observable
  10. 10 Token 기반 인증
  11. 11 Angular CLI 환경에서 jQuery 플러그인 사용하기
  12. 12 Angular 파일 업로드
  13. 13 Firebase를 사용한 Angular 애플리케이션 배포

Tools

12 lessons
  1. 1 ESLint
  2. 2 Jekyll와 GitHub Pages를 사용한 Static WebSite 구축
  3. 3 JSON Server
  4. 4 Docker를 사용하여 MySQL 설치하고 접속하기
  5. 5 Docker를 사용하여 MongoDB 설치하고 접속하기
  6. 6 Parcel
  7. 7 Storybook
  8. 8 Jest에서 import/export를 사용하기
  9. 9 JSDoc을 사용하여 자바스크립트에 타입 힌트 제공하기
  10. 10 폐지된 @babel/polyfill 대신 @babel/plugin-transform-runtime을 사용해 폴리필 추가하기
  11. 11 Webpack DevServer
  12. 12 tailwindcss + PostCSS + Webpack
Close