컨테이너

컨테이너 (Container)

container는 큰 뷰포트에서 콘텐츠를 가운데 정렬할 수 있게 해주는 간단한 유틸리티 요소예요. 어떤 컨텍스트에서든 사용할 수 있지만, 주로 다음 요소의 직계 자식으로 쓰입니다.

출처: 문서

본문

container는 큰 뷰포트에서 콘텐츠를 가운데 정렬해 주는 간단한 유틸리티 요소예요. 어떤 컨텍스트에서든 쓸 수 있지만, 주로 다음 요소들의 직계 자식으로 사용됩니다.

• navbar
• hero
• section
• footer

개요 (Overview)

기본 동작 (Default behavior)

기본적으로 container는 $desktop 브레이크포인트부터 활성화돼요. $widescreen과 $fullhd 브레이크포인트에 도달하면 max-width가 증가합니다. 각 브레이크포인트에서의 컨테이너 너비는 $device - (2 * $gap)의 결과예요. $gap 변수의 기본값은 32px인데 수정할 수 있습니다.

컨테이너가 동작하는 방식은 다음과 같아요.

• $desktop에서는 최대 너비가 960px입니다
• $widescreen에서는 최대 너비가 1152px입니다
• $fullhd에서는 최대 너비가 1344px입니다

960, 1152, 1344라는 값은 12와 16 모두로 나누어떨어지기 때문에 선택되었어요.

이 컨테이너는 데스크톱과 더 큰 뷰포트에서 가운데 정렬됩니다.

<div class="container">
<div class="notification is-primary">
This container is <strong>centered</strong> on desktop and larger viewports.
</div>
</div>

Widescreen 또는 FullHD 전용 (Widescreen or FullHD only)

is-widescreen과 is-fullhd라는 두 수식어를 사용하면 특정 브레이크포인트까지 컨테이너를 전체 너비(fullwidth) 로 만들 수 있어요.

이 컨테이너는 $widescreen 브레이크포인트까지 전체 너비예요.

<div class="container is-widescreen">
<div class="notification is-primary">
This container is <strong>fullwidth</strong> <em>until</em> the
<code>$widescreen</code> breakpoint.
</div>
</div>

이 컨테이너는 $fullhd 브레이크포인트까지 전체 너비예요.

<div class="container is-fullhd">
<div class="notification is-primary">
This container is <strong>fullwidth</strong> <em>until</em> the
<code>$fullhd</code> breakpoint.
</div>
</div>

Tablet, Desktop, Widescreen 최대 너비 (Tablet, Desktop and Widescreen maximum widths)

때로는 더 큰 뷰포트에서 좁은 컨테이너를 원할 수 있어요. 그래서 Bulma는 3개의 수식어 클래스를 제공합니다.

• .container.is-max-tablet은 tablet 컨테이너처럼 동작해요
• .container.is-max-desktop은 desktop 컨테이너처럼 동작해요
• .container.is-max-widescreen은 widescreen 컨테이너처럼 동작해요

이 컨테이너의 max-width는 $tablet - $container-offset입니다.

<div class="container is-max-tablet">
<div class="notification is-primary">
This container has a <code>max-width</code> of
<code>$tablet - $container-offset</code>.
</div>
</div>

이 컨테이너는 widescreen과 fullhd에서 max-width가 $desktop - $container-offset이에요.

<div class="container is-max-desktop">
<div class="notification is-primary">
This container has a <code>max-width</code> of
<code>$desktop - $container-offset</code> on widescreen and fullhd.
</div>
</div>

이 컨테이너는 fullhd에서 max-width가 $widescreen - $container-offset이에요.

<div class="container is-max-widescreen">
<div class="notification is-primary">
This container has a <code>max-width</code> of
<code>$widescreen - $container-offset</code> on fullhd.
</div>
</div>

절대 최대 너비 (Absolute maximum width)

모든 컨테이너의 최대 너비를 바꾸고 싶다면 $container-max-width Sass 변수의 값을 업데이트하면 돼요. 기본적으로 $fullhd 브레이크포인트 값이 container의 절대 최대 너비를 계산하는 데 사용됩니다. 간단히 $widescreen이나 $desktop 같은 더 작은 값, 또는 픽셀 단위 값으로 바꾸면 됩니다.

플루이드 컨테이너 (Fluid container)

최대 너비는 원하지 않지만 왼쪽과 오른쪽에 32px 여백은 유지하고 싶다면 is-fluid 수식어를 추가하세요.

이 컨테이너는 어떤 뷰포트 크기에서든 양쪽에 32px 간격이 있는 플루이드 컨테이너예요.

<div class="container is-fluid">
<div class="notification is-primary">
This container is <strong>fluid</strong>: it will have a 32px gap on either
side, on any viewport size.
</div>
</div>

Sass 및 CSS 변수 (Sass and CSS variables)

더 알아보기 (Learn more)

• Hero 문서
• Section 문서