CSS 미디어 쿼리 생성기
최소 너비, 최대 너비, 방향, 기기 프리셋으로 반응형 CSS @media 쿼리를 만듭니다. 100% 브라우저에서 실행되며 업로드되지 않습니다.
@media (min-width: 768px) and (max-width: 1024px) {
/* your styles here */
}🔒 모두 브라우저에서 처리되며 업로드되지 않습니다.
이 도구의 기능
이 생성기는 간단한 옵션으로 유효한 CSS @media 규칙을 만듭니다. 최소 너비, 최대 너비, 세로 또는 가로 방향, 그리고 모바일·태블릿·노트북·데스크톱을 위한 원클릭 기기 프리셋을 지원합니다. 설정한 각 조건은 and로 결합되고 빈 항목은 자동으로 제외되므로 언제나 바로 붙여넣을 수 있는 깔끔한 브레이크포인트를 얻습니다.
사용 방법
최소 너비와 최대 너비를 픽셀 단위로 입력하고, 필요하면 방향을 선택하거나 기기 프리셋을 눌러 자주 쓰는 브레이크포인트를 즉시 채우세요. 서식이 적용된 @media 블록이 입력란 아래에 실시간으로 갱신됩니다. 복사 버튼을 누르면 규칙이 클립보드에 담겨 스타일시트에 바로 붙여넣을 수 있습니다.
자주 묻는 질문
여러 조건은 어떻게 결합되나요?
설정한 모든 조건(최소 너비, 최대 너비, 방향)은 하나의 @media 규칙 안에서 CSS의 ' and ' 키워드로 연결됩니다. 비워 둔 항목은 제외되므로 빈 조건이나 잘못된 조건이 생기지 않습니다.
기기 프리셋은 어떤 값을 의미하나요?
프리셋은 자주 쓰이는 브레이크포인트를 채워 줍니다. 모바일은 767px 이하, 태블릿은 768~1023px, 노트북은 1024~1439px, 데스크톱은 1440px 이상을 대상으로 합니다. 시작점으로 사용한 뒤 너비 값을 직접 조정할 수 있습니다.
입력한 내용이 서버로 업로드되나요?
아니요. 미디어 쿼리는 전적으로 브라우저의 자바스크립트로 생성됩니다. 입력한 내용은 어디로도 전송·저장·업로드되지 않으며 오프라인에서도 사용할 수 있습니다.