컬럼
컬럼 (Columns)
flexbox 그리드 시스템 덕분에 정렬, 순서, 오프셋에 대한 다양한 옵션으로 컬럼을 수정하는 방법을 배워요. 또 그리드가 아닌 요소의 너비를 관리하는 데 컬럼 클래스를 사용하는 방법도 살펴봐요.
출처: 문서
본문
Heads up! 그리드 컬럼을 수정하고 커스터마이즈하는 방법에 본격적으로 들어가기 전에 먼저 Grid 페이지를 읽어 보는 게 좋아요.
동작 원리 (How they work)
- 컬럼은 그리드의 flexbox 아키텍처 위에 구축돼요. flexbox 덕분에 개별 컬럼을 바꾸거나 row 수준에서 컬럼 그룹을 수정할 수 있는 옵션이 생겨요. 컬럼이 어떻게 커지고, 줄어들고, 바뀔지 선택할 수 있어요.
- 그리드 레이아웃을 만들 때 모든 콘텐츠는 컬럼에 들어가요. Bootstrap 그리드의 계층은 container에서 row, column을 거쳐 콘텐츠로 이어져요. 드물게 콘텐츠와 컬럼을 합치기도 하는데, 예상치 못한 결과가 생길 수 있다는 점을 알아 두세요.
- Bootstrap은 빠르고 반응형인 레이아웃을 만들기 위한 미리 정의된 클래스를 포함해요. 6개의 브레이크포인트와 각 그리드 tier에 12개의 컬럼이 있어서, 원하는 레이아웃을 만들 수 있는 수십 개의 클래스가 이미 준비돼 있어요. 원하면 Sass로 이 기능을 비활성화할 수 있어요.
정렬 (Alignment)
flexbox 정렬 유틸리티를 사용해서 컬럼을 세로·가로로 정렬할 수 있어요.
세로 정렬 (Vertical alignment)
반응형 align-items-* 클래스 중 하나로 세로 정렬을 바꿀 수 있어요.
<div class="container text-center">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container text-center">
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container text-center">
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
또는 반응형 .align-self-* 클래스 중 하나로 각 컬럼의 정렬을 개별적으로 바꿀 수도 있어요.
<div class="container text-center">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
가로 정렬 (Horizontal alignment)
반응형 justify-content-* 클래스 중 하나로 가로 정렬을 바꿀 수 있어요.
<div class="container text-center">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-evenly">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
컬럼 줄 바꿈 (Column wrapping)
단일 row 안에 12개보다 많은 컬럼이 배치되면, 여분 컬럼의 각 그룹은 하나의 단위로 새 줄로 넘어가요.
<div class="container">
<div class="row">
<div class="col-9">
.col-9
</div>
<div class="col-4">
.col-4
<br/>
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
</div>
<div class="col-6">
.col-6
<br/>
Subsequent columns continue along the new line.
</div>
</div>
</div>
컬럼 나누기 (Column breaks)
flexbox에서 컬럼을 새 줄로 나누려면 약간의 트릭이 필요해요. 컬럼을 새 줄로 줄 바꿈하고 싶은 곳에 width: 100%인 요소를 추가하면 돼요. 보통은 여러 개의 .row로 처리하지만, 모든 구현 방식이 이를 해결할 수는 없어요.
<div class="container text-center">
<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>
<!-- Force next columns to break to new line -->
<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>
반응형 display 유틸리티로 특정 브레이크포인트에서도 이 나누기를 적용할 수 있어요.
<div class="container text-center">
<div class="row">
<div class="col-6 col-sm-4">
.col-6 .col-sm-4
</div>
<div class="col-6 col-sm-4">
.col-6 .col-sm-4
</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block">
</div>
<div class="col-6 col-sm-4">
.col-6 .col-sm-4
</div>
<div class="col-6 col-sm-4">
.col-6 .col-sm-4
</div>
</div>
</div>
순서 바꾸기 (Reordering)
Order 클래스 (Order classes)
.order- 클래스로 콘텐츠의 시각적 순서를 제어할 수 있어요. 이 클래스들은 반응형이므로 브레이크포인트별로 순서를 설정할 수 있어요(예: .order-1.order-md-2). 6개 그리드 tier 전반에 걸쳐 1부터 5까지를 지원해요.
<div class="container text-center">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-5">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
반응형 .order-first와 .order-last 클래스도 있는데, 각각 order: -1과 order: 6을 적용해 요소의 순서를 바꿔 줘요. 이 클래스들은 필요에 따라 번호가 붙은 .order-* 클래스와도 함께 쓸 수 있어요.
<div class="container text-center">
<div class="row">
<div class="col order-last">
First in DOM, ordered last
</div>
<div class="col">
Second in DOM, unordered
</div>
<div class="col order-first">
Third in DOM, ordered first
</div>
</div>
</div>
.order-* 클래스가 더 필요하면 $utilities Sass 맵을 수정해서 새 클래스를 추가할 수 있어요. 자세한 내용은 Sass maps and loops 문서나 Modify utilities 문서를 참조하세요.
$utilities: map-merge(
$utilities,
(
"order": map-merge(
map-get($utilities, "order"),
(
values: map-merge(
map-get(map-get($utilities, "order"), "values"),
(
6: 6, // Add a new `.order-{breakpoint}-6` utility
last: 7 // Change the `.order-{breakpoint}-last` utility to use the next number
)
),
),
),
)
);
컬럼 오프셋 (Offsetting columns)
그리드 컬럼을 오프셋하는 방법은 두 가지예요. 반응형 .offset- 그리드 클래스와 마진 유틸리티입니다. 그리드 클래스는 컬럼 크기에 맞춰 크기가 정해지고, 마진은 오프셋의 너비가 변하는 빠른 레이아웃에 더 유용해요.
Offset 클래스 (Offset classes)
.offset-md-* 클래스로 컬럼을 오른쪽으로 옮길 수 있어요. 이 클래스들은 컬럼의 왼쪽 마진을 * 컬럼만큼 늘려요. 예를 들어 .offset-md-4는 .col-md-4를 네 컬럼만큼 옮겨요.
<div class="container text-center">
<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 class="row">
<div class="col-md-6 offset-md-3">
.col-md-6 .offset-md-3
</div>
</div>
</div>
반응형 브레이크포인트에서 컬럼을 지우는 것 외에, 오프셋을 리셋해야 할 필요도 생겨요. grid 예제에서 실제 동작을 볼 수 있어요.
<div class="container text-center">
<div class="row">
<div class="col-sm-5 col-md-6">
.col-sm-5 .col-md-6
</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">
.col-sm-6 .col-md-5 .col-lg-6
</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
</div>
</div>
</div>
마진 유틸리티 (Margin utilities)
v4에서 flexbox로 전환하면서 .me-auto 같은 마진 유틸리티를 사용해 형제 컬럼들을 서로 밀어낼 수 있게 됐어요.
<div class="container text-center">
<div class="row">
<div class="col-md-4">
.col-md-4
</div>
<div class="col-md-4 ms-auto">
.col-md-4 .ms-auto
</div>
</div>
<div class="row">
<div class="col-md-3 ms-md-auto">
.col-md-3 .ms-md-auto
</div>
<div class="col-md-3 ms-md-auto">
.col-md-3 .ms-md-auto
</div>
</div>
<div class="row">
<div class="col-auto me-auto">
.col-auto .me-auto
</div>
<div class="col-auto">
.col-auto
</div>
</div>
</div>
독립 컬럼 클래스 (Standalone column classes)
.col-* 클래스는 .row 밖에서도 사용해서 요소에 특정 너비를 줄 수 있어요. 컬럼 클래스를 row의 직계 자식이 아닌 곳에 사용하면 패딩은 생략돼요.
<div class="col-3 p-3 mb-2">
.col-3: width of 25%
</div>
<div class="col-sm-9 p-3">
.col-sm-9: width of 75% above sm breakpoint
</div>
이 클래스들은 유틸리티와 함께 사용해서 반응형 플로팅 이미지를 만들 수도 있어요. 텍스트가 짧으면 플로트를 지우도록 콘텐츠를 .clearfix 래퍼로 감싸 주세요.
<div class="clearfix">
<img alt="..." class="col-md-6 float-md-end mb-3 ms-md-3" src="..."/>
<p>
A paragraph of placeholder text. We’re using it here to show the use of the clearfix class. We’re adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
</p>
<p>
As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
</p>
<p>
And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there’s none of that here.
</p>
</div>