CSS 미디어 쿼리 생성기
CSS 미디어 쿼리를 시각적으로 생성합니다. 반응형 디자인 브레이크포인트, 다크 모드, 인쇄용 프리셋 포함. CSS 코드 복사. 무료, 100% 브라우저에서 실행.
조건
프리셋
CSS 출력
참고
CSS 미디어 쿼리란?
미디어 쿼리(@media)는 디바이스 특성(화면 너비, 해상도, 색상 스킴 등)에 따라 CSS 스타일을 조건부로 적용하는 규칙입니다. 반응형 웹 디자인의 기반이며, 하나의 HTML로 다양한 디바이스에 대응할 수 있습니다.
미디어 특성
width / min-width / max-width — 뷰포트 너비. 반응형 디자인에서 가장 많이 사용. prefers-color-scheme — 사용자의 색상 스킴 설정 (light 또는 dark). 다크 모드 대응에 사용. prefers-reduced-motion — 애니메이션 축소 설정. 접근성에 중요. orientation — 디바이스 방향 (portrait/landscape). print — 인쇄 시 스타일 지정.
개인정보보호
모든 생성 처리는 브라우저에서 100% 실행됩니다. 데이터는 서버에 전송되지 않습니다.