부트스트랩 - 그리드 시스템: 초보자를 위한 친절한 가이드

안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 부트스트랩의 그리드 시스템 세계에 흥미로운 여행을 떠납니다. 코드를 한 줄도 적어본 적이 없으신분이라도 걱정하지 마세요 - 저는 여러분과 함께 있을 것이며, 단계별로 모든 것을 설명해 드리겠습니다. 따뜻한 커피(또는 차, 만약 그것이 여러분의 취향이라면)를 한 잔 마시고, 함께 뛰어들어 보겠습니다!

Bootstrap - Grid System

부트스트랩 그리드 시스템이란?

시작하기 전에 조금 이야기해 보겠습니다. 가정해 봅시다. 여러분이 책장을 정리하려고 한다고요. 책들은 모두 다른 크기입니다. 짜증나죠? 그렇죠? 그럼, 부트스트랩 그리드 시스템은 마법의 책장처럼 자동으로 여러분의 콘텐츠를 정리해 주는 시스템입니다!

웹 디자인 용어로는, 그리드 시스템은 반응형과 잘 구조화된 웹 페이지를 만들어 주는 강력한 레이아웃 도구입니다. 여러분의 웹 페이지 콘텐츠를 완벽하게 정리해 주는 개인 비서처럼 생각해 보세요. 큰 데스크톱 모니터에서 작은 스마트폰 화면에서도 동일하게 보입니다.

기본 예제

우리는 간단한 예제로 발을濡쳐보겠습니다. 부트스트랩 그리드 시스템의 기본 구조는 다음과 같습니다:

<div class="container">
<div class="row">
<div class="col-sm">
세 개의 열 중 하나
</div>
<div class="col-sm">
세 개의 열 중 하나
</div>
<div class="col-sm">
세 개의 열 중 하나
</div>
</div>
</div>

여기서 무엇이 일어나고 있는지 설명해 보겠습니다:

우리는 container 클래스로 시작합니다. 이것은 모든 것을 담는 외부 상자입니다.
컨테이너 내부에는 row 클래스가 있습니다. 책장의的书架에 대한 类似로 생각해 보세요.
행 내부에는 세 개의 col-sm 클래스가 있습니다. 이것들은 우리의 책들로, 서로 옆에 놓입니다.

어떻게 작동하는가?

부트스트랩 그리드 시스템은 12열 레이아웃을 기반으로 합니다. 왜 12인가요? 이 숫자는 1, 2, 3, 4, 6으로 나누어 질 수 있어 많은 유연성을 제공합니다!

시각적 표현을 보겠습니다:

1	2	3	4	5	6	7	8	9	10	11	12
열	열	열	열	열	열	열	열	열	열	열	열

이러한 열들은 더 넓은 콘텐츠 영역을 만들기 위해 결합될 수 있습니다. 예를 들어, 두 개의 6단위 열을 가진 레이아웃이나 세 개의 4단위 열을 가진 레이아웃을 만들 수 있습니다. 블록 놀이처럼 생각해 보세요!

자동 레이아웃 열

이제 몇 가지 멋진 기술을 살펴보겠습니다. 부트스트랩은 열 너비를 자동으로 처리할 수 있습니다. 이를 확인해 보세요:

<div class="container">
<div class="row">
<div class="col">
2개 중 1개
</div>
<div class="col">
2개 중 2개
</div>
</div>
<div class="row">
<div class="col">
3개 중 1개
</div>
<div class="col">
3개 중 2개
</div>
<div class="col">
3개 중 3개
</div>
</div>
</div>

이 예제에서는 우리가 열 너비를 지정하지 않았습니다. 부트스트랩은 공간을 열에 동일하게 나눕니다. 마치 로봇이 책장을 정리해 주는 것처럼!

동일 너비

모든 열이 콘텐츠에 관계없이 동일한 너비를 가지고 싶다면, 이렇게 간단합니다:

<div class="container">
<div class="row">
<div class="col">
3개 중 1개
</div>
<div class="col">
3개 중 2개 (넓은)
</div>
<div class="col">
3개 중 3개
</div>
</div>
</div>

중간 열에 더 많은 콘텐츠가 있더라도, 세 개의 열 모두 동일한 너비를 유지합니다. 마치 확장 가능한 책들이 책장에 완벽히 맞는 것처럼!

특정 열 너비 설정

때로는 특정 열이 특정 너비를 가지고 다른 열이 자동으로 조정되기를 원할 수 있습니다. 이렇게 합니다:

<div class="container">
<div class="row">
<div class="col">
3개 중 1개
</div>
<div class="col-6">
3개 중 2개 (넓은)
</div>
<div class="col">
3개 중 3개
</div>
</div>
</div>

이 경우 중간 열은 6단위(반너비)를 차지하며, 나머지 두 열은 남은 공간을 동일하게 나눕니다.

변하는 너비 콘텐츠

콘텐츠에 따라 열 너비를 조정하고 싶다면, 부트스트랩이 도와줍니다:

<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
3개 중 1개
</div>
<div class="col-md-auto">
변하는 너비 콘텐츠
</div>
<div class="col col-lg-2">
3개 중 3개
</div>
</div>
</div>

col-md-auto 클래스는 해당 열이 콘텐츠에 따라 커지거나 줄어들 수 있게 합니다. 마치 책이 이웃 책들 사이에 맞게 변하는 것처럼!

반응형 클래스

이제 반응형 레이아웃에 대해 이야기해 보겠습니다. 부트스트랩은 브레이크포인트를 사용하여 화면 크기에 따라 레이아웃을 조정합니다. 주요 브레이크포인트는 다음과 같습니다:

브레이크포인트	클래스 접두어	크기
초소형	None	<576px
소형	sm	≥576px
중형	md	≥768px
대형	lg	≥992px
초대형	xl	≥1200px
초초대형	xxl	≥1400px

모든 브레이크포인트

이를 어떻게 사용할까요?

<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>

이 레이아웃은 모든 화면 크기에서 동일하게 유지됩니다. 마치 책장이 방에서 어디서나 동일하게 보이는 것처럼!

스택에서 수평으로

하지만 화면 크기에 따라 레이아웃을 변경하고 싶다면 어떻게 하나요?

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

소형 화면 이상에서는 이 열들이 옆에 배치되고, 초소형 화면에서는 수직으로 스택됩니다. 마치 책장이 공간이.tight할 때 책 탑으로 변하는 것처럼!

혼합 및 매칭

다른 화면 크기에 대해 열 크기를 혼합하고 매칭할 수도 있습니다:

<div class="container">
<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
</div>

이 레이아웃은 소형 화면에서와 중형 화면 이상에서 다르게 보입니다. 마치 변신하는 책장처럼!

행 열

빠르게 동일 너비 열을 만들고 싶다면, 행 열을 사용하세요:

<div class="container">
<div class="row row-cols-2">
<div class="col">열</div>
<div class="col">열</div>
<div class="col">열</div>
<div class="col">열</div>
</div>
</div>

이렇게 하면 행에 두 개의 열이 만들어지며, 몇 개의 col 디브가 있는지 상관없이 동일하게 나눕니다. 마치 책장이 항상 쌍으로 책을 정리하는 것처럼!

내嵌

마지막으로, 그리드를 내嵌할 수 있습니다:

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

이렇게 하면 그리드 내에 또 다른 그리드를 만듭니다. 마치 작은 책장이 큰 책장 안에 들어 있는 것처럼!

그렇습니다, 여러분! 여러분이 부트스트랩 그리드 시스템의 첫 걸음을 뗐습니다. 연습이 완벽을 만듭니다. 이 예제들을 실험해 보고, 다양한 클래스를 혼합하고, 결과를 확인해 보세요. 얼마 지나지 않아 여러분은 아름다운 반응형 레이아웃을 만들 수 있을 것입니다!

coding을 즐기시고, 여러분의 웹 페이지가 항상 완벽하게 정리되기를 바랍니다!

Credits: Image by storyset