반응형 디자인

반응형 디자인 (Responsive Design)

Chakra UI의 내장 반응형 스타일 prop을 사용해서 반응형 디자인을 만드는 방법을 알려드려요. 모바일 우선 브레이크포인트 시스템을 쉽게 활용할 수 있어요.

출처: 문서

본문

개요

Chakra UI는 min-width 미디어 쿼리와 함께 모바일 우선 브레이크포인트 시스템을 사용해요.

const breakpoints = {
  base: "0rem", // 0px
  sm: "30rem", // ~480px
  md: "48rem", // ~768px
  lg: "62rem", // ~992px
  xl: "80rem", // ~1280px
  "2xl": "96rem", // ~1536px
}

객체 문법

대형 화면에서 텍스트의 font-weight를 바꾸는 예시예요.

<Text fontWeight="medium" lg={{ fontWeight: "bold" }}>
  Text
</Text>

또는 prop 기반 수정자를 사용하세요.

<Text fontWeight={{ base: "medium", lg: "bold" }}>Text</Text>

배열 문법

Chakra는 반응형 스타일의 값으로 배열도 받아들여요. 배열에 각 브레이크포인트에 해당하는 값을 전달하세요. 앞선 코드를 예로 들면:

<Text fontWeight={["medium", undefined, undefined, "bold"]}>Text</Text>

md와 lg 브레이크포인트를 건너뛰기 위해 undefined를 사용한 것을 볼 수 있어요.

브레이크포인트 타게팅

브레이크포인트 범위

Chakra는 To 표기법으로 브레이크포인트 범위를 타게팅하는 방법을 제공해요. md와 xl 사이에 스타일을 적용하려면 mdToXl 속성을 사용하세요.

<Text fontWeight={{ mdToXl: "bold" }}>Text</Text>

이 텍스트는 md부터 xl 브레이크포인트까지만 굵게 표시돼요.

특정 브레이크포인트만

단일 브레이크포인트만 타게팅하려면 Only 표기법을 사용하세요. lgOnly 속성을 사용해서 lg 브레이크포인트에만 스타일을 적용하는 예시예요.

<Text fontWeight={{ lgOnly: "bold" }}>Text</Text>

아래 브레이크포인트

브레이크포인트와 그 이하를 타게팅하려면 Down 표기법을 사용하세요. 이렇게 하면 반응형 변형에 명확한 경계가 생겨요. sm 브레이크포인트부터 아래로 스타일을 적용하는 예시예요.

<Text fontWeight={{ smDown: "bold" }}>Text</Text>

이 텍스트는 base부터 sm 브레이크포인트까지 굵게 표시돼요.

브레이크포인트에서 요소 숨기기

Chakra는 특정 브레이크포인트에서 요소를 숨기는 hideFrom과 hideBelow 유틸리티를 제공해요.

md 브레이크포인트부터 요소를 숨기려면 hideFrom 유틸리티를 사용하세요.

<Stack hideFrom="md">
  <Text>This text will be hidden from the `md` breakpoint</Text>
</Stack>

md 브레이크포인트 아래에서 요소를 숨기려면 hideBelow 유틸리티를 사용하세요.

<Stack hideBelow="md">
  <Text>This text will be hidden below the `md` breakpoint</Text>
</Stack>

브레이크포인트 커스터마이징

브레이크포인트를 커스터마이징하는 방법은 브레이크포인트 커스터마이징 섹션을 참조하세요.

반응형 변형

컴포넌트 변형에 브레이크포인트를 적용할 때는 base 브레이크포인트 대신 명시적 브레이크포인트를 사용하는 것을 권장해요.

이렇게 하면 한 변형에서 다른 변형으로 스타일이 누출되는 것을 피할 수 있어요.

// 괜찮지만 스타일 누출로 이어질 수 있음 ⚠️
<Button variant={{ base: "solid", md: "outline" }}>Button</Button>

// 좋음 ✅
<Button variant={{ smDown: "solid", md: "outline" }}>Button</Button>

이렇게 하면 스타일 누적 없이 명확한 경계를 만들 수 있어요. :::

FAQ

브레이크포인트는 왜 `rem`으로 변환되나요?

rem으로의 변환은 의도적이며 접근성 측면에서 유익해요.

사용자가 브라우저의 글꼴 설정을 변경한 경우
사용자가 확대한 경우
HTML에서 글꼴 크기가 변경된 경우

반응형 디자인