Breakpoints

Scale

xs ~ 499px
모바일 · 1열 그리드 · 최소 패딩
sm ~ 768px
태블릿 · 2열 그리드 · 패딩 축소
md ~ 999px
소형 데스크탑 · 3열 그리드
lg ~ 1199px
데스크탑 · 3열 인덱스 그리드
xl 1200px+
와이드 · 4열 그리드 · 기본 레이아웃

Usage — CSS Media Query

/* 모바일 (xs) */
@media (max-width: 499px) { }

/* 태블릿 (sm) */
@media (max-width: 768px) { }

/* 소형 데스크탑 (md) */
@media (max-width: 999px) { }

/* 데스크탑 (lg) */
@media (max-width: 1199px) { }

/* 와이드 (xl) — max-width: 1600px 컨테이너 기준 */
@media (max-width: 1599px) { }

Specs

이름 max-width Index 그리드 Guide 패딩 주요 변화
xs 499px 1열 16px 12px 스와치 축소, 버튼 라벨 축소
sm 768px 2열 32px 16px Form 1열, 타입스케일 1열, 폰트 패밀리 세로 배치
md 999px 3열 48px 32px 팔레트 스크롤, 토큰 테이블 스크롤
lg 1199px 3열 48px 32px 인덱스 카드 3열로 축소
xl 1200px+ 4열 64px 32px 기본 레이아웃 (max-width 1200px 컨테이너)