Responsive Design

Featuring Design System은 Mobile-First 반응형 디자인을 기본으로 지원합니다. $css prop의 레이아웃 속성에서 객체 구문을 사용하여 브레이크포인트별 스타일을 지정할 수 있습니다.

브레이크포인트

이름	최소 너비	미디어 쿼리
`mobile`	0px	기본값 (미디어 쿼리 없음)
`tablet`	768px	`@media (min-width: 768px)`
`desktop`	1024px	`@media (min-width: 1024px)`
`wide`	1440px	`@media (min-width: 1440px)`

기본 사용법

레이아웃 속성에 객체를 전달하면 브레이크포인트별로 다른 값을 적용합니다. mobile은 기본값이므로 생략할 수 있으며, 지정하지 않은 브레이크포인트는 이전 값을 상속합니다.

<Box $css={{
padding: {
  mobile: '$spacing-300',
  tablet: '$spacing-400',
  desktop: '$spacing-600',
},
bgColor: '$primary-10',
borderRadius: '$radius-200',
textAlign: 'center',
}}>
화면 크기에 따라 padding이 변합니다
</Box>

반응형 레이아웃 패턴

반응형 그리드

화면 크기에 따라 컬럼 수가 자동으로 조절됩니다. 브라우저 창 크기를 조절해 확인해 보세요.

<Grid $css={{
gridTemplateColumns: {
  mobile: '1fr',
  tablet: 'repeat(2, 1fr)',
  desktop: 'repeat(3, 1fr)',
},
gap: {
  mobile: '$spacing-300',
  desktop: '$spacing-400',
},
}}>
{[1,2,3,4,5,6].map(i => (
  <Box key={i} $css={{
    padding: '$spacing-400',
    bgColor: '$primary-10',
    borderRadius: '$radius-100',
    textAlign: 'center',
    border: '1px solid',
    borderColor: '$primary-30',
  }}>Card {i}</Box>
))}
</Grid>

반응형 방향 전환

모바일에서는 세로로, 태블릿 이상에서는 가로로 배치됩니다.

<HStack $css={{
flexDirection: { mobile: 'column', tablet: 'row' },
alignItems: { mobile: 'stretch', tablet: 'center' },
gap: '$spacing-300',
padding: '$spacing-400',
bgColor: '$background-2',
borderRadius: '$radius-200',
}}>
<Box $css={{
  padding: '$spacing-300',
  bgColor: '$primary-10',
  borderRadius: '$radius-100',
  flex: { tablet: '1' },
  textAlign: 'center',
}}>Item 1</Box>
<Box $css={{
  padding: '$spacing-300',
  bgColor: '$primary-20',
  borderRadius: '$radius-100',
  flex: { tablet: '1' },
  textAlign: 'center',
}}>Item 2</Box>
<Box $css={{
  padding: '$spacing-300',
  bgColor: '$primary-30',
  borderRadius: '$radius-100',
  flex: { tablet: '1' },
  textAlign: 'center',
}}>Item 3</Box>
</HStack>

반응형 타이포그래피

Typo 컴포넌트는 variant prop에서 직접 반응형 값을 지원합니다.

<VStack $css={{ gap: '$spacing-300' }}>
<Typo
  variant={{
    mobile: '$heading-5',
    tablet: '$heading-3',
    desktop: '$heading-1',
  }}
  render={<h1 />}
>
  반응형 제목
</Typo>
<Typo $css={{
  fontSize: { mobile: '14px', desktop: '18px' },
  lineHeight: { mobile: '1.5', desktop: '1.6' },
  color: '$text-2',
}}>
  화면 크기에 따라 텍스트 크기가 변합니다.
</Typo>
</VStack>

반응형 표시/숨김

<VStack $css={{ gap: '$spacing-300' }}>
<Box $css={{
  display: { mobile: 'none', tablet: 'block' },
  padding: '$spacing-300',
  bgColor: '$primary-10',
  borderRadius: '$radius-100',
  textAlign: 'center',
}}>
  태블릿 이상에서만 표시
</Box>
<Box $css={{
  display: { mobile: 'block', desktop: 'none' },
  padding: '$spacing-300',
  bgColor: '$support-success-1',
  borderRadius: '$radius-100',
  textAlign: 'center',
}}>
  모바일/태블릿에서만 표시
</Box>
<Box $css={{
  padding: '$spacing-300',
  bgColor: '$background-2',
  borderRadius: '$radius-100',
  textAlign: 'center',
}}>
  항상 표시
</Box>
</VStack>

반응형 컴포넌트 사이즈

Button과 Typo 컴포넌트는 size/variant prop에서 반응형 값을 지원합니다.

반응형 버튼 사이즈

<HStack $css={{ gap: '$spacing-300', alignItems: 'center' }}>
<Button
  variant="primary"
  size={{ mobile: 'sm', tablet: 'md', desktop: 'lg' }}
>
  <Button.Text>Responsive</Button.Text>
</Button.Root>
<Button
  variant="secondary"
  size={{ mobile: 'xs', desktop: 'md' }}
>
  <Button.Icon><IconAddOutline /></Button.Icon>
  <Button.Text>Add Item</Button.Text>
</Button.Root>
</HStack>

반응형 속성 목록

$css prop에서 반응형 객체 구문을 지원하는 속성:

카테고리	속성
Display	`display`
Flex	`flexDirection`, `flexWrap`, `flex`, `flexGrow`, `flexShrink`, `flexBasis`, `alignItems`, `alignSelf`, `justifyContent`, `justifyItems`, `justifySelf`, `order`, `alignContent`
Grid	`gridTemplateColumns`, `gridTemplateRows`, `gridColumn`, `gridRow`, `gridAutoFlow`, `gridAutoColumns`, `gridAutoRows`, `gridArea`, `gridColumnStart`, `gridColumnEnd`, `gridRowStart`, `gridRowEnd`
Spacing	`padding`, `paddingX`, `paddingY`, `paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft`, `margin`, `marginX`, `marginY`, `marginTop`, `marginRight`, `marginBottom`, `marginLeft`, `gap`, `rowGap`, `columnGap`
Sizing	`width`, `height`, `minWidth`, `maxWidth`, `minHeight`, `maxHeight`, `size`
Position	`position`, `top`, `right`, `bottom`, `left`, `inset`, `insetX`, `insetY`, `zIndex`
Border	`borderWidth`, `borderStyle`, `borderRadius`, `rounded`, `borderTopLeftRadius`, `borderTopRightRadius`, `borderBottomLeftRadius`, `borderBottomRightRadius`
Typography	`fontSize`, `fontWeight`, `fontFamily`, `lineHeight`, `textAlign`, `textDecoration`, `textTransform`, `letterSpacing`, `wordBreak`, `whiteSpace`, `textOverflow`
Visual	`overflow`, `overflowX`, `overflowY`, `opacity`, `cursor`, `pointerEvents`, `userSelect`, `visibility`, `objectFit`, `objectPosition`, `aspectRatio`
Transform	`transform`, `transition`, `animation`, `scale`, `rotate`, `translate`

참고: 색상 관련 속성(color, backgroundColor, borderColor 등)은 반응형이 아닌 인터랙티브 조건(hover, focus 등)을 지원합니다. 자세한 내용은 $css Prop 문서를 참조하세요.

On this page