Container

KRDS 레이아웃 시스템을 기반으로 한 반응형 컨테이너 컴포넌트

개요

Container

콘텐츠가 중앙에 정렬되고 최대 너비가 제한됩니다

설치

사용법

예제

최대 너비 설정

Default (xl - 1280px) - 일반적인 페이지

Default Container (max-width: 1280px)

Small (sm - 640px) - 로그인 폼, 회원가입

Small Container (max-width: 640px)

Full Width - 전체 너비 + 여백 유지

Full Width Container (max-width: 100%)

스크린 마진 (Screen Margin)

Container는 화면 크기에 따라 자동으로 좌우 패딩을 적용하여 콘텐츠가 화면 가장자리에 닿지 않도록 합니다. 이는 KRDS 디자인 시스템의 스크린 마진 표준을 따릅니다:

  • 모바일 (~640px): 16px (px-4)
  • 태블릿 (640px~): 24px (px-6)
  • 데스크톱 (1024px~): 32px (px-8)
Container 스크린 마진 예시 - 화면 크기별 패딩 적용

이 패딩은 반응형 디자인을 위해 자동으로 적용되며, 화면 크기가 변경되면 자연스럽게 조정됩니다.

패딩 제거

전체 너비 이미지나 배경이 필요한 경우 disablePadding 속성을 사용하여 좌우 패딩을 제거할 수 있습니다.

No Padding Container (패딩 없음)