Bootstrap 5 그리드 시스템 알아보기

웹 반응형 만들 때, 이걸 활용해보세요!

반응형을 만들려고 하면, 이건 알아야죠!

다양한 기기들을 고려하여 웹사이트를 만드는 것은 매우 중요합니다. 웹 개발에서 반응형 디자인은 필수적인 요소로 자리 잡았고, 이를 효율적으로 구현할 수 있는 도구 중 하나가 바로 Bootstrap 5입니다. Bootstrap 5의 그리드 시스템은 반응형 웹 페이지를 손쉽게 구축할 수 있게 해주는 강력한 기능을 제공합니다. 이 글에서는 Bootstrap 5의 그리드 시스템을 소개하고, 어떻게 활용할 수 있는지 구체적으로 알아보겠습니다.

 

목차

Bootstrap5 GridSystem

Bootstrap 5 Grid란?

Bootstrap의 그리드 시스템은 12개의 컬럼로 구성되어 있습니다. 12개의 컬럼을 기반으로 웹 페이지의 레이아웃을 구성하는데, 이를 통해 다양한 크기의 화면에 맞는 반응형 웹 페이지를 쉽게 만들 수 있습니다.

[같이 보면 좋은 동영상]

행(row): 그리드의 수평 구성을 정의하는 요소로, row 클래스를 사용하여 설정합니다.
열(column): 각 콘텐츠의 너비를 설정하는 요소로, col 클래스를 사용하여 설정합니다.

12개의 컬럼은 화면 너비에 맞게 비율을 조정할 수 있습니다. 예를 들어, 한 행에 두 개의 컬럼을 배치하고 각 컬럼의 크기를 동일하게 지정하려면 아래와 같이 작성을 합니다.

<div class="row">
  <div class="col">1번</div>
  <div class="col">2번</div>
</div>

반응형 웹 디자인 만들어보기

Bootstrap 5의 가장 큰 특징 중 하나는 반응형 디자인을 쉽게 구현할 수 있다는 점입니다. 화면 크기에 따라 레이아웃을 자동으로 조정할 수 있기 때문에, PC부터 모바일까지 모든 기기에서 최적화된 웹 페이지를 제공합니다.

 

반응형 클래스는 화면 크기별로 다른 컬럼 너비를 설정할 수 있습니다. 아래는 모바일 화면에서는 한 컬럼, 데스크탑 화면에서는 세 개의 컬럼을 표시하는 예시 중 하나입니다.

<div class="row">
  <div class="col-12 col-md-4">1번</div>
  <div class="col-12 col-md-4">2번</div>
  <div class="col-12 col-md-4">3번</div>
</div>

col-12: 모바일 화면에서 각 컬럼이 100% 너비를 차지하도록 설정합니다.
col-md-4: 화면이 중간 크기 이상일 때(데스크탑) 각 컬럼이 4/12, 즉 33.33%씩 너비를 차지하게 설정합니다.

 

이와 같이 col-{breakpoint}-{size} 형태의 클래스를 사용하여, 각 화면 크기에 맞는 레이아웃을 구현할 수 있습니다. 반응형은 사용자의 웹 이용의 경험을 충족시킬 수 있습니다.

컬럼 크기 조정

각 컬럼의 너비는 col-{size} 형태로 설정할 수 있습니다. size는 1부터 12까지의 숫자값으로, 12가 전체 너비의 100%를 의미합니다. 예를 들어, 한 행에 두 개의 컬럼을 배치하고, 첫 번째 컬럼은 4칸, 두 번째 컬럼은 8칸을 차지하게 하려면 아래와 같이 설정합니다.

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

위 소스는 너비가 12로 나누면서 첫번째 컬럼에는 4칸 두번째 컬럼에는 8칸의 너비를 차지합니다. 이런식으로 만들면 다양한 내용들이 화면 크기에 맞춰 적절히 배치를 할 수 있습니다.

자동 너비 조정

컬럼의 너비를 자동으로 조정할 수도 있습니다. 예를 들어, 한 컬럼의 너비를 고정하고, 다른 컬럼이 남은 공간을 자동으로 차지하도록 설정하려면 col-auto 클래스를 사용할 수 있습니다

<div class="row">
  <div class="col-6">6칸</div>
  <div class="col-auto">자동 크기</div>
</div>

위 코드는 첫번째 컬럼은 6칸의 너비를 조정을 하고 두번째 컬럼은 나머지 공간을 자동으로 차지할 수 있게 만들고 있습니다.

Offset 사용법

컬럼을 좌우로 정렬하거나, 특정 위치에 배치하고 싶을 때는 offset 클래스를 사용합니다. offset은 컬럼을 오른쪽으로 밀어서 빈 공간을 만들 수 있습니다. 예를 들어, 첫 번째 컬럼을 4칸 밀고, 두 번째 컬럼을 나머지 8칸에 배치하려면 다음과 같이 작성합니다.

<div class="row">
  <div class="col-4 offset-4">4칸 밀린 컬럼</div>
  <div class="col-4">기타</div>
</div>

첫 번째 컬럼을 4칸 밀어 두 번째 컬럼과의 간격을 조정합니다.

마무리

Bootstrap 5의 그리드 시스템은 반응형 웹 디자인을 손쉽게 구현할 수 있는 강력한 도구입니다. row와 column을 사용하여 웹 페이지의 레이아웃을 자유롭게 구성할 수 있으며, 반응형 클래스와 컬럼 크기 조정을 통해 다양한 화면 크기에 맞는 최적화된 웹 페이지를 만들 수 있습니다. 이 글에서 소개한 기본적인 그리드 사용법을 바탕으로, Bootstrap 5를 이용한 반응형 디자인을 쉽게 구현할 수 있을 것입니다. Bootstrap 5의 그리드 시스템을 활용해 보세요!