CSS 미디어 쿼리 생성기
미디어 유형·너비·높이·방향·prefers-color-scheme을 조합해 @media 규칙을 만들거나, 모바일·태블릿·노트북·데스크톱 중단점 프리셋에서 시작하세요.
not과 only는 미디어 유형 앞에 붙습니다. 유형이 지정 안 함이면 all을 씁니다. not은 쿼리 전체를 부정합니다.
붙여 넣은 규칙이 쿼리 안에 들여쓰기되어 들어갑니다.
목록의 쿼리 중 하나라도 맞으면 규칙이 적용됩니다.
@media (min-width: 768px) and (max-width: 1024px) {
/* your styles here */
}@media (min-width: 768px) and (max-width: 1024px)너비와 방향으로 만드는 @media 규칙
이 생성기는 간단한 옵션으로 유효한 CSS @media 규칙을 만듭니다. 미디어 유형(all, screen, print, speech), 최소·최대 너비, 최소·최대 높이, 최소·최대 해상도와 화면비, 세로 또는 가로 방향, 라이트 또는 다크 색 구성표, 움직임 줄이기·호버·포인터 조건, 모바일·태블릿·노트북·데스크톱을 위한 원클릭 기기 프리셋, 그리고 Bootstrap·Tailwind CSS·Foundation·Angular Material의 중단점을 지원합니다. 설정한 각 조건은 and로 결합되고 빈 항목은 자동으로 제외되므로 언제나 바로 붙여넣을 수 있는 깔끔한 중단점을 얻습니다.
사용 방법
최소 너비와 최대 너비를 단위에서 고른 px·em·rem으로 입력하고, 필요하면 방향을 선택하거나 기기 프리셋을 눌러 자주 쓰는 중단점을 즉시 채우세요. “중단점 사다리”에서 모바일 우선 (min-width만)을 고르면 ‘…px 이상’ 버튼들이 최소 너비만, 데스크톱 우선 (max-width만)을 고르면 ‘…px 미만’ 버튼들이 최대 너비만 넣습니다. 미만 값은 경계보다 아주 조금 작게 들어가 경계값 자체는 위 규칙이 맡습니다. 서식이 적용된 @media 블록이 입력란 아래에 실시간으로 갱신되며, “내 CSS (선택)”에 규칙을 붙여 넣으면 그 규칙이 블록 안에 들어갑니다. 결과 아래 줄은 같은 쿼리를 브라우저가 직접 판정해, 지금 이 브라우저 창에 적용되는지 알려 줍니다. 색 구성표 조건은 이 사이트의 테마 전환이 아니라 시스템 설정을 따릅니다. ‘다른 쿼리로 추가 (OR)’는 지금 쿼리를 목록에 넣어 규칙이 그 쿼리에도 적용되게 하고, 수식어 줄은 미디어 유형 앞에 not이나 only를 붙입니다. 복사 버튼을 누르면 규칙이 클립보드에 담겨 스타일시트에 바로 붙여넣을 수 있습니다.
자주 묻는 질문
여러 조건은 어떻게 결합되나요?
설정한 모든 조건(너비, 높이, 해상도, 화면비, 방향, 색 구성표, 움직임, 호버, 포인터)은 하나의 @media 규칙 안에서 CSS의 ' and ' 키워드로 연결되고, 미디어 유형을 고르면 그 뒤에 이어집니다. 비워 둔 항목은 제외되므로 빈 조건이나 잘못된 조건이 생기지 않습니다. 세로 방향에 1/1보다 넓은 최소 화면비처럼 절대 맞을 수 없는 조합은 요청한 대로 쓰되 결과 아래에 그렇다고 알려 줍니다. 여러 경우를 한꺼번에 노리려면 ‘다른 쿼리로 추가 (OR)’를 누르세요. 쿼리들이 쉼표로 이어지고, 그중 하나만 맞아도 규칙이 적용됩니다. not과 only는 미디어 유형 앞에 붙고, not은 쿼리 전체를 부정합니다.
기기 프리셋은 어떤 값을 의미하나요?
프리셋은 자주 쓰이는 중단점을 채워 줍니다. 모바일은 767px 이하, 태블릿은 768~1023px, 노트북은 1024~1439px, 데스크톱은 1440px 이상을 대상으로 합니다. 시작점으로 사용한 뒤 너비 값을 직접 조정할 수 있습니다.
인쇄용, 다크 모드, em 단위 쿼리도 만들 수 있나요?
네. 미디어 유형에서 all, screen, print, speech를 고르면 쿼리 맨 앞에 붙습니다 — 혼자면 @media print, 조건과 함께면 @media screen and (orientation: landscape)처럼 됩니다. 색 구성표는 다크 모드용 (prefers-color-scheme: dark)나 light를 더합니다. 단위에서 px, em, rem을 고르면 모든 너비와 높이가 그 단위로 쓰이고, 기기 프리셋은 브라우저 기본 글자 크기로 환산한 em·rem 값이 됩니다. 미디어 쿼리 안의 em이 바로 그 크기라서 중단점이 독자의 글자 확대를 따라갑니다.
움직임 줄이기·호버·해상도 조건을 넣거나, 프레임워크의 중단점을 쓸 수 있나요?
네. 움직임·호버·포인터 줄에서 값을 고르면 (prefers-reduced-motion: …), (hover: …), (pointer: …)가 붙고, 고르기 전에는 아무것도 붙지 않습니다. 최소·최대 해상도 (dppx) 칸은 레티나·인쇄용 규칙에, 최소·최대 화면비 칸은 16/9 같은 비율에 쓰며, 절대 맞을 수 없는 범위는 그렇다고 알려 줍니다. “프레임워크 중단점”에는 Bootstrap, Tailwind CSS, Foundation, Angular Material이 있고, 프레임워크가 부르는 이름이 붙은 버튼을 누르면 모바일 우선으로 최소 너비가 들어갑니다.
min-width만, 또는 max-width만 쓰는 중단점도 만들 수 있나요?
네. ‘중단점 사다리’에서 방향을 고르세요. 모바일 우선 (min-width만)을 고르면 ‘…px 이상’ 버튼들이 나오고, 누르면 최소 너비만 넣고 최대 너비는 비워 규칙이 그 위로 계속 적용됩니다. 데스크톱 우선 (max-width만)을 고르면 ‘…px 미만’ 버튼들이 최대 너비만 넣고 최소 너비는 비웁니다. 이때 최대 너비는 Bootstrap처럼 경계보다 아주 조금 작게 들어가 경계값 자체는 위 규칙이 맡으므로 두 규칙이 겹치지 않습니다. 사다리도 기기 프리셋처럼 단위 설정을 따릅니다.