Container

@hua-labs/ui

v1.1.0

최대 너비, 패딩, 중앙 정렬을 설정할 수 있는 반응형 컨테이너 컴포넌트입니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { Container } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

기본 컨테이너

콘텐츠가 여기에 표시됩니다

컨테이너 크기

size="sm"

max-w-2xl (672px)

size="md"

max-w-4xl (896px)

size="lg"

max-w-6xl (1152px)

size="xl"

max-w-7xl (1280px)

패딩 옵션

padding="none"

콘텐츠가 여기에 표시됩니다

padding="sm"

콘텐츠가 여기에 표시됩니다

padding="md"

콘텐츠가 여기에 표시됩니다

padding="lg"

콘텐츠가 여기에 표시됩니다

전체 너비

전체 너비 (최대 너비 제한 없음)

Props

이름	타입	기본값	설명
`size`	`"sm" \| "md" \| "lg" \| "xl" \| "full"`	`"lg"`	컨테이너 최대 너비
`padding`	`"none" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	내부 패딩
`centered`	`boolean`	`true`	컨테이너 가로 중앙 정렬
`fluid`	`boolean`	`false`	최대 너비 제한 없이 전체 너비 사용

코드 예시

기본 사용법tsx

import { Container } from '@hua-labs/ui';

<Container>
  <h1>Title</h1>
  <p>Content</p>
</Container>

크기tsx

// sm: 672px, md: 896px, lg: 1152px, xl: 1280px
<Container size="sm">...</Container>
<Container size="md">...</Container>
<Container size="lg">...</Container>
<Container size="xl">...</Container>

유동형tsx

<Container fluid padding="xl">
  Full width content
</Container>

접근성

•시맨틱 HTML: Renders as a semantic HTML element; use role="region" with an aria-label when the container represents a distinct page section.
•랜드마크 구조: 적절한 ARIA 속성과 함께 사용하면 스크린 리더 탐색을 위한 레이아웃 랜드마크로 활용 가능합니다.
•반응형 레이아웃: 모든 브레이크포인트에서 가로 스크롤 없이 가독성 유지

Card Grid