Section

페이지 콘텐츠의 한 구역(section)을 나타내는 컴포넌트예요.

출처: 문서

본문

페이지 안에서 논리적으로 구분되는 영역을 표시할 때 사용하는 레이아웃 컴포넌트예요. section 요소를 기반으로 해요.

<Box py="8" style={{ backgroundColor: "var(--gray-a2)", borderRadius: "var(--radius-3)" }}>
  <DecorativeBox asChild>
    <Section size="2" />
  </DecorativeBox>
</Box>

이 컴포넌트는 section 요소를 기반으로 하며, 공통 margin props를 지원해요.

Prop	Type	Default
`asChild`	`boolean`	No default value
`size`	`Responsive<"1" \| "2" \| "3" \| "4">`	`"3"`
`display`	`Responsive<"none" \| "initial">`	No default value

다음 props는 Box, Flex, Grid, Container, Section 컴포넌트가 공유해요. 레이아웃 컴포넌트에 대해 더 자세히 알아보려면 Layout 문서를 참고해요.

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`	`Responsive<string>`	No default value
`minWidth`	`Responsive<string>`	No default value
`maxWidth`	`Responsive<string>`	No default value
`height`	`Responsive<string>`	No default value
`minHeight`	`Responsive<string>`	No default value
`maxHeight`	`Responsive<string>`	No default value
`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
`overflow`	`Responsive<enum>`	No default value
`overflowX`	`Responsive<enum>`	No default value
`overflowY`	`Responsive<enum>`	No default value
`flexBasis`	`Responsive<string>`	No default value
`flexShrink`	`Responsive<enum \| string>`	No default value
`flexGrow`	`Responsive<enum \| string>`	No default value
`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
`alignSelf`	`Responsive<enum>`	No default value
`justifySelf`	`Responsive<enum>`	No default value

더 알아보기 (Learn more)

size prop으로 섹션의 세로 여백을 조절하고, 반응형 (Responsive)값으로 화면 크기에 따라 다르게 적용할 수 있어요.