부트스트랩 - CSS 그리드: 초보자 가이드

안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 부트스트랩의 CSS 그리드 시스템의 fascinierende 세상으로 뛰어들어 볼 거예요. 초보자라도 걱정 마세요 - 이 흥미로운 여정에서 여러분의 친절한 안내자가 되겠습니다. 그럼 커피 한 잔 (또는 차, 만약 그게 여러분의 취향이라면)을 들고, 시작해 보겠습니다!

Bootstrap - CSS Grid

작동 방식

부트스트랩의 CSS 그리드는 우리가 웹 페이지에 콘텐츠를 정리하는 마법 같은 레이아웃 도구입니다. 방에 가구를 배치하는 것을 상상해 보세요 - 그게 exactamente 우리가 하는 일입니다, 하지만 웹 요소들로 말이죠!

그리드 시스템은 12열 레이아웃을 기반으로 하고 있어요. 이는 우리가 페이지를 12개의 동일한 부분으로 나눌 수 있음을 의미합니다. 이는 우리에게 레이아웃을 디자인할 때 엄청난 유연성을 제공해줍니다. 간단한 예제를 보겠습니다:

<div class="container">
<div class="row">
<div class="col-4">칼럼 1</div>
<div class="col-4">칼럼 2</div>
<div class="col-4">칼럼 3</div>
</div>
</div>

이 예제에서 우리는 세 개의 동일한 칼럼을 만들었는데, 각각 4부분의 12열 그리드를 차지하고 있습니다 (4 + 4 + 4 = 12). 피자를 세 개의 동일한 조각으로 자르는 것과 같은 이야기입니다!

주요 차이점

이제 여러분은也许 "부트스트랩의 CSS 그리드가 특별한 이유는 무엇인가요?"라고 궁금해할 수도 있습니다. 그럼 말씀드릴게요 - 그것은 모두 간단함과 강력함에 있습니다. 전통적인 CSS 레이아웃과 달리 부트스트랩의 그리드 시스템은 다음과 같은 특징을 가집니다:

플렉스박스를 사용하여 더 유연하고 반응성이 뛰어납니다.
빠른 레이아웃 생성을 위한 쉽게 사용할 수 있는 클래스를 제공합니다.
다양한 화면 크기에 대한 내장된 반응성을 제공합니다.

세 개의 칼럼

이제 더 흥미로운 레이아웃을 만들어 보겠습니다. 다양한 크기의 세 개의 칼럼을 만들어 보겠습니다:

<div class="container">
<div class="row">
<div class="col-3">사이드바</div>
<div class="col-6">주 콘텐츠</div>
<div class="col-3">우측 패널</div>
</div>
</div>

이 예제에서 우리는 사이드바와 우측 패널(각각 3칸을 차지)과 중간에 더 큰 주 콘텐츠 영역(6칸을 차지)을 가지고 있습니다. 거실 벽 중앙에 큰 TV를 두고 양쪽에 책장을 배치하는 것과 같은 이야기입니다!

반응성

부트스트랩의 그리드 중 가장 멋진 점은 그 반응성입니다. 우리는 레이아웃을 다양한 화면 크기에 쉽게 적응시킬 수 있습니다. 어떻게 보이는지 살펴보겠습니다:

<div class="container">
<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-12 col-lg-4">칼럼 3</div>
</div>
</div>

이 레이아웃은 작은 화면에서 수직으로 쌓이고, 중간 화면에서 두 칸으로, 큰 화면에서 세 칸으로 변합니다. 변形的 웹사이트와 같은 이야기입니다!

예제

이제 간단한 반응형 블로그 레이아웃을 만들어 보겠습니다:

<div class="container">
<div class="row">
<div class="col-12 col-lg-8">
<h1>내 멋진 블로그 포스트</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
<div class="col-12 col-lg-4">
<h2>최근 포스트</h2>
<ul>
<li>포스트 1</li>
<li>포스트 2</li>
<li>포스트 3</li>
</ul>
</div>
</div>
</div>

이 레이아웃은 작은 화면에서 주 콘텐츠와 사이드바가 쌓이지만, 큰 화면에서는肩并肩으로 배치됩니다. 책을 잡고 있을 때 페이지가 자연스럽게 재배열되는 것과 같은 이야기입니다!

감싸기

occasionally, 우리는 콘텐츠가 그리드 너비를 초과할 때 다음 줄로 넘어가고 싶을 때가 있습니다. 부트스트랩은 이를 매우 쉽게 만들어줍니다:

<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>9 + 4 = 13 &gt; 12, 이 4칸 너비의 div는 하나의 연속적인 단위로 새 줄에 넘어갑니다.</div>
<div class="col-6">.col-6<br>이어지는 칼럼은 새 줄에서 계속됩니다.</div>
</div>
</div>

이 예제는 칼럼이 12칸 제한을 초과할 때 자동으로 새 줄로 넘어간다는 것을 보여줍니다. 테트리스를 하면서 레이아웃을 만드는 것과 같은 이야기입니다!

시작 위치 조정

우리는 칼럼이 그리드 내에서 어디서 시작하는지도 조정할 수 있습니다:

<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
</div>

offset-* 클래스를 사용하면 칼럼을 오른쪽으로 이동할 수 있습니다. 콘텐츠가 경주에서 먼저 출발하는 것과 같은 이야기입니다!

자동 칼럼

부트스트랩은 유연한, 자동 크기의 칼럼도 허용합니다:

<div class="container">
<div class="row">
<div class="col">1/3</div>
<div class="col-6">2/3 (더 넓게)</div>
<div class="col">3/3</div>
</div>
</div>

여기서 첫 번째와 세 번째 칼럼은 자동으로 크기를 조정되고 중간 칼럼 주위에 배치됩니다. 공간에 맞춰 자동으로 조정되는 가구와 같은 이야기입니다!

중첩

우리는 그리드 내에 그리드를 중첩하여 더 복잡한 레이아웃을 만들 수 있습니다:

<div class="container">
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>

이렇게 하면 그리드 내에 그리드를 만들어 복잡한 레이아웃을 만들 수 있습니다. 집안에 방이 있는 방과 같은 이야기입니다!

맞춤 설정

부트스트랩의 그리드 시스템은 매우 맞춤형이 가능합니다. 칼럼 수, 간격, 브레이크포인트를 조정하여 필요에 맞게 설정할 수 있습니다. Sass를 사용하여 그리드를 맞춤형으로 설정하는 예제를 보겠습니다:

$grid-columns: 15;
$grid-gutter-width: 20px;

@import "bootstrap/scss/bootstrap";

이렇게 하면 기본 12칸 그리드를 15칸 그리드로 변경하고 간격을 조정할 수 있습니다. 자신의 디지털 도시를 설계하는 것과 같은 이야기입니다!

간격

부트스트랩 5는 간격 개념을 도입하여 칼럼 간의 공간을 조정할 수 있게 했습니다:

<div class="container">
<div class="row gy-5">
<div class="col-6">
<div class="p-3 border bg-light">사용자 정의 칼럼 패딩</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">사용자 정의 칼럼 패딩</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">사용자 정의 칼럼 패딩</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">사용자 정의 칼럼 패딩</div>
</div>
</div>
</div>

gy-5 클래스는 행 사이에 수직 간격을 추가합니다. 레이아웃 요소들 사이에 공간을 추가하는 것과 같은 이야기입니다!

결론

이제 여러분은 부트스트랩의 CSS 그리드 시스템을 통해 여러분의 웹 프로젝트에 놀라운 레이아웃을 만들 수 있는 능력을 가지게 되었습니다. 기본 레이아웃에서 반응형 디자인, 중첩, 맞춤 설정까지 다양한 기능을 경험했습니다.

기억하시길, 연습이 완벽을 만듭니다. 이 개념들을 실험해 보고, 곧 프로 수준의 레이아웃을 만들 수 있을 것입니다! 행복한 코딩을 기원하며, 여러분의 그리드가 항상 완벽하게 정렬되길 바랍니다! ?

방법	설명
`container`	반응형 고정 너비 컨테이너 생성
`row`	칼럼을 담는 행 생성
`col-*`	다양한 크기의 칼럼 생성 (1-12)
`col--`	다양한 화면 크기에 맞는 반응형 칼럼 생성
`offset--`	칼럼을 오른쪽으로 이동
`col`	자동 너비 칼럼 생성
`g-*`	칼럼 간 간격 추가
`gy-*`	행 사이 간격 추가
`gx-*`	칼럼 사이 간격 추가

Credits: Image by storyset