그리드 시스템

우리가 노트에 글을 쓸 때, 무지노트보다 줄노트에 줄에 맞춰 글을 쓸 때 정돈되게 쓸 수 있듯이 CSS 스타일링을 할 때에도 기본적인 레이아웃에 맞춰 스타일링을 하면 좀 더 보기 좋고 통일성이 있다.

그리드 시스템(Grid System)에서 ‘Grid’는 격자나 바둑판 모양의 눈금을 뜻하며, 일반적으로 수직과 수평으로 면이 분할된 것을 의미한다. 그리드 시스템은 웹 페이지를 일정 갯수의 구간으로 나누어서 스타일링을 하는 것을 말한다.

일반적으로 Desktop, Laptop에서는 12단을 추천하며, Tablet은 6단, Mobile은 4단을 추천한다.

 

구성 요소

그리드 시스템은 다음과 같이 4가지 구성요소로 되어 있다.

• 컬럼(columns) : 그리드 시스템을 구성하는 하나의 단을 말한다. 유닛 + 거터가 1컬럼이 된다.

• 유닛(unit) : 검은 색 부분인, 컬럼의 컨텐츠 내부 영역을 뜻한다. 모바일에서는 폰마다 해상도가 다르기 때문에 고정 픽셀이 아닌 퍼센테이지(%)로 많이 정한다.

• 거터(gutter) : 초록색 부분인, 유닛과 유닛 사이의 공백을 뜻한다. 거터값은 넓을수록 시원한 느낌을 주지만, 너무 넓으면 그룹화가 안되어보이는 단점이 존재한다.

• 마진(margin) : 웹 페이지에서 그리드시스템 컨테이너 외부의 영역을 뜻한다. 여백이 적당히 있어야 작은 해상도에서 덜 답답해 보인다.

다음과 같이 4단 구성, 5단 구성으로 스타일링을 할 수 있다.

---

부트스트랩 그리드 시스템

부트스트랩은 기본적으로 그리드 시스템이 적용되어 있다.

부트스트랩 그리드는 데스크탑에서 권장하는 12열 그리드를 기반으로 한다.

부트스트랩 방식으로 그리드를 적용하는 방법을 알아보자.

 

1. 일단 그리드를 적용하려면 그리드를 적용해 주는 틀에 넣어야 한다.
   클래스에 container 라는 클래스를 추가해 줌으로써 그리드 스타일링을 할 수 있게 된다.

2. 한 줄 스타일링을 하기 위해서는 row 라는 클래스가 들어간 태그가 필요하다.
   그 한 줄 안에 12개의 단(column)이 담긴다.

3. 하나의 row 안에서 12개로 나눠진 범위를 col 이라고 한다. column의 준말이다.
   클래스명으로 col만 지정하면 row를 같은 비율로 나누어 스타일링하고,
   col-8, col-4처럼 col-뒤에 숫자로 비율을 지정해 줄 수도 있다.

 

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

 

참고로, container -> row -> col 이 3단계는 반드시 순차적으로 지켜져야 한다.

중간에 다른 클래스의 태그가 들어가거나 하면 스타일링에 의도치 않은 알 수 없는 에러가 날 수 있다.

그리고 container, row, col 자체에 스타일링을 주지 않도록 해야 한다.

 

 

---

참고 사이트

그리드시스템(Grid System)
그리드 시스템이란?
부트스트랩 - 그리드