Breakpoints

반응형 레이아웃은 breakpoint 토큰으로 화면 폭 구간을 나눕니다. 정해진 단계만 사용하면 화면 전체가 일관된 반응형 규칙을 따릅니다.

개요

밀당 디자인시스템은 mobile-first 입니다. 신규 화면에서는 아래 네 단계(xs~lg)를 사용합니다.

스케일

아래 슬라이더로 가상 뷰포트 폭을 조절하면 활성 단계와 예시 기기 화면이 함께 바뀝니다.

사용법

환경에 따라 아래 두 방식 중 하나를 사용합니다.

1. 소스 직접 사용(Panda)
mildang-frontend 저장소처럼 DS 소스를 직접 사용할 때는 style prop 에 단계별 값을 객체로 넘깁니다. 키가 곧 breakpoint 이며, base 는 모든 폭의 기본값이고 sm·md·lg 는 각 최소 폭 이상에서 그 값을 덮어씁니다.

import { Box } from '@mildang/styled-system/jsx';

// 기본 16px, 960px(md) 이상에서 24px
<Box padding={{ base: '16', md: '24' }} />

// 모바일 1열 → sm(600px~) 2열 → lg(1280px~) 4열
<Box
  display="grid"
  gridTemplateColumns={{ base: '1fr', sm: 'repeat(2, 1fr)', lg: 'repeat(4, 1fr)' }}
/>;

값이 바뀌지 않는 단계는 생략합니다. 위 그리드는 md 를 적지 않았으므로 md 구간(960~1279px)에서는 바로 앞 단계인 sm 값(2열)이 그대로 유지됩니다.

2. 발행 패키지(Panda 미사용)
같은 폭을 미디어 쿼리 기준으로 작성합니다.

.section {
  padding: var(--ids-spacing-16);
}
@media (min-width: 960px) {
  .section {
    padding: var(--ids-spacing-24);
  }
}

미디어 쿼리 조건에는 CSS 변수를 넣을 수 없으므로(@media (min-width: var(--…)) 는 무효), 정의된 breakpoint 값(600·960·1280)을 그대로 적습니다. 핵심은 임의 폭이 아니라 정해진 값을 사용하는 것입니다.

권장 사항