Container | HTML Components

기본

container 클래스로 중앙 정렬·최대 너비·좌우 패딩을 적용합니다. 뷰포트가 넓어지면 max-width에서 멈춥니다.

container — 기본 최대 너비

<div class="container">
  <div class="container_demo-fill">container — 기본 최대 너비</div>
</div>

Fluid

container_fluid는 최대 너비 제한 없이 부모 너비 전체를 사용합니다. 좌우 패딩만 유지됩니다.

container container_fluid — 전체 너비

<div class="container container_fluid">
  <div class="container_demo-fill">container container_fluid — 전체 너비</div>
</div>

크기

container_sm · container_md · container_lg · container_xl로 고정 최대 너비를 지정합니다.

container_sm (36rem)

container_md (48rem)

container_lg (64rem)

container_xl (80rem)

<div class="container_demo-sizes">
  <div class="container container_sm">
    <div class="container_demo-fill">container_sm (36rem)</div>
  </div>
  <div class="container container_md">
    <div class="container_demo-fill">container_md (48rem)</div>
  </div>
  <div class="container container_lg">
    <div class="container_demo-fill">container_lg (64rem)</div>
  </div>
  <div class="container container_xl">
    <div class="container_demo-fill">container_xl (80rem)</div>
  </div>
</div>

중첩 사용

페이지 루트에 container를 두고, 섹션별로 다른 크기를 조합할 수 있습니다.

바깥 — fluid

안쪽 — md

<div class="container container_fluid">
  <div class="container_demo-fill" style="margin-bottom: var(--space-md);">바깥 — fluid</div>
  <div class="container container_md">
    <div class="container_demo-fill">안쪽 — md</div>
  </div>
</div>

클래스 · 속성

Nuxt와 Next 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML에서는 아래 클래스를 직접 조합합니다.

클래스	설명
`container`	중앙 정렬·기본 max-width·좌우 패딩
`container_fluid`	max-width 제한 해제. 크기 클래스와 함께 사용하면 fluid가 우선
`container_sm · container_md · container_lg · container_xl`	고정 최대 너비 변형

디자인 토큰

토큰	기본값	설명
`--container-max-width`	`72rem`	기본 최대 너비
`--container-max-width-sm`	`36rem`	`container_sm` 최대 너비
`--container-max-width-md`	`48rem`	`container_md` 최대 너비
`--container-max-width-lg`	`64rem`	`container_lg` 최대 너비
`--container-max-width-xl`	`80rem`	`container_xl` 최대 너비
`--container-padding-x`	`var(--space-xl)`	좌우 패딩