부트스트랩 - 컬럼: 쉽게 반응형 레이아웃 만들기

안녕하세요, 웹 개발자 지망생 여러분! 오늘 우리는 부트스트랩의 가장 강력한 기능 중 하나인 컬럼에 대해 깊이 탐구해보겠습니다. 여러분의 친절한 이웃 컴퓨터 선생님이자 저는 이 여정을 안내해드리는 것을 기대하고 있습니다. 믿으세요, 이 튜토리얼의 끝을 맞아서, 여러분은 프로처럼 반응형 레이아웃을 만드는 법을 배울 것입니다!

작동 방식

먼저 기본 개념을 이해해보겠습니다. 부트스트랩의 그리드 시스템은 12개의 컬럼 레이아웃을 기반으로 합니다. 피자를 12 조각으로 나누는 것을 생각해보세요 - 전부 혼자 먹을 수도 있고(전체 너비의 컬럼), 친구들과 나눠 먹을 수도 있습니다(여러 개의 컬럼).

다음은 시작하기에 좋은 간단한 예제입니다:

<div class="container">
<div class="row">
<div class="col-sm-4">Column 1</div>
<div class="col-sm-4">Column 2</div>
<div class="col-sm-4">Column 3</div>
</div>
</div>

이 예제에서 우리는 소형 화면에서 동일한 너비의 세 개의 컬럼을 만들었습니다. col-sm-4 클래스는 "소형 화면에서 12개의 컬럼 중 4개를 차지하다"는 뜻입니다. 이는 "12 조각 피자 중 4 조각을 주세요!"라고 말하는 것과 같습니다.

정렬

이제 컬럼을 가지고 있으니, 그들을 어떻게 정렬하는지 배워보겠습니다. 방에 가구를 배치하는 것처럼, 모든 것이 적절하게 보이기를 원합니다!

수직 정렬

컬럼을 수직으로 정렬하려면 행에 클래스를 사용합니다:

<div class="container">
<div class="row align-items-start">
<div class="col">Top</div>
<div class="col">Top</div>
<div class="col">Top</div>
</div>
<div class="row align-items-center">
<div class="col">Middle</div>
<div class="col">Middle</div>
<div class="col">Middle</div>
</div>
<div class="row align-items-end">
<div class="col">Bottom</div>
<div class="col">Bottom</div>
<div class="col">Bottom</div>
</div>
</div>

여기서 우리는 align-items-start, align-items-center, align-items-end를 사용하여 컬럼을 행의 상단, 중앙, 하단에 각각 정렬합니다.

수평 정렬

수평 정렬을 위해서는 justify-content 클래스를 사용합니다:

<div class="container">
<div class="row justify-content-start">
<div class="col-4">One</div>
<div class="col-4">Two</div>
</div>
<div class="row justify-content-center">
<div class="col-4">One</div>
<div class="col-4">Two</div>
</div>
<div class="row justify-content-end">
<div class="col-4">One</div>
<div class="col-4">Two</div>
</div>
</div>

이 클래스(justify-content-start, justify-content-center, justify-content-end)는 컬럼을 컨테이너의 왼쪽, 중앙, 오른쪽에 각각 정렬합니다.

컬럼 wrapping

때로는 행에 12개의 컬럼 유닛보다 더 많은 컬럼이 있을 수 있습니다. 걱정하지 마세요, 부트스트랩이 당신을 도와줍니다! 추가 컬럼은 자동으로 새 줄로 넘어갑니다:

<div class="container">
<div class="row">
<div class="col-9">Column 1</div>
<div class="col-4">Column 2</div>
<div class="col-6">Column 3</div>
</div>
</div>

이 예제에서 9 + 4 = 13이므로 12보다 크므로, 두 번째 컬럼은 새 줄로 넘어갑니다.

컬럼 브레이크

하지만 새 줄로 넘어가기를 강제하고 싶다면? 컬럼 브레이크를 사용하세요:

<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>

<div class="w-100"></div>는 100% 너비의 브레이크를 만들어 다음 컬럼이 새 줄에서 시작하도록 합니다.

재정렬

주문 클래스

부트스트랩은 여러분의 컬럼의 시각적 순서를 변경할 수 있게 합니다:

<div class="container">
<div class="row">
<div class="col order-3">First, but last</div>
<div class="col order-2">Second, but second</div>
<div class="col order-1">Third, but first</div>
</div>
</div>

order- 클래스는 컬럼의 순서를 결정합니다. 이는 컬럼이 음악 의자 놀이를 하도록 하는 것과 같습니다!

컬럼偏移

偏移 클래스

occasionally, you might want to add some space before a column. That's where offset classes come in:

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

offset-md-4 클래스는 margin-left을 4개의 컬럼에 해당하는 만큼 추가하여 두 번째 컬럼을 오른쪽으로 밀어냅니다.

반응형 브레이크 포인트에서 컬럼 지우기

화면 크기가 다른 브레이크 포인트에서 변경될 때,浮动된 컬럼을 지우는 것이 필요할 수 있습니다:

<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>

여기서 d-none d-md-block는 소형 화면에서는 숨겨지지만 중형 화면 이상에서는 보입니다.

마진 유틸리티

부트스트랩은 빠른 공간 조정을 위한 마진 유틸리티를 제공합니다:

<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
</div>

ml-auto 클래스는 두 번째 컬럼을 오른쪽으로 자동 조정하여 밀어냅니다.

독립 컬럼 클래스

마지막으로, 컬럼 클래스를 행 래퍼 없이 사용할 수 있어 더 많은 유연성을 제공합니다:

<div class="container">
<div class="col-3 bg-light p-3 border">
.col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
.col-sm-9: width of 75% above sm breakpoint
</div>
</div>

이 접근 방식은 복잡한 디자인에 대해 더 많은 제어를 가능하게 합니다.

그럼 여러분, 부트스트랩 컬럼의 내밀한 것을 배웠습니다. 연습이 완벽을 만들어 냅니다, 그래서 이 개념들을 실험해 두려워 마세요. 곧 당신은 최고의 웹 개발자들도 부러워할 반응형 레이아웃을 만들어낼 것입니다!

여기서 우리가 다룬 컬럼 클래스의 빠른 참조 표입니다:

클래스	설명
col-*	기본 컬럼 클래스 (*는 1-12일 수 있습니다)
col-sm-*	소형 화면 이상의 컬럼
col-md-*	중형 화면 이상의 컬럼
col-lg-*	대형 화면 이상의 컬럼
col-xl-*	초대형 화면 이상의 컬럼
offset--	偏移 컬럼 (*는 sm, md, lg, xl일 수 있습니다)
order-*	컬럼 순서 재정렬 (*는 1-12일 수 있습니다)

기쁜 코딩을 하고, 레이아웃이 항상 반응형이 되기를 바랍니다!

Credits: Image by storyset