크기

크기 (Sizing)

요소의 크기를 설정하는 JSX 스타일 prop을 알려드려요. 너비와 높이를 다양한 방법으로 자유롭게 지정할 수 있어요.

출처: 문서

본문

Width

width 또는 w 속성을 사용해서 요소의 너비를 설정하세요.

// hardcoded values
<Box width="64px" />
<Box w="4rem" />

// token values
<Box width="5" />
<Box w="5" />

분수 너비

width 또는 w 속성을 사용해서 분수 너비를 설정할 수 있어요.

값은 다음 범위 내일 수 있어요.

3분의 1: 1/3 ~ 2/3
4분의 1: 1/4 ~ 3/4
5분의 1: 1/5 ~ 4/5
6분의 1: 1/6 ~ 5/6
12분의 1: 1/12 ~ 11/12

// half width
<Flex>
  <Box width="1/2" />
  <Box width="1/2" />
</Flex>

// thirds
<Flex>
  <Box width="1/3" />
  <Box width="2/3" />
</Flex>

// fourths
<Flex>
  <Box width="1/4" />
  <Box width="3/4" />
</Flex>

// fifths
<Flex>
  <Box width="1/5" />
  <Box width="4/5" />
</Flex>

// sixths
<Flex>
  <Box width="1/6" />
  <Box width="5/6" />
</Flex>

// twelfths
<Flex>
  <Box width="3/12" />
  <Box width="9/12" />
</Flex>

뷰포트 너비

최신 뷰포트 너비 값인 dvw, svw, lvw를 사용하세요.

dvw는 100dvw, svw는 100svw, lvw는 100lvw에 매핑돼요.

<Box width="dvw" />
<Box w="dvw" /> // shorthand

Prop	CSS Property	Token Category
`w`, `width`	`width`	`sizes`

Max width

maxWidth 또는 maxW 속성을 사용해서 요소의 최대 너비를 설정하세요.

// hardcoded values
<Box maxWidth="640px" />
<Box maxW="4rem" /> // shorthand

// token values
<Box maxWidth="xl" />
<Box maxW="2xl" /> // shorthand

Prop	CSS Property	Token Category
`maxW`, `maxWidth`	`max-width`	`sizes`

Min width

minWidth 또는 minW 속성을 사용해서 요소의 최소 너비를 설정하세요.

// hardcoded values
<Box minWidth="64px" />
<Box minW="4rem" /> // shorthand

// token values
<Box minWidth="8" />
<Box minW="10" /> // shorthand

Prop	CSS Property	Token Category
`w`, `width`	`width`	`sizing`
`maxW`, `maxWidth`	`max-width`	`sizing`
`minW`, `minWidth`	`min-width`	`sizing`

Height

height 또는 h 속성을 사용해서 요소의 높이를 설정하세요.

// hardcoded values
<Box height="40px" />
<Box h="0.4rem" /> // shorthand

// token values
<Box height="5" />
<Box h="5" /> // shorthand

분수 높이

height 또는 h 속성을 사용해서 분수 높이를 설정할 수 있어요.

값은 다음 범위 내일 수 있어요.

3분의 1: 1/3 ~ 2/3
4분의 1: 1/4 ~ 3/4
5분의 1: 1/5 ~ 4/5
6분의 1: 1/6 ~ 5/6

<Box height="1/2" />
<Box h="1/2" /> // shorthand

상대적 높이

최신 상대적 높이 값인 dvh, svh, lvh를 사용하세요.

dvh는 100dvh, svh는 100svh, lvh는 100lvh에 매핑돼요.

<Box height="dvh" />
<Box h="dvh" /> // shorthand

Max height

maxHeight 또는 maxH 속성을 사용해서 요소의 최대 높이를 설정하세요.

// hardcoded values
<Box maxHeight="40px" />
<Box maxH="0.4rem" /> // shorthand

// token values
<Box maxHeight="8" />
<Box maxH="10" /> // shorthand

Min height

minHeight 또는 minH 속성을 사용해서 요소의 최소 높이를 설정하세요.

// hardcoded values
<Box minHeight="40px" />
<Box minH="0.4rem" /> // shorthand

// token values
<Box minHeight="8" />
<Box minH="10" /> // shorthand

Prop	CSS Property	Token Category
`h`, `height`	`height`	`sizes`
`maxH`, `maxHeight`	`max-height`	`sizes`
`minH`, `minHeight`	`min-height`	`sizes`

크기