[Bootstrap] 02. 그리드 시스템 이해하기

[Bootstrap] 02. 그리드 시스템 이해하기

부트스트랩을 사용할 때 가장 먼저 익숙해져야 하는 개념은 그리드 시스템(Grid System)입니다. 그리드 시스템은 화면을 일정한 칸으로 나누고, 그 안에 콘텐츠를 배치할 수 있게 해주는 레이아웃 구조입니다.

웹사이트는 PC, 태블릿, 모바일처럼 다양한 화면 크기에서 보여야 합니다. 이때 매번 CSS를 직접 작성해서 레이아웃을 맞추기보다는, 부트스트랩의 그리드 시스템을 사용하면 훨씬 빠르게 반응형 화면을 구성할 수 있습니다.

---

1. 그리드 시스템이란?

그리드 시스템은 화면을 여러 개의 칸으로 나누고, 각 요소가 몇 칸을 차지할지 정해서 배치하는 방식입니다. 부트스트랩은 기본적으로 한 줄을 12칸으로 나누어 생각합니다.

예를 들어 3개의 박스를 같은 너비로 배치하고 싶다면 각각 4칸씩 차지하게 만들면 됩니다.

<div class="row">
  <div class="col-4">첫 번째 영역</div>
  <div class="col-4">두 번째 영역</div>
  <div class="col-4">세 번째 영역</div>
</div>

4 + 4 + 4 = 12가 되므로 한 줄에 세 개의 영역이 나란히 배치됩니다.

---

2. 기본 구조: container, row, col

부트스트랩 그리드는 보통 아래 구조로 작성합니다.

<div class="container">
  <div class="row">
    <div class="col">내용 1</div>
    <div class="col">내용 2</div>
    <div class="col">내용 3</div>
  </div>
</div>

• container: 전체 내용을 감싸는 바깥 영역
• row: 가로 한 줄을 의미하는 영역
• col: 실제 콘텐츠가 들어가는 열 영역

이 구조를 지키는 것이 중요합니다. 콘텐츠는 보통 col 안에 들어가야 하며, row는 col들을 정렬하기 위한 부모 역할을 합니다.

---

3. 12칸 구조 이해하기

부트스트랩의 한 줄은 12칸으로 나뉩니다. 컬럼 클래스에 숫자를 붙이면 해당 요소가 몇 칸을 차지할지 지정할 수 있습니다.

클래스	의미
col-12	한 줄 전체 사용
col-6	한 줄의 절반 사용
col-4	한 줄의 1/3 사용
col-3	한 줄의 1/4 사용

<div class="container">
  <div class="row">
    <div class="col-6">왼쪽</div>
    <div class="col-6">오른쪽</div>
  </div>
</div>

위 코드는 화면을 왼쪽과 오른쪽으로 반씩 나누는 구조입니다.

---

4. col만 사용할 때와 숫자를 붙일 때의 차이

1) col만 사용하는 경우

<div class="row">
  <div class="col">A</div>
  <div class="col">B</div>
  <div class="col">C</div>
</div>

col만 사용하면 부트스트랩이 자동으로 같은 너비를 나누어 줍니다. 위 예시는 3개의 컬럼이 같은 너비로 배치됩니다.

2) col-숫자를 사용하는 경우

<div class="row">
  <div class="col-8">큰 영역</div>
  <div class="col-4">작은 영역</div>
</div>

숫자를 붙이면 직접 너비를 조절할 수 있습니다. 위 예시는 왼쪽 영역이 8칸, 오른쪽 영역이 4칸을 차지합니다.

---

5. 반응형 클래스

부트스트랩 그리드의 핵심은 반응형 클래스입니다. 화면 크기에 따라 컬럼의 너비를 다르게 지정할 수 있습니다.

<div class="row">
  <div class="col-12 col-md-6 col-lg-4">카드 1</div>
  <div class="col-12 col-md-6 col-lg-4">카드 2</div>
  <div class="col-12 col-md-6 col-lg-4">카드 3</div>
</div>

이 코드는 화면 크기에 따라 다음처럼 동작합니다.

• 모바일: col-12 → 한 줄에 1개
• 태블릿 이상: col-md-6 → 한 줄에 2개
• 큰 화면 이상: col-lg-4 → 한 줄에 3개

즉, 같은 HTML 코드로 모바일과 PC 화면을 모두 대응할 수 있습니다.

---

6. Bootstrap의 주요 화면 기준

부트스트랩은 화면 크기를 기준으로 여러 단계의 breakpoint를 제공합니다. 자주 사용하는 기준은 아래와 같습니다.

구분	클래스 접두어	화면 크기 기준
Extra small	없음	576px 미만
Small	sm	576px 이상
Medium	md	768px 이상
Large	lg	992px 이상
Extra large	xl	1200px 이상
Extra extra large	xxl	1400px 이상

예를 들어 col-md-6은 md 크기 이상부터 6칸을 차지한다는 뜻입니다. md보다 작은 화면에서는 다른 클래스가 적용되거나 기본 흐름에 따라 배치됩니다.

---

7. container와 container-fluid

container는 콘텐츠의 최대 너비를 제한하고 가운데 정렬하는 역할을 합니다. 일반적인 웹사이트 본문 영역에 자주 사용됩니다.

<div class="container">
  가운데 정렬된 고정 폭 영역
</div>

반면 container-fluid는 화면 전체 너비를 사용합니다. 대시보드, 배너, 넓은 배경 영역을 만들 때 자주 사용됩니다.

<div class="container-fluid">
  화면 전체 너비를 사용하는 영역
</div>

---

8. gutter로 간격 조절하기

컬럼 사이의 간격은 gutter라고 부릅니다. 부트스트랩에서는 g 클래스를 사용해 간격을 조절할 수 있습니다.

<div class="row g-3">
  <div class="col-6">카드 1</div>
  <div class="col-6">카드 2</div>
</div>

g-3은 컬럼 사이에 일정한 간격을 주는 클래스입니다. 간격이 너무 붙어 보일 때는 g-2, g-3, g-4 같은 클래스를 활용하면 됩니다.

---

9. 자주 하는 실수

• row 없이 col을 바로 사용하는 경우
• container 없이 전체 구조를 작성하는 경우
• 한 줄에서 col 숫자의 합이 12를 넘는 경우
• 모바일 화면을 고려하지 않고 col-4 같은 고정 컬럼만 사용하는 경우
• 간격을 직접 margin으로만 처리하려고 하는 경우

특히 처음 배울 때는 container, row, col 순서를 지키는 연습이 중요합니다. 이 구조만 익숙해져도 부트스트랩 레이아웃의 절반은 이해한 것과 같습니다.

---

10. 정리

• 부트스트랩 그리드는 화면을 12칸 기준으로 나누는 레이아웃 시스템이다.
• 기본 구조는 container → row → col 순서다.
• col만 쓰면 자동으로 같은 너비를 나누고, col-숫자를 쓰면 직접 너비를 지정할 수 있다.
• col-md-6, col-lg-4처럼 화면 크기별 반응형 레이아웃을 만들 수 있다.
• container-fluid는 화면 전체 너비를 사용할 때 적합하다.

부트스트랩의 그리드 시스템은 단순히 칸을 나누는 기능이 아니라, 다양한 화면 크기에 맞춰 레이아웃을 안정적으로 유지하기 위한 핵심 구조입니다.

다음 글에서는 부트스트랩에서 자주 사용하는 버튼, 카드, 네비게이션 바 같은 컴포넌트를 정리해보겠습니다.