미디어 쿼리 생성기 기능 조건 및 미리 정의된 브레이크포인트로 CSS 미디어 쿼리를 생성합니다.
미디어 쿼리 생성기
기능 조건 및 미리 정의된 브레이크포인트로 CSS 미디어 쿼리를 생성합니다.
사전 설정 사용 또는 맞춤 설정
일반적인 사전 설정을 선택하거나 미디어 기능으로 사용자 지정 조건을 추가합니다.
조건 구성
미디어 유형, 기능 조건 및 AND 또는 OR 연산자를 사용하여 결합합니다.
쿼리 복사
스타일시트에서 사용할 수 있는 생성된 미디어 쿼리를 복사합니다.
What Is 미디어 쿼리 생성기?
미디어 쿼리 생성기는 반응형 디자인 및 기능 감지를 위한 CSS 미디어 쿼리를 구축하는 데 도움이 됩니다. 미디어 쿼리는 뷰포트 너비, 높이, 방향, 색상 구성표 선호도 등과 같은 장치 특성에 따라 조건부로 CSS 규칙을 적용합니다. 이 도구는 일반적인 사용 사례(모바일, 태블릿, 데스크톱, 다크 모드, 인쇄, 감소된 동작)에 대한 미리 설정된 쿼리와 복잡한 조건을 생성하기 위한 커스텀 빌더를 제공합니다. 미디어 유형(화면, 인쇄, 모두)을 설정하고 여러 기능 조건을 추가하며它们를 결합하는 방법(AND 또는 OR)을 선택할 수 있습니다. 생성된 쿼리는 @media 규칙 및 괄호와 함께 올바른 구문을 포함하여 CSS에 붙여넣기 준비가 된 상태입니다.
Why Use 미디어 쿼리 생성기?
-
모바일, 태블릿, 데스크톱, 다크 모드 등 일반적인 사전 설정
-
모든 CSS 미디어 기능 지원, 최신 기능 포함
-
AND/OR 연산자를 사용하여 여러 조건 결합
-
일반적인 브레이크포인트에 대한 참조 표로 빠른 조회
Common Use Cases
반응형 레이아웃
다양한 화면 크기에 따라 브레이크포인트 기반 스타일을 생성합니다.
다크 모드 지원
다크 모드 스타일을 위한 prefers-color-scheme 쿼리를 생성합니다.
인쇄용 스타일시트
@media print 쿼리를 사용하여 인쇄 최적화된 스타일을 생성합니다.
접근성 기능
감소된 동작 및 대조도 선호도를 위한 접근 가능한 디자인을 대상으로 합니다.
Technical Guide
CSS 미디어 쿼리는 조건부로 스타일을 적용하기 위해 @media 규칙을 사용합니다. 구문은 @media [타입]과 (조건) {규칙}입니다. 미디어 유형에는 화면, 인쇄 및 모두가 포함됩니다. 미디어 기능은 장치 능력 테스트: 반응형 브레이크포인트를 위한 min-width/max-width, 가로/세로 방향을 위한 orientation, 다크/라이트 모드를 위한 prefers-color-scheme, 애니메이션 감도를 위한 prefers-reduced-motion, 호버 기능을 위한 hover 및 입력 정밀도에 대한 포인터입니다. 여러 조건은 모든 조건에 대해 and 키워드로 결합되거나任意 조건에 대해 쉼표로 구분됩니다. not 키워드는 쿼리를 부정합니다. prefers-color-scheme 및 prefers-reduced-motion과 같은 최신 기능을 사용하면 사용자 선호도에 대한 점진적인 향상을 가능하게 합니다. 모바일 우선 접근 방식을 위해 min-width 쿼리를 사용하십시오. 데스크톱 우선 접근 방식의 경우 max-width를 사용합니다. 둘 다 결합하여 @media (min-width: 768px) 및 (max-width: 1023px)와 같은 범위 쿼리를 생성할 수 있습니다.
Tips & Best Practices
-
1모바일 우선 접근법과 함께 min-width 쿼리를 사용하여 성능을 개선합니다
-
2접근성을 위해 항상 prefers-reduced-motion을 포함합니다
-
3자동 다크 모드 지원을 위한 prefers-color-scheme 테스트
-
4특정 기기 범주를 대상으로 하는 데에 대한 범위 쿼리(min 및 max) 사용
Related Tools
CSS 플렉스박스 플레이그라운드
모든 플렉스 컨테이너 속성에 대한 인터랙티브 제어를 제공하는 시각적 CSS 플렉스박스 탐색기입니다.
🎨 CSS & Design
CSS 그리드 플레이그라운드
템플릿 열, 행 및 간격에 대한 상호 작용형 컨트롤을 갖춘 시각적 CSS 그리드 빌더입니다.
🎨 CSS & Design
반응형 디자인 테스터
내장된 iframe 뷰어를 사용하여 일반적인 기기 브레이크포인트에서 웹사이트를 미리 봅니다.
🎨 CSS & Design
인쇄 스타일시트 생성기
@media 인쇄용 스타일시트를 생성하여 요소를 숨기고, 텍스트를 스타일링하고, 페이지 나눔을 제어할 수 있습니다.
🎨 CSS & DesignFrequently Asked Questions
Q min-width와 max-width 중 어떤 것을 사용해야 합니까?
Q 어떤 브레이크포인트를 사용해야 합니까?
Q 여러 조건을 결합할 수 있습니까?
Q prefers-color-scheme是什么?
Q 감소된 동작 지원 방법
About This Tool
미디어 쿼리 생성기 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.