Layout

레이아웃 구성 요소에 대한 설명입니다.

Layout components

Layout 컴포넌트는 레이아웃 책임을 콘텐츠 상호작용과 분리하는 데 사용됩니다. 이는 관심사의 분리(separation of concerns)를 의미하며, 이러한 원칙을 이해하는 것은 유지보수가 쉽고 이해하기 쉬운 앱을 만드는 데 도움이 됩니다. 효과적인 인터페이스를 구축하려면 이러한 원칙을 이해하는 것이 중요합니다.

박스

Box는 가장 기본적인 레이아웃 구성 요소입니다. Box는 다음을 수행하는 데 사용됩니다:

• 자식 요소에 간격을 제공합니다.
• 콘텐츠에 크기 제약을 부여합니다.
• 플렉스 및 그리드 컨테이너 내에서 레이아웃 동작을 제어합니다.
• 반응형 display prop을 사용하여 화면 크기에 따라 콘텐츠를 숨깁니다.

Flex

Flex 구성 요소는 Box가 할 수 있는 모든 작업을 수행하지만, 축을 따라 항목을 정리하기 위한 추가 props 세트를 제공합니다. CSS 플렉스박스 속성에 편리하게 접근할 수 있습니다.

Grid

Grid는 콘텐츠를 열과 행으로 구성하는 데 사용됩니다. Box와 Flex와 마찬가지로, 그리드는 기본 CSS 그리드 속성에 편리하게 접근할 수 있도록 설계되었습니다.

Section

Section은 페이지 콘텐츠의 더 큰 부분 간에 일관된 수직 간격을 제공하여 계층감과 분리를 만듭니다. 간단하고 일관성을 유지하기 위해 몇 가지 미리 정의된 크기만 있습니다.

Container

Container의 유일한 책임은 감싸는 콘텐츠에 일관된 max-width를 제공하는 것입니다. Section과 마찬가지로, 편안한 읽기를 위해 일반적인 중단점과 전형적인 콘텐츠 너비에 잘 맞는 몇 가지 미리 정의된 크기만 제공합니다.

General layout props

각 레이아웃 구성 요소는 고유한 전문화된 props 세트를 가지고 있으며, 공통 레이아웃 props의 공유 세트도 가지고 있습니다. 모든 레이아웃 props는 반응형 객체 값을 지원합니다.

Padding

Padding props는 공간 스케일 단계에 접근하거나 유효한 CSS Padding 값을 수용할 수 있습니다.

<Box p="4" />
<Box p="100px">
<Box p={{ sm: '6', lg: '9' }}>

Width

너비 props는 유효한 CSS 너비 값을 수용합니다.

<Box width="100px" />
<Box width={{ md: '100vw', xl: '1400px' }} />

Height

높이 props는 유효한 CSS 높이 값을 수용합니다.

<Box height="100px" />
<Box height={{ md: '100vh', xl: '600px' }} />

Positioning

위치 지정 props는 요소가 문서의 일반 흐름에 대해 어떻게 배치되는지를 변경할 수 있습니다. 각 속성에 대해 해당 CSS 값이 수용되며, 공간 스케일 단계를 오프셋 값으로 사용할 수 있습니다.

<Box position="relative" />
<Box position={{ initial: "relative", lg: "sticky" }} />

<Box inset="4" />
<Box inset={{ initial: "0", xl: "auto" }} />

<Box left="4" />
<Box left={{ initial: "0", xl: "auto" }} />

Flex children

각 레이아웃 구성 요소는 플렉스 컨테이너의 자식일 때 스타일을 제어하는 데 사용되는 props를 가지고 있습니다.

<Box flexBasis="100%" />
<Box flexShrink="0">
<Box flexGrow={{ initial: "0", lg: "1" }} />

Grid children

각 레이아웃 구성 요소는 그리드 컨테이너의 자식일 때 스타일을 제어하는 데 사용되는 props를 가지고 있습니다.

<Box gridArea="header" />

<Box gridColumn="1 / 3" />
<Box gridColumnStart="2">
<Box gridColumnEnd={{ initial: "-1", md: "3", lg: "auto" }} />

<Box gridRow="1 / 3" />
<Box gridRowStart="2">
<Box gridRowEnd={{ initial: "-1", md: "3", lg: "auto" }} />

Margin props

margin props는 요소 주위에 간격을 제공하기 위해 대부분의 구성 요소에서 사용할 수 있습니다. 이들은 레이아웃 구성 요소에만 국한되지 않습니다.

margin props는 공간 스케일 단계에 접근하거나 유효한 CSS margin 값을 수용할 수 있습니다.

<Button m="4" />
<Button m="100px">
<Button m={{ sm: '6', lg: '9' }}>

margin props는 HTML 노드를 렌더링하지 않거나 레이아웃을 위해 Root 부분에 의존하는 구성 요소에서는 사용할 수 없습니다.

Standalone usage

필요한 경우 Confy-ui Themes의 레이아웃 구성 요소만 사용할 수 있습니다. JavaScript 트리 쉐이킹이 작동하는지 확인하고 레이아웃 스타일을 지원하는 CSS를 가져옵니다:

import "@confy-ui/react/themes/layout.css";

여전히 공간 스케일 및 스케일링 팩터 설정을 제공하기 위해 앱을 Theme로 감싸야 합니다.