Container

Nuxt에서 자동 등록되어, 콘텐츠의 최대 너비와 좌우 여백을 일관되게 제한하는 레이아웃 컨테이너입니다.

기본

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

container — 기본 최대 너비

id·style·aria-* 및 이벤트 리스너는 컨테이너의 루트 요소에 전달됩니다. class는 기본·변형 클래스와 병합됩니다.

HTML 속성 전달

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

container container_fluid — 전체 너비

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

container_sm (36rem)

container_md (48rem)

container_lg (64rem)

container_xl (80rem)

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

바깥 — fluid

안쪽 — md

Prop	타입	기본값	설명
`fluid`	boolean	false	최대 너비 제한 없이 부모 너비 전체 사용 (container_fluid). size와 함께 지정하면 fluid가 우선합니다.
`size`	'sm' \| 'md' \| 'lg' \| 'xl'	—	고정 최대 너비 변형 (container_sm · container_md · container_lg · container_xl)

슬롯	설명
`default`	컨테이너 내부 콘텐츠

Vue 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.

클래스	설명
`container`	중앙 정렬·기본 max-width·좌우 패딩
`container_fluid`	max-width 제한 해제
`container_sm · container_md · container_lg · container_xl`	고정 최대 너비 변형