현재:
← 목록으로

반응형 브레이크포인트 시스템

브레이크포인트, 컨테이너 너비, 컴포넌트 적용

브레이크포인트 정의

Mobile
0 - 640px

모바일 디바이스 (스마트폰)

Min Width
0px
Max Width
640px
Container
100%
Columns
1-2
sm
≥ 640px

작은 태블릿, 큰 스마트폰

Min Width
640px
Container
640px
Columns
2-3
Media Query
@media (min-width: 640px)
md
≥ 768px

태블릿

Min Width
768px
Container
768px
Columns
3-4
Media Query
@media (min-width: 768px)
lg
≥ 1024px

작은 노트북, 큰 태블릿

Min Width
1024px
Container
1024px
Columns
4-6
Media Query
@media (min-width: 1024px)
xl
≥ 1280px

데스크톱

Min Width
1280px
Container
1280px
Columns
6-12
Media Query
@media (min-width: 1280px)
2xl
≥ 1536px

큰 데스크톱, 외부 모니터

Min Width
1536px
Container
1536px
Columns
12
Media Query
@media (min-width: 1536px)

실시간 반응형 데모

브라우저 창 크기를 조절하여 변화를 확인하세요

자동 조정 그리드
1
2
3
4

컴포넌트 적용 예시

그리드 레이아웃

화면 크기별 컬럼 수 조정

/* Mobile: 1열 */
grid-template-columns: 1fr;

/* md: 2열 */
@media (min-width: 768px) {
  grid-template-columns: repeat(2, 1fr);
}

/* lg: 4열 */
@media (min-width: 1024px) {
  grid-template-columns: repeat(4, 1fr);
}
네비게이션

모바일: 햄버거 메뉴 → 데스크톱: 가로 메뉴

/* Mobile: 숨김 */
.nav-items {
  display: none;
}

/* md 이상: 표시 */
@media (min-width: 768px) {
  .nav-items {
    display: flex;
  }
}
타이포그래피

폰트 크기 반응형 조정

/* Mobile */
h1 { font-size: 32px; }
p { font-size: 16px; }

/* lg 이상 */
@media (min-width: 1024px) {
  h1 { font-size: 48px; }
  p { font-size: 18px; }
}
스페이싱

여백 조정

/* Mobile */
.section {
  padding: 32px 16px;
}

/* lg 이상 */
@media (min-width: 1024px) {
  .section {
    padding: 64px 32px;
  }
}

디자인 프롬프트