컨테이너

컨테이너 (Containers)

주어진 디바이스나 뷰포트 안에서 콘텐츠를 담고, 패딩을 더하고, 정렬하는 Bootstrap의 기본 구성 요소예요.

출처: 문서

본문

동작 원리 (How they work)

컨테이너는 Bootstrap에서 가장 기본적인 레이아웃 요소로, 기본 그리드 시스템을 사용할 때 반드시 필요해요. 컨테이너는 그 안의 콘텐츠를 담고, 패딩을 더하고, (때로는) 가운데 정렬하는 데 사용해요. 컨테이너는 중첩할 수 있지만, 대부분의 레이아웃은 중첩 컨테이너를 요구하지 않아요.

Bootstrap은 세 가지 컨테이너를 제공해요:

• .container — 각 반응형 브레이크포인트에서 max-width를 설정
• .container-{breakpoint} — 지정된 브레이크포인트 전까지는 width: 100%
• .container-fluid — 모든 브레이크포인트에서 width: 100%

아래 표는 각 브레이크포인트에서 각 컨테이너의 max-width가 기본 .container와 .container-fluid와 어떻게 비교되는지 보여 줘요.

Grid 예제에서 실제로 동작하는 모습을 비교해 볼 수 있어요.

기본 컨테이너 (Default container)

기본 .container 클래스는 반응형 고정 폭 컨테이너예요. 즉 각 브레이크포인트에서 max-width가 달라져요.

<div class="container">
 <!-- Content here -->
</div>

반응형 컨테이너 (Responsive containers)

반응형 컨테이너는 지정된 브레이크포인트에 도달하기 전까지는 100% 너비인 클래스를 지정할 수 있게 해 줘요. 그 이후에는 더 높은 브레이크포인트들에 대해 max-width를 적용해요. 예를 들어 .container-sm은 처음에는 100% 너비였다가 sm 브레이크포인트에서부터 md, lg, xl, xxl에 맞춰 함께 커져요.

<div class="container-sm">
 100% wide until small breakpoint
</div>
<div class="container-md">
 100% wide until medium breakpoint
</div>
<div class="container-lg">
 100% wide until large breakpoint
</div>
<div class="container-xl">
 100% wide until extra large breakpoint
</div>
<div class="container-xxl">
 100% wide until extra extra large breakpoint
</div>

유동 컨테이너 (Fluid containers)

뷰포트 전체 너비를 차지하는 컨테이너에는 .container-fluid를 사용해요.

<div class="container-fluid">
 ...
</div>

Sass 변수 (Sass variables)

위에서 보여 준 것처럼 Bootstrap은 원하는 레이아웃을 만들 수 있도록 일련의 미리 정의된 컨테이너 클래스를 생성해요. 이 컨테이너 클래스들을 뒷받침하는 Sass 맵(_variables.scss에 있음)을 수정해서 커스터마이즈할 수 있어요:

scss/_variables.scss

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Sass 맵과 변수 수정 방법에 대한 자세한 정보와 예시는 Grid 문서의 Sass 섹션을 참조하세요.

Sass mixin (Sass mixins)

Sass를 커스터마이즈하는 것 외에도, Sass mixin으로 자신만의 컨테이너를 만들 수도 있어요.

// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

// Usage
.custom-container {
  @include make-container();
}

더 알아보기 (Learn more)

• Bootstrap 문서