분류: 개발 도구
반응형 브레이크포인트 치트시트
프레임워크별 브레이크포인트를 비교하거나 직접 만들기
Tailwind, Bootstrap, Bulma, Material Design이 기본으로 사용하는 min-width 브레이크포인트를 비교하고, 원하는 프레임워크의 완성된 미디어 쿼리를 복사하거나, 직접 브레이크포인트 이름과 너비를 입력해 커스텀 쿼리를 생성하세요.
| 이름 | 최소 너비 |
|---|---|
| sm | 640px |
| md | 768px |
| lg | 1024px |
| xl | 1280px |
| 2xl | 1536px |
미디어 쿼리
@media (min-width: 640px) {
/* sm */
}
@media (min-width: 768px) {
/* md */
}
@media (min-width: 1024px) {
/* lg */
}
@media (min-width: 1280px) {
/* xl */
}
@media (min-width: 1536px) {
/* 2xl */
}한 줄에 이름과 픽셀 너비를 입력하세요. 예: "md, 768".
| 이름 | 최소 너비 |
|---|---|
| sm | 480px |
| md | 768px |
| lg | 1100px |
| xl | 1440px |
미디어 쿼리
@media (min-width: 480px) {
/* sm */
}
@media (min-width: 768px) {
/* md */
}
@media (min-width: 1100px) {
/* lg */
}
@media (min-width: 1440px) {
/* xl */
}이 페이지의 모든 처리는 브라우저에서 이루어집니다. 업로드는 없습니다.
이 도구로 할 수 있는 일
CSS 프레임워크마다 브레이크포인트 이름과 픽셀 너비가 제각각이라, 프로젝트를 오갈 때마다 어떤 프레임워크에서 어떤 값이 적용되는지 헷갈리기 쉽습니다. 이 도구는 네 가지 대표적인 프레임워크의 기본값을 나란히 보여주고, 그중 어느 것이든 — 또는 직접 입력한 목록이든 — 바로 붙여넣을 수 있는 @media (min-width: …) 블록으로 바꿔줍니다.
사용 방법
- 프레임워크를 선택해 기본 브레이크포인트와 미디어 쿼리를 확인하세요.
- 필요한 브레이크포인트의 생성된 CSS를 복사하세요.
- 또는 직접 브레이크포인트 이름과 너비를 입력해 커스텀 쿼리를 만드세요.
개인정보
이 도구는 전부 브라우저 안에서 동작합니다. 입력한 내용은 업로드되거나 저장되거나 공유되지 않으며, 탭을 닫으면 사라집니다.
자주 묻는 질문
- 왜 max-width가 아니라 min-width인가요?
- min-width를 기준으로 하는 모바일 우선 방식은 기본 스타일이 가장 작은 화면을 대상으로 하고, 각 브레이크포인트가 더 큰 화면을 위한 스타일을 추가하는 방식이라, 프레임워크 자체 브레이크포인트처럼 규칙을 왔다 갔다 하며 덮어쓸 필요가 없습니다.
- 이 값들이 프레임워크의 실제 기본값과 정확히 일치하나요?
- 네, 각 프레임워크가 문서로 공개한 기본 브레이크포인트입니다. 프로젝트에 Tailwind나 Bootstrap을 커스텀 설정으로 사용 중이라면, 커스텀 브레이크포인트 빌더에 프로젝트 고유의 값을 입력해 사용하세요.
- 커스텀 브레이크포인트 목록은 어떻게 입력하나요?
- 한 줄에 브레이크포인트 하나씩, 이름과 픽셀 너비를 쉼표나 공백으로 구분해 입력하세요. 예: "md, 768".