CSS 미디어 쿼리 사용 방법: 초보자를 위한 완벽한 가이드

목차:

• CSS 미디어 쿼리 구문 #
• CSS 미디어 쿼리에서 미디어 유형 정의 #
• 미디어 쿼리 수정자(논리 연산자) #
• CSS 미디어 쿼리에 대한 일반적인 미디어 기능 #
• CSS 미디어 쿼리에 대한 덜 일반적인 미디어 기능 #
• CSS 미디어 쿼리 레벨 5의 미디어 기능 #
• 비표준 미디어 기능 #
• CSS 미디어 쿼리에 대한 모범 사례 #

CSS 미디어 쿼리를 사용하는 방법: 구문

다양한 미디어 기능에 대해 알아보기 전에 CSS 미디어 쿼리의 기본 구문을 살펴보겠습니다. 미디어 쿼리는 다음과 같습니다.

 @media screen and ( min-width: 900px ) { article { padding : 1rem 3rem ; } }
 코드 언어: CSS ( css )

각 부분을 세분화하는 데 도움이 되도록 일반적인 CSS 미디어 쿼리의 모든 부분을 식별하는 편리한 이미지가 있습니다.

다음은 이미지의 내용에 대한 추가 세부정보와 함께 요약입니다.

• @media – 미디어 쿼리를 작성 중임을 나타내는 CSS 규칙
• screen – 미디어 쿼리가 대상으로 해야 하는 장치를 식별하는 데 사용 가능한 미디어 유형 중 하나입니다. not 및 only 연산자를 사용하지 않는 경우 선택 사항입니다.
• and – 논리 연산자라고도 하는 미디어 쿼리 수정자로 특정 장치 및 미디어 기능을 조건부로 대상으로 지정하는 데 도움이 됩니다.
• (min-width: 900px) – 특정 장치 크기, 장치 유형, 장치 기능 등을 대상으로 하는 수많은 미디어 기능 및 값 중 하나입니다.
• article { ... } – 미디어 쿼리에 적용할 CSS 규칙을 나타내는 선택기 및 CSS 규칙, 여는 중괄호와 닫는 중괄호 안에 중첩됩니다.

CSS가 올바르게 형식화되어 중단되지 않는 한 여는 미디어 쿼리 중괄호 안에 원하는 만큼 CSS를 포함할 수 있습니다(즉, 선택기에 대해 중괄호가 누락되지 않음 등).

CSS 미디어 쿼리 사용 방법: 미디어 유형 정의

이전 섹션에서 설명한 것처럼 미디어 쿼리로 타겟팅할 미디어 유형을 선택적으로 정의할 수 있습니다. 미디어 유형은 스타일을 적용할 장치의 범주를 설명합니다. 미디어 유형은 다음 세 가지 키워드 중 하나로 정의됩니다.

• all – 예외 없이 모든 장치를 대상으로 지정하려는 것을 나타냅니다.
• print – 웹 브라우저의 "인쇄 미리 보기" 창과 같은 인쇄 디스플레이로 출력을 보내는 장치를 대상으로 합니다.
• screen – 이것은 print 범주에 속하지 않는 모든 장치를 대상으로 하는 print 의 반대입니다.

위에는 사용해야 하는 유일한 미디어 유형이 있습니다(있는 경우). CSS 미디어 쿼리 레벨 4 사양에서 이전에 지원되었던 수많은 미디어 유형이 이제 더 이상 사용되지 않습니다. 사양은 이러한 사용을 권장하지 않으며 브라우저는 계속 "유효한" 코드로 보는 동안 무시하도록 지시합니다(코드가 앞으로 깨지지 않도록 하기 위해). 이러한 미디어 유형에는 tty , tv , projection , handheld , braille , embossed , aural 및 speech 가 있습니다.

사양에서도 다음을 설명합니다.

다시 말해, 언젠가는 미디어 유형이 없는 모든 미디어 쿼리를 작성할 것으로 예상됩니다.

다음 항목에 관심이 있을 수도 있습니다.

• WordPress REST API: 정의 및 사용 시작 방법
• 초심자를 위한 궁극의 CSS 그리드 튜토리얼(대화형 예제 포함)
• 모바일 웹사이트 속도 테스트가 잘 안 되었나요? 모바일 페이지 속도를 향상시키는 10가지 방법이 있습니다 ️

미디어 쿼리 수정자(논리 연산자)

또한 각 미디어 쿼리는 미디어 쿼리에 조건부 논리를 추가하는 데 도움이 되는 두 가지 특정 수정자 또는 논리 연산자에 액세스할 수 있습니다.

수정자는 뒤에 오는 미디어 기능의 의미에 영향을 미치는 단일 키워드입니다. 사용 가능한 수정자는 다음과 같습니다.

수정자가 not

이 수식어가 미디어 기능 앞에 오면 미디어 쿼리에서 대상 장치를 제외합니다(CSS의 :not() 선택기가 작동하는 방식과 유사).

다음은 예입니다.

 @media not print { article { padding : 1rem 3rem ; } }
 코드 언어: CSS ( css )

위의 미디어 쿼리는 인쇄 장치가 아닌 모든 장치를 대상으로 하므로 위의 내용은 수정자가 없는 screen 을 사용하는 것과 같습니다.

only 수정자

이 수정자는 특히 레거시 브라우저가 미디어 쿼리를 올바르게 구문 분석하도록 돕기 위한 것입니다. 사양에서 설명하는 대로: " only 키워드는 미디어 쿼리의 결과에 영향을 미치지 않지만 미디어 쿼리가 알 수 없는 미디어 유형 "only"를 지정하는 것으로 레거시 사용자 에이전트에 의해 구문 분석되어 무시됩니다."

예를 살펴보십시오.

 @media only screen { article { padding : 1rem 3rem ; } }
 코드 언어: CSS ( css )

and 수정자

단일 미디어 쿼리에서 여러 미디어 기능을 결합하는 데 사용됩니다.

예는 다음과 같습니다.

 @media screen and ( min-width: 800px ) { article { padding : 1rem 3rem ; } }
 코드 언어: CSS ( css )

위의 내용은 너비가 800px 이상인 모든 비 인쇄 장치를 대상으로 합니다.

, 수정자

쉼표를 사용하면 논리 or 연산자와 유사하게 작동하는 미디어 쿼리 목록을 포함할 수 있습니다.

다음은 예입니다.

 @media screen and ( min-width: 800px ), print and ( min-width: 1000px ) { article { padding : 1rem 3rem ; } }
 코드 언어: CSS ( css )

위 미디어 쿼리의 스타일은 쉼표로 구분된 두 미디어 쿼리 중 하나를 대상으로 합니다. 이것은 CSS 선택기를 사용할 때 쉼표가 작동하는 방식과 유사합니다.

CSS 미디어 쿼리에 대한 일반적인 미디어 기능

이제 통합할 수 있는 다양한 미디어 기능인 CSS 미디어 쿼리를 사용하는 방법에 대한 이 가이드의 핵심에 도달했습니다. 선택한 미디어 기능으로 표시되는 특정 특성을 가진 이러한 대상 장치입니다.

미디어 기능은 미디어 유형 사용을 개선하여 특정 상황에서 스타일을 적용할 때 보다 세분화된 접근 방식을 사용할 수 있도록 합니다. 이 섹션과 다음 섹션에서는 각각의 가능한 값 또는 값 유형을 표시하는 몇 가지 예제 코드와 함께 각각이 대상으로 하는 대상을 설명합니다.

이 섹션에서는 가장 일반적으로 사용되며 가장 잘 지원되는 미디어 기능을 살펴봅니다.

width : 스크롤바의 너비를 포함한 뷰포트의 너비. 또한 min- 및 max- 접두사를 사용할 수 있습니다.

 @media ( width: 800px ) { ... } @media ( min-width: 360px ) { ... } @media ( max-width: 1400px ) { ... }
 코드 언어: CSS ( css )

height : 뷰포트의 높이. min- 및 max- 접두사를 허용합니다.

 @media ( height: 500px ) { ... } @media ( min-height: 400px ) { ... } @media ( max-height: 400px ) { ... }
 코드 언어: CSS ( css )

orientation : 뷰포트의 방향.

 @media ( orientation: portrait) { ... } @media ( orientation: landscape) { ... }
 코드 언어: CSS ( css )

display-mode : 웹 앱 매니페스트에 지정된 애플리케이션의 표시 모드입니다.

 @media ( display-mode: fullscreen) { ... } @media ( display-mode: standalone) { ... } @media ( display-mode: minimal-ui) { ... } @media ( display-mode: browser) { ... }
 코드 언어: CSS ( css )

aspect-ratio : 지정된 종횡비를 기반으로 하며, 슬래시로 구분된 두 개의 양의 정수로 표시됩니다.

 @media ( aspect-ratio: 16 / 9 ) { ... }
 코드 언어: CSS ( css )

color : 출력 장치의 색상 구성 요소당 비트 수 또는 장치가 색상을 사용하지 않는 경우 0입니다. 또한 min- 및 max- 접두사를 사용할 수 있습니다. 값이 없으면 색상 장치를 대상으로 하고 있음을 나타냅니다.

 @media (color) { ... } @media ( color: 8 ) { ... } @media ( min-color: 8 ) { ... } @media ( max-color: 16 ) { ... }
 코드 언어: CSS ( css )

grid : 장치가 그리드 기반 화면(예: 텍스트 기반 터미널) 또는 비트맵 기반 화면(대부분의 최신 컴퓨터, 태블릿 및 스마트폰과 같은)을 사용하는지 감지합니다. 값 1 은 그리드 기반을 의미하고 값 0 은 비트맵 기반을 의미합니다.

 @media ( grid: 0 ) { ... } @media ( grid: 1 ) { ... }
 코드 언어: CSS ( css )

monochrome : 장치의 흑백 프레임 버퍼에 있는 픽셀당 비트 수입니다.

 @media ( monochrome: 0 ) { ... } @media (monochrome) { ... }
 코드 언어: CSS ( css )

resolution : 출력 장치의 픽셀 밀도입니다. min- 및 max- 접두사를 사용할 수도 있습니다.

 @media ( resolution: 72dpi ) { ... } @media ( min-resolution: 300dpi ) { ... } @media ( max-resolution: 150dpi ) { ... }
 코드 언어: CSS ( css )

CSS 미디어 쿼리를 위한 덜 일반적인 미디어 기능

다음 미디어 기능은 일반적으로 사용되지 않지만 특정 상황에서 유용할 수 있습니다. 이들 중 일부는 브라우저 지원이 부족할 수도 있으므로 사용하기 전에 caniuse.com 또는 MDN에서 지원을 찾아보십시오.

any-hover : 호버 기능이 있는지 여부.

 @media ( any-hover: none) { ... } @media ( any-hover: hover) { ... }
 코드 언어: CSS ( css )

any-pointer : 포인팅 장치가 있는지 여부와 정확도.

 @media ( any-pointer: none) { ... } @media ( any-pointer: course) { ... } @media ( any-pointer: fine) { ... }
 코드 언어: CSS ( css )

color-gamut : 장치에서 지원하는 대략적인 색상 범위입니다.

 @media ( color-gamut: srgb) { ... } @media ( color-gamut: p3) { ... } @media ( color-gamut: rec2020) { ... }
 코드 언어: CSS ( css )

color-index : 출력 장치의 색상 조회 테이블에 있는 항목 수입니다. 또한 min- 및 max- 접두사를 사용할 수 있습니다. 값이 없으면 색상 인덱스를 타겟팅하고 있음을 나타냅니다.

 @media (color-index) { ... } @media ( min-color-index: 15000 ) { ... } @media ( max-color-index: 30000 ) { ... }
 코드 언어: CSS ( css )

hover : 사용자가 요소 위로 마우스를 이동할 수 있는지 여부.

 @media ( hover: none) { ... } @media ( hover: hover) { ... }
 코드 언어: CSS ( css )

overflow-block : 장치가 블록 축을 따라 오버플로되는 콘텐츠를 처리하는 방법입니다.

 @media ( overflow-block: none) { ... } @media ( overflow-block: scroll) { ... } @media ( overflow-block: optional-paged) { ... } @media ( overflow-block: paged) { ... }
 코드 언어: CSS ( css )

overflow-inline : 장치가 인라인 축을 따라 뷰포트를 오버플로하는 콘텐츠를 처리하는 방법입니다.

 @media ( overflow-inline: none) { ... } @media ( overflow-inline: scroll) { ... }
 코드 언어: CSS ( css )

pointer : 장치에 포인터가 있는 경우.

 @media ( pointer: none) { ... } @media ( pointer: coarse) { ... } @media ( pointer: fine) { ... }
 코드 언어: CSS ( css )

scan : 장치가 인터레이스(일부 플라즈마 TV와 같이) 또는 프로그레시브(대부분의 컴퓨터 모니터와 같이)인 경우.

 @media ( scan: interlace) { ... } @media ( scan: progressive) { ... }
 코드 언어: CSS ( css )

update : 즉, 업데이트 빈도입니다. 출력 장치가 콘텐츠의 모양을 수정할 수 있는 빈도입니다.

 @media ( update: none) { ... } @media ( update: slow) { ... } @media ( update: fast) { ... }
 코드 언어: CSS ( css )

CSS 미디어 쿼리 레벨 5의 미디어 기능

다음 미디어 기능은 미디어 쿼리 레벨 5 사양의 새로운 기능입니다. 현재로서는 이들 중 일부만이 브라우저를 지원하지만 CSS 미디어 쿼리를 사용하는 방법을 배울 때 앞으로 무엇이 있을지 알아두는 것이 좋습니다.

dynamic-range : 장치에서 지원하는 밝기, 명암비 및 색심도의 조합입니다.

 @media ( dynamic-range: standard) { ... } @media ( dynamic-range: high) { ... }
 코드 언어: CSS ( css )

forced-colors : Windows 고대비 모드가 활성화된 경우와 같이 장치가 사용자가 선택한 제한된 색상 팔레트를 활성화했는지 여부를 감지합니다.

 @media ( forced-color: none) { ... } @media ( forced-color: active) { ... }
 코드 언어: CSS ( css )

horizontal-viewport-segments : 뷰포트의 논리적 수평 세그먼트의 수입니다.

 @media ( horizontal-viewport-segments: 3 ) { ... }
 코드 언어: CSS ( css )

environment-blending : 사용자 디스플레이의 특성을 쿼리합니다.

 @media ( environment-blending: opaque) { ... } @media ( environment-blending: additive) { ... } @media ( environment-blending: subtractive) { ... }
 코드 언어: CSS ( css )

inverted-colors : 브라우저 또는 OS가 색상을 반전하는 경우.

 @media ( inverted-colors: none) { ... } @media ( inverted-colors: inverted) { ... }
 코드 언어: CSS ( css )

nav-controls : 브라우저가 검색 가능한 탐색 컨트롤을 제공하는지 여부.

 @media ( nav-controls: none) { ... } @media ( nav-controls: back) { ... }
 코드 언어: CSS ( css )

prefers-contrast : 사용자가 인접한 색상 간의 대비 증가 또는 감소를 선호하는 경우.

 @media ( prefers-contrast: no-preference) { ... } @media ( prefers-contrast: more) { ... } @media ( prefers-contrast: less) { ... }
 코드 언어: CSS ( css )

prefers-color-scheme : 사용자가 밝은 색 또는 어두운 색 구성표를 선호하는 경우.

 @media ( prefers-color-scheme: light) { ... } @media ( prefers-color-scheme: dark) { ... }
 코드 언어: CSS ( css )

prefers-reduced-data : 사용자가 데이터를 덜 사용하는 대체 콘텐츠를 선호하는 경우.

 @media ( prefers-reduced-data: no-preference) { ... } @media ( prefers-reduced-data: reduce) { ... }
 코드 언어: CSS ( css )

prefers-reduced-motion : 사용자가 페이지에서 덜 움직이는 것을 선호하는 경우.

 @media ( prefers-reduced-motion: no-preference) { ... } @media ( prefers-reduced-motion: reduce) { ... }
 코드 언어: CSS ( css )

prefers-reduced-transparency : 사용자가 시스템을 요청한 경우 투명 또는 반투명 레이어 효과의 양을 최소화합니다.

 @media ( prefers-reduced-transparency: no-preference) { ... } @media ( prefers-reduced-transparency: reduce) { ... }
 코드 언어: CSS ( css )

scripting : 스크립팅(거의 항상 JavaScript)을 사용할 수 있는 경우.

 @media ( scripting: none) { ... } @media ( scripting: initial- only ) { ... } @media ( scripting: enabled) { ... }
 코드 언어: CSS ( css )

vertical-viewport-segments : 뷰포트의 논리적 수평 세그먼트 수입니다.

 @media ( vertical-viewport-segments: 3 ) { ... }
 코드 언어: CSS ( css )

video-color-gamut : 브라우저 및 장치에서 지원하는 대략적인 색상 범위입니다.

 @media ( video-color-gamut: srgb) { ... } @media ( video-color-gamut: p3) { ... } @media ( video-color-gamut: rec2020) { ... }
 코드 언어: CSS ( css )

video-dynamic-range : 브라우저 및 장치에서 지원하는 대략적인 색상 범위입니다.

 @media ( video-dynamic-range: standard) { ... } @media ( video-codynamic-range: high) { ... }
 코드 언어: CSS ( css )

비표준 미디어 기능

마지막으로 다음은 사용을 권장하지 않지만 특정 유형의 기기(예: iOS 태블릿 및 휴대폰)를 타겟팅하는 데 유용할 수 있는 일부 비표준 미디어 기능입니다.

-webkit-device-pixel-ratio : resolution 미디어 기능의 대안으로 숫자 값으로 정의됩니다.

 @media ( -webkit-device-pixel-ratio: 2 ) { ... }
 코드 언어: CSS ( css )

webkit-animation : 장치가 공급업체 접두사가 붙은 애니메이션을 지원하는 경우.

 @media ( -webkit-animation: true) { ... } @media ( -webkit-animation: false) { ... }
 코드 언어: CSS ( css )

webkit-transform-2d : 장치가 공급업체 접두사가 붙은 CSS 2D 변환을 지원하는 경우.

 @media (-webkit-transform- 2 d: true) { ... } @media (-webkit-transform- 2 d: false) { ... }
 코드 언어: CSS ( css )

webkit-transform-3d : 장치가 공급업체 접두사가 붙은 CSS 3D 변환을 지원하는 경우.

 @media (-webkit-transform- 3 d: true) { ... } @media (-webkit-transform- 3 d: false) { ... }
 코드 언어: CSS ( css )

webkit-transition : 장치가 공급업체 접두어가 붙은 전환을 지원하는지 감지하는 더 이상 사용되지 않는 기능입니다.

 @media ( -webkit-transition: true) { ... } @media ( -webkit-transition: false) { ... }
 코드 언어: CSS ( css )

보시다시피 CSS 미디어 쿼리에 사용되는 미디어 기능의 범위는 반응형 웹 디자인 운동이 시작된 이후로 상당히 증가했습니다. 원하는 모든 것을 감지하고 각 유형의 장치 기능에 대해 CSS를 작성할 수 있습니다.

CSS 미디어 쿼리 모범 사례

이 가이드에서 CSS 미디어 쿼리를 사용하는 방법에 대한 원시 코드를 많이 다루었지만 코드만으로는 미디어 쿼리 전문가가 될 수 없습니다. 다음은 CSS 미디어 쿼리를 최대한 활용하기 위한 몇 가지 일반적인 팁과 제안입니다.

• iPad, iPhone 등과 같은 특정 장치 크기에 대한 미디어 쿼리를 작성하지 마십시오. 레이아웃이 다른 지점에서 '중단'되는 방식에 따라 미디어 쿼리를 작성하십시오(따라서 "중단점"이라는 용어). 이는 콘텐츠가 중단점을 정의하도록 허용한다는 것을 의미합니다.
• 가능하면 미디어 쿼리가 아닌 CSS가 가장 작은 장치에 적용되는 미디어 쿼리와 함께 모바일 우선 접근 방식으로 이동한 다음 필요에 따라 더 큰 표시 영역에 대한 미디어 쿼리를 추가합니다.
• flexbox 및 CSS 그리드와 같은 CSS 레이아웃 기능을 활용하여 가능한 경우 미디어 쿼리 없이도 반응형 레이아웃을 자연스럽게 생성합니다.
• 뷰포트의 높이를 확인하는 수직 미디어 쿼리를 사용할 가능성을 무시하지 마십시오. 이렇게 하면 더 작은 장치에서 몇 가지 레이아웃 함정을 피하는 데 도움이 될 수 있습니다.
• 너비와 높이에만 집착하지 마십시오. 다양한 장치에서 레이아웃의 접근성 및 전반적인 UX에 도움이 될 수 있는 잘 지원되는 다른 미디어 기능을 사용하십시오.

2022년 이후 CSS 미디어 쿼리

지난 몇 년 동안 도입된 모든 새로운 미디어 기능은 CSS 미디어 쿼리 작성 가능성을 흥미롭고 강력하게 만들었습니다!

가장 잘 지원되는 미디어 기능을 확실히 활용해야 합니다. 또한 많은 새로운 미디어 기능 사용을 고려하고 언젠가는 미디어 유형이 과거의 일이 될 것이라고 기대할 수 있습니다.

2022년 CSS 미디어 쿼리를 사용하는 방법에 대해 궁금한 점이 있으면 아래 댓글 섹션에 알려주십시오.

레이아웃 및 프레젠테이션: Karol K.