UTILS.
기본부터 지키는 개인정보
@

CSS 미디어 쿼리 빌더

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

파일은 이 기기에만 남습니다

파일은 브라우저에서 처리되며 업로드되지 않습니다. 사이트는 도구 실행에 필요한 코드와 리소스를 다운로드합니다. 계정이나 추적은 없습니다.

다운로드를 눌러 이 도구를 하나의 HTML 파일로 저장하고 오프라인으로 사용하세요.

개인정보 →

이 도구에 대하여

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

자주 묻는 질문

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

더 많은 도구