레이아웃

레이아웃 (Layout)

요소의 너비, 높이, 간격을 제어하는 JSX 스타일 prop을 알려드려요. 레이아웃을 잡는 데 필요한 거의 모든 속성을 다뤄요.

출처: 문서

본문

Aspect Ratio

aspectRatio prop을 사용해서 요소의 원하는 종횡비를 설정하세요.

// raw value
<Box aspectRatio="1.2" />

// token
<Box aspectRatio="square" />
Prop CSS Property Token Category
aspectRatio aspect-ratio aspectRatios

Break

Break After

breakAfter prop을 사용해서 요소 이후에 페이지, 열, 영역 나눔이 어떻게 동작할지 설정하세요.

<Box columns="2">
  <Box>Item 1</Box>
  <Box breakAfter="page">Item 2</Box>
</Box>
Prop CSS Property Token Category
breakAfter break-after -

Break Before

breakBefore prop을 사용해서 요소 이전에 페이지, 열, 영역 나눔이 어떻게 동작할지 설정하세요.

<Box columns="2">
  <Box>Item 1</Box>
  <Box breakBefore="page">Item 2</Box>
</Box>
Prop CSS Property Token Category
breakBefore break-before -

Break Inside

breakInside prop을 사용해서 요소 내부에서 페이지, 열, 영역 나눔이 어떻게 동작할지 설정하세요.

<Box columns="2">
  <Box>Item 1</Box>
  <Box breakInside="avoid">Item 2</Box>
</Box>
Prop CSS Property Token Category
breakInside break-inside -

Box Decoration Break

boxDecorationBreak prop을 사용해서 박스가 여러 줄, 열, 페이지로 나뉠 때 박스 장식이 어떻게 동작할지 설정하세요.

<Box bgImage="linear-gradient(red, blue)" boxDecorationBreak="clone">
  Chakra is <br /> great!
</Box>
Prop CSS Property Token Category
boxDecorationBreak box-decoration-break -

Box Sizing

boxSizing prop을 사용해서 요소의 박스 사이징을 설정하세요.

<Box boxSizing="border-box" padding="4" width="8" height="8" />
Prop CSS Property Token Category
boxSizing box-sizing -

Columns

columns prop을 사용해서 요소의 열 수를 설정하세요.

<Box columns={2} />
Prop CSS Property Token Category
columns columns -

Float

float prop을 사용해서 요소의 플로트를 설정하세요.

<Box>
  <Text>As much mud in the streets...</Text>
  <Box float="left">Float me</Box>
</Box>
Prop CSS Property Token Category
float float -

Clear

clear prop을 사용해서 요소가 앞에 오는 플로팅 요소 아래로 이동(cleared)해야 하는지 설정하세요.

<Box>
  <Box float="left">Left</Box>
  <Box float="right">Right</Box>
  <Box clear="none">
    As much mud in the streets as if the waters had but newly retired from the
    face of the earth, and it would not be wonderful to meet a Megalosaurus,
    forty feet long or so, waddling like an elephantine lizard up Holborn Hill.
  </Box>
</Box>
Prop CSS Property Token Category
clear clear -

Isolation

isolation prop을 사용해서 요소가 명시적으로 새로운 쌓임 컨텍스트(stacking context)를 만들지 설정하세요.

<Box isolation="isolate">
  <Box bg="red.500" width="10" height="10" />
</Box>
Prop CSS Property Token Category
isolation isolation -

Object Fit

objectFit prop을 사용해서 이미지나 비디오가 컨테이너에 맞게 어떻게 크기가 조절될지 설정하세요.

<Image src="..." objectFit="cover" width="10" height="10" />
Prop CSS Property Token Category
objectFit object-fit -

Object Position

objectPosition prop을 사용해서 요소가 컨테이너 내에서 어떻게 위치할지 설정하세요.

<Image src="..." objectPosition="center" width="10" height="10" />
Prop CSS Property Token Category
objectPosition object-position -

Overflow

overflow prop을 사용해서 요소의 크기를 초과하는 콘텐츠를 어떻게 처리할지 제어하세요. 이 속성은 콘텐츠를 자를지, 스크롤바를 추가할지, 넘쳐나는 콘텐츠를 표시할지 결정해요.

<Box overflow="hidden" maxHeight="120px" />
<Box overflow="auto" maxHeight="120px" />
Prop CSS Property Token Category
overflow overflow -

Overscroll Behavior

overscrollBehavior prop을 사용해서 스크롤 영역의 경계에 도달했을 때 브라우저가 무엇을 할지 제어하세요.

<Box maxHeight="120px" overscrollBehavior="contain" />
Prop CSS Property Token Category
overscrollBehavior overscroll-behavior -

Position

position 유틸리티를 사용해서 요소의 위치를 설정하세요.

<Box position="absolute" />
<Box pos="absolute" /> // shorthand
Prop CSS Property Token Category
position position -

Top / Right / Bottom / Left

top, right, bottom, left 유틸리티를 사용해서 요소의 위치를 설정하세요.

<Box position="absolute" top="0" left="0" />

// using spacing tokens
<Box position="absolute" top="4" />

// using hardcoded values
<Box position="absolute" top="100px" />

작성 방향(writing mode)에 따라 요소의 위치를 설정하려면 inset{Start|End} 유틸리티의 논리적 동등물을 사용하세요.

<Box position="absolute" insetStart="0" />
Prop CSS Property Token Category
top top spacing
right right spacing
bottom bottom spacing
left left spacing
start, insetStart, insetInlineStart inset-inline-start spacing
end , insetEnd, insetInlineEnd inset-inline-end spacing
insetX, insetInline inset-inline spacing
insetY, insetBlock inset-inline spacing

Visibility

visibility prop을 사용해서 요소의 가시성을 제어하세요.

<Box visibility="hidden" />
Prop CSS Property Token Category
visibility visibility -

Z-Index

zIndex prop을 사용해서 요소의 z-index를 설정하세요.

// using hardcoded values
<Box zIndex="1" />

// using token
<Box zIndex="overlay" />
Prop CSS Property Token Category
zIndex z-index zIndices

더 알아보기 (Learn more)