Layout

Layout (레이아웃)

레이아웃 관련 사항을 제대로 처리하는 문서예요.

출처: 문서

레이아웃 컴포넌트 (Layout components)

레이아웃 컴포넌트는 레이아웃 책임을 콘텐츠와 상호작용에서 분리하는 데 사용돼요. 이것이 바로 앱을 유지 관리 가능하고 추론하기 쉽게 만드는 관심사의 분리(separation of concerns)이며, 이를 이해하는 것이 인터페이스를 효과적으로 구축하는 핵심이에요.

Box

Box는 가장 기본적인 레이아웃 컴포넌트예요. Box는 다음 용도로 사용돼요.

• 자식 요소에 간격(spacing)을 제공
• 콘텐츠에 크기 제약을 부과
• flex와 grid 컨테이너 안에서 레이아웃 동작 제어
• 반응형 display prop으로 화면 크기에 따라 콘텐츠 숨기기

Flex

Flex 컴포넌트는 Box가 할 수 있는 모든 것을 하면서도, 항목을 한 축을 따라 정리하는 추가 props 집합이 더해져요. CSS flexbox 속성들에 편리하게 접근할 수 있게 해 줘요.

Grid

Grid는 콘텐츠를 열과 행으로 정리하는 데 사용돼요. Box, Flex처럼 자체적인 마법 없이 기본 CSS grid 속성들에 편리하게 접근할 수 있게 만들어졌어요.

Section

Section은 페이지 콘텐츠의 큰 부분들 사이에 일관된 세로 간격을 제공해 계층과 분리의 느낌을 만들어요. 서로 다른 간격 수준을 위한 미리 정의된 크기가 몇 개만 있어서 단순하고 일관성 있게 유지돼요.

Container

Container의 유일한 책임은 감싸는 콘텐츠에 일관된 max-width를 제공하는 거예요. Section처럼 흔한 중단점과 편안한 읽기를 위한 전형적인 콘텐츠 너비에 잘 맞는 미리 정의된 크기가 몇 개만 있어요.

공통 레이아웃 props (Common layout props)

각 레이아웃 컴포넌트는 각자의 전용 props와 함께 공유되는 공통 레이아웃 props 집합을 가지고 있어요. 모든 레이아웃 props는 반응형 객체 값을 지원해요.

Padding

Padding props는 space scale 단계에 접근하거나 유효한 CSS padding 값을 받아들일 수 있어요.

<Box p="4" />

<Box p="100px">

<Box p={{ sm: '6', lg: '9' }}>

Prop	Type	Default
p	Responsive<enum | string>	No default value
px	Responsive<enum | string>	No default value
py	Responsive<enum | string>	No default value
pt	Responsive<enum | string>	No default value
pr	Responsive<enum | string>	No default value
pb	Responsive<enum | string>	No default value
pl	Responsive<enum | string>	No default value

Width

Width props는 유효한 CSS width 값을 받아들여요.

<Box width="100px" />

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

Prop	Type	Default
width	Responsive<string>	No default value
minWidth	Responsive<string>	No default value
maxWidth	Responsive<string>	No default value

Height

Height props는 유효한 CSS height 값을 받아들여요.

<Box height="100px" />

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

Prop	Type	Default
height	Responsive<string>	No default value
minHeight	Responsive<string>	No default value
maxHeight	Responsive<string>	No default value

Positioning

Positioning props는 요소를 문서의 일반 흐름(normal flow) 기준으로 배치하는 방식을 바꿀 수 있어요. 평소처럼 각 속성에는 대응하는 CSS 값이 허용되고, 오프셋 값에는 space scale 단계를 사용할 수 있어요.

<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" }} />

Prop	Type	Default
position	Responsive<enum>	No default value
inset	Responsive<enum | string>	No default value
top	Responsive<enum | string>	No default value
right	Responsive<enum | string>	No default value
bottom	Responsive<enum | string>	No default value
left	Responsive<enum | string>	No default value

Flex children

각 레이아웃 컴포넌트에는 flex 컨테이너의 자식일 때 스타일을 제어하는 props가 있어요.

<Box flexBasis="100%" />

<Box flexShrink="0">

<Box flexGrow={{ initial: "0", lg: "1" }} />

Prop	Type	Default
flexBasis	Responsive<string>	No default value
flexShrink	Responsive<enum | string>	No default value
flexGrow	Responsive<enum | string>	No default value

Grid children

각 레이아웃 컴포넌트에는 grid 컨테이너의 자식일 때 스타일을 제어하는 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" }} />

Prop	Type	Default
gridArea	Responsive<string>	No default value
gridColumn	Responsive<string>	No default value
gridColumnStart	Responsive<string>	No default value
gridColumnEnd	Responsive<string>	No default value
gridRow	Responsive<string>	No default value
gridRowStart	Responsive<string>	No default value
gridRowEnd	Responsive<string>	No default value

Margin props

Margin props는 요소 주변에 간격을 제공하기 위해 대부분의 컴포넌트에서 사용할 수 있어요. 레이아웃 컴포넌트 전용이 아니에요.

Margin props는 space scale 단계에 접근하거나 유효한 CSS margin 값을 받아들일 수 있어요.

<Button m="4" />

<Button m="100px">

<Button m={{ sm: '6', lg: '9' }}>

Prop	Type	Default
m	Responsive<enum | string>	No default value
mx	Responsive<enum | string>	No default value
my	Responsive<enum | string>	No default value
mt	Responsive<enum | string>	No default value
mr	Responsive<enum | string>	No default value
mb	Responsive<enum | string>	No default value
ml	Responsive<enum | string>	No default value

HTML 노드를 렌더링하지 않거나 레이아웃을 위해 Root 부분에 의존하는 컴포넌트에는 margin props가 없을 수 있어요.

단독 사용 (Standalone usage)

필요하다면 Radix Themes의 레이아웃 컴포넌트만 사용하는 것도 가능해요. 자바스크립트 트리 셰이킹이 동작하는지 확인하고, 레이아웃 스타일을 구동하는 CSS를 import해 주세요.

import "@radix-ui/themes/layout.css";

space scale과 scaling factor 설정을 제공하려면 여전히 앱을 Theme으로 감싸야 해요.

더 알아보기 (Learn more)

• Box, Flex, Grid, Section, Container가 레이아웃을 담당하고, padding/margin 등 props는 모두 반응형 값을 지원해요.