UTILS.
100% 브라우저 내 실행
@

CSS 미디어 쿼리 빌더

프리셋으로 반응형 @media 쿼리를 만들고 복사하세요.

이 도구에 대하여

min-width, max-width 또는 범위와 방향을 선택해 반응형 @media 쿼리를 구성하고, 원클릭 기기 프리셋으로 래퍼를 복사하세요. 모든 작업은 브라우저 안에서 실행됩니다.

자주 묻는 질문

min-width와 max-width의 차이는 무엇인가요?
min-width는 해당 너비 이상에서 스타일을 적용하고(모바일 우선), max-width는 해당 너비 이하에서 적용합니다.
기기 프리셋은 어떻게 동작하나요?
각 프리셋은 일반적인 브레이크포인트를 채워 줍니다. 모바일은 767px까지, 태블릿은 768~1023px, 데스크톱은 1024px부터이며, 이후 세밀하게 조정할 수 있습니다.

더 많은 도구