Bootstrap 3.3.7 그리드 시스템

그리드 시스템(grid systmem)“은 Bootstrap 레이아웃에 있어서 중요하다. 이것을 제대로 이해하면, 반응형 디자인의 기본은 익숙해질 것이다!
Tags:

그리드 시스템이란?

Bootstrap 사용의 가장 큰 장점은 “화면 크기에 따라 레이아웃을 자동으로 조정할 수 있다’라는 점에 있을 것이다. 레이아웃에 큰 핵심이 되는 것은 “그리드 시스템"이다.

그리드 시스템이라는 것은 표시하는 내용을 몇 블록으로 나누어 정리하고 이를 “그리드"라는 종횡으로 분할한 영역에 끼워 표시하는 방법이다. 알기 쉽게 말하면, “표"와 같은 것에 콘텐츠를 집어 넣어 표시하는 것이라고 생각하면 좋을 것이다.

이 그리드 시스템의 가장 큰 특징은 “옆으로 늘어선 블록을 자동 조정한다"라는 점에 있다. 예를 들어 폭이 넓은 컴퓨터 화면에서는 두 블록을 나란히 표시하지만, 스마트 폰과 같은 폭이 좁은 화면에는 두 블록을 세로로 나란히 된다.

이 자동 조정은 태그에 설정되는 CSS 클래스에 의해 실현하고 있다. 그리드 시스템에 의한 콘텐츠 작성법을 정리하면 아래와 같은 소스 코드가 된다.

<div class="container">
 
<div class="container-fluid">
 
    <div class="row">
        <div>내용</div>
        <div>내용</div>
        ...
    </div>
     
    <div class="row">
        ...필요한 row을 준비...
    </div>
</div>
 
</div>

포인트를 몇 가지 정리한다.

<div class="container">

이것은 이미 이전에 등장 했다. Bootstrap의 콘텐츠는 항상 class="container"태그 내에 기술한다. 이것에 의해 폭이 자동 조정이 된다.

<div class="container-fluid">

이것이 그리드 시스템의 컨테이너가 되는 부분이다. class="container-fluid"에 의해 이중으로 작성된 태그가 폭에 따라 자동 조정되게 된다.

(.container와 .container-fluid 에 대해서는 후에 다시 자세히 설명하겠다.)

<div class="row">

이것은 콘텐츠의 row(가로 열)를 작성하기 위한 컨테이너이다. 그리드 시스템에서는 이 class="row" 태그 안에 표시할 내용을 준비한다. 그로 인해, 이 class="row" 태그 안에 포함된 콘텐츠의 태그가 자동으로 가로로 나란히 정렬되거나, 세로로 정렬되거나 한다.

class="row"을 지정한 태그는 여러가지가 있다. 그것들은 수직으로 정렬된다. 이 “row 안에 가로로 콘텐츠를 준비하고, 그 row를 얼마든지 쓰고 나란히 정렬한다"라는 기본적인 구조를 제대로 이해해 두도록 한다.

컨테이너(container)

레이아웃을 만드는 가장 상위 요소에 .container 또는 .container-fluid를 추가한다. 전체 가로폭을 정하는 클래스 값이다.

클래스명 설명
.container 고정폭 레이아웃을 만들 때 사용한다.
.container-fluid 좌우로 꽉 찬 레이아웃을 만들 때 사용한다.

.container의 속성은 다음과 같다.

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

가로 해상도 767px 이하에서는 100%, 768px 이상에서는 750px, 992px 이상에서는 970px, 1200px 이상에서는 1170px의 가로폭을 가진다.

.container-fluid의 속성은 다음과 같다.

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

가로 해상도에 관계없이 100%의 가로폭을 가진다.

두가지 클래스를 비교할 수 이는 사용 예제는 아래와 같다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
      .container {
        background-color: #cccccc;
      }
      .container-fluid {
        background-color: #dddddd;
      }
      h1 {
        margin: 100px 0px;
      }
    </style>
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <h1>.container</h1>
    </div>
    <div class="container-fluid">
      <h1>.container-fluid</h1>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

폭 조정을 하는 클래스

그리드 시스템 최대의 포인트는 row 내에 배치하는 내용으로 설정하는 “클래스"이다.

이 클래스는 col-종류-숫자 형태로 작성한다. “종류"는 디바이스의 종류, 이는 디바이스의 가로폭에 따라 4가지 종류가 준비되어 있다. 아래와 정리할 수 있다.

종류 크기 주로 해당되는 디바이스
lg 1200px 이상 PC, 태블릿
md 992 ~ 1200px 태블릿
sm 768 ~ 992px 태블릿
xs 768px 미만 스마트 폰

PC의 큰 화면이라면 lg, 스마트 폰에서 세로로 표시된다면 xs 클래스가 적용된다고 생각하면 된다. 태블릿의 경우는 해상도에 따라 lg ~ sm 중 하나가 사용되게 될 것이다.

이후에 “숫자"는 그 내용이 row에 차지하는 비중이다. row는 폭 전체를 “12"의 블록으로 나누어 관리한다. 이 마지막 숫자는 “그 콘텐츠가 블록 비줄이 얼마인지"를 보여줍니다.

예를 들어, 2개의 콘텐츠를 가로한다면, “6"과 “6"으로하면 그냥 반씩이 된다. “4"와 “8"으로 하면 1 : 2의 비율로 나타날 수 있다. “합계가 12 이상이 되면?“라고 생각한 사람이 있을 수 있다. 이런 경우는 12 이후에 컨텐츠는 다음 행으로 줄 바꿈되어 표시된다.

예로써 “768 ~ 992px 크기에서 4 : 8로 표시"되는 경우의 태그를 아래는 아래와 같다. 이는 두 개의 콘텐츠가 4 : 8 (1 : 2)로 표시된다. 또한, 보기 쉽도록 style 속성에서 배경색을 지정하고 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Bootstrap</title>
 
    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
     
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/bootstrap-theme.min.css">
 
</head>
<body >
     
<div class="container">
    <h1>그리드 시스템</h1>
     
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-4"
                style="border:1px solid white; background-color:#eee;">
                <p>MENU</p></div>
            <div class="col-sm-8"
                style="border:1px solid white; background-color:#eee;">
                <p>Content.</p><p>Content.</p><p>Content.</p></div>
        </div>
    </div>
 
</div>
 
</body>
</html>

여러 화면 크기에 대응하기

그리드 시스템의 기본 클래스 설정 방법은 알게 되었. 여기서 이런 의문이 생길지도 모른다.

“4개의 디바이스의 종류가 있는데, 내 사이트에는 어떤 것을 준비하면 되는거야?“라고 생각할 수도 있다.

이런 사람은 “이 중에 사용하고 싶은 것을 골라 쓸 것이다"라고 착각을 하고 있는 것이다. 그렇지는 않다.

디바이스의 종류별 클래스는 모두 준비되어 있는 것이다!

이는 하나 밖에 해당된다는 의미가 아니다. 그 내용이 디바이드의 폭에 따라 자동으로 배치되도록 조정되는 클래스이기 때문이다. 어떤 가로에도 최적이 되도록, 모든 클래스를 준비해 두는 것이다.

예를 들어, 방금 작성한 “4 : 8에서 콘텐츠를 표시"하는 샘플을 모든 디바이스으로 대응 되도록 수정한 것을 아래에 올려 둔었다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Bootstrap</title>
 
    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
     
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/bootstrap-theme.min.css">
 
</head>
<body >
     
<div class="container">
    <h1>그리드 시스템</h1>
     
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-2 col-md-3 col-sm-4 col-xs-12"
                style="border:1px solid white; background-color:#eee;">
                <p>MENU</p></div>
            <div class="col-lg-10 col-md-9 col-sm-8 col-xs-12"
                style="border:1px solid white; background-color:#eee;">
                <p>Content.</p><p>Content.</p><p>Content.</p></div>
        </div>
    </div>
</div>
 
</body>
</html>

여기에 표시할 내용의 비율을 다음과 같이 설정되어 있다.

종류 크기 비율
lg 1200px 이상 2 : 10으로 보기
md 992 ~ 1200px 3 : 9로 표시
sm 768 ~ 992px 4 : 8로 표시
xs 768px 미만 12 : 12으로 표시 (각각 한 줄씩 표시)

어떠한가? 이렇게 설정하면 왼쪽의 컨텐츠(MENU가 표시되는 부분)는 어느 정도의 폭을 정리하고, 오른쪽 내용 중 일부를 필요에 따라 확대될 수 있도록 하고 있다. 또한 스마트 폰에는 MENU 아래에 내용이 세로로 표시되도록 한다.

이처럼 모든 크기의 클래스를 제공함으로써, 생각한대로 레이아웃을 실현할 수 있다. “귀찮다"라고 생각한 사람도, 적어도 “768px 미만과 그 이상의 어느것"이라도 준비하도록 하자.

오프셋(offset)과 비져블(visible)

그리드 시스템은 기본적으로 “준비된 콘텐츠를 순서대로 정렬하여 표시한다"는 것이지만, 표시를 조정하는 기능도 일부 갖고있다. 그 중에서도 비교적 간단하고, 기억해 두면 편리한 2개를 소개한다.

오프셋(offset)

오프셋은 지정된 블록만 간격을 두고 배치하기 위한 것이다. 이것은 col-종류-offset-숫자형태로 작성한다. 예를 들어, md 사이즈의 1블록 사이를 비우고 3블록 역역의 콘텐츠를 배치한다면,

class="col-md-offset-1 col-md-3"

이런 식으로 클래스를 제공한다. 이것으로 그 앞에 있는 콘텐츠에서 1블록을 빈공간로 표시를 두고, 3블록 영역의 내용을 표시한다.

비져블(visible)

이것은 지정된 디바이스의 크기인 경우에만 콘텐츠를 표시하기 위한 것이다. 이것은 visible-종류-block라는 형태로 클래스 이름을 지정한다. 예를 들어,

class="visible-md-block"

이와 같이 작성하면, 이 태그는 md으로 설정되는 폭(992 ~ 1200px)의 경우에만 표시되고, 그 이외의 경우는 표시되지 않는다. 이것을 사용하여 폭에 따라 다른 내용을 표시하거나 하는 것이 가능하다.

실제 사용 예를 아래에 올려 둔다. 이것은 오프셋과 비져블를 통합한 샘플이다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Bootstrap</title>
 
    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
     
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/bootstrap-theme.min.css">
 
</head>
<body >
     
<div class="container">
    <h1>그리드 시스템</h1>
     
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-12"
                style="border:1px solid white; background-color:#eee;">
                <p>MENU</p></div>
                 
            <div class="col-lg-9 col-lg-offfset-1 col-md-7 col-md-offset-1 col-sm-6 col-sm-offset-1 col-xs-12"
                style="border:1px solid white; background-color:#eee;">
                <p>Content.</p><p>Content.</p><p>Content.</p></div>
                 
            <div class="visible-lg-block visible-md-block visible-sm-block">
                <div class="col-lg-1 col-md-2 col-sm-2 col-xs-12"
                    style="border:1px solid white; background-color:#dfd;">
                    <p>default option</p></div>
            </div>
             
            <div class="visible-xs-block">
                <div class="col-xs-12"
                    style="border:1px solid white; background-color:#fdd;">
                    <p>small option</p></div>
            </div>
        </div>
    </div>
</div>
 
</body>
</html>

폭이 넓은 디바이스라면, MENU 및 Content 사이에 1블록 영역의 여백을 두고 표시된다. 맨 오른쪽에는 default option이 표시되고, 폭이 좁아지면 MENU 및 Content가 수직으로 겹쳐지게 된다(여백이 사라진다). 그리고, 표시되는 default option 대신에 small option가 표시된다.

스마트 폰과 태블릿, PC의 레이아웃을 변경하기에 그리드 시스템이 매우 효과적이라는 것을 알 수 있다. 이 그리드 시스템을 사용하는 것만으로도 Bootstrap을 이용하는 가치가 있다고 할 수 있다.

표시 결과 설명

  • 폭이 넓으면, MENU 및 Content 사이에 1블록 영역의 여백을 두고 표시한다.
  • 맨 오른쪽에는 default option이 표시된다.
  • 폭이 좁아하면 MENU 및 Content가 세로로 겹쳐 표시된다.
  • default option 대신에, small option이 표시된다.



최종 수정 : 2021-08-25