[프론트엔드][CSS] TIL Day-14.2 Media Queries 미디어 쿼리

미디어 쿼리(media queries)는 접속하는 장치 즉, 미디어에 따라 사이트의 형태가 바뀌도록
같은 스타일시트 내에서 서로 다른 미디어에 다른 스타일을 적용하도록 지정하게 하는 것을 가리킨다.

이를 위해 CSS2에서 도입된 미디어 타입을 이용하면 @media 규칙을 통해 다양한 미디어 유형에 맞춰 서로 다른 스타일을 지정할 수 있었다. CSS2의 미디어 타입을 확장한 CSS3의 미디어 쿼리는 단지 미디어 타입을 지정하는 것 뿐만 아니라 뷰포트의 크기(폭, 높이), 장치의 크기, 화면의 가로/세로 방향, 해상도 등 미디어 타입의 특성을 구분할 수 있는 다양한 기능을 이용할 수 있게 되었다.

그럼으로써, CSS3의 미디어 쿼리는 반응형 웹을 구현하는 중요한 기능으로 사용되게 되었다.

<mediaqueri.es에 소개된 미디어 쿼리를 사용한 예일 대학 사이트>

미디어 쿼리의 문법

미디어 쿼리를 사용하는 방법으로는 다음과 같은 세 가지가 있다.

link요소

<link rel="stylesheet" media="screen" href="example.css">

style 요소

<style media="screen"> 해당 미디어 타입에 맞는 스타일시트 </style>

@media 규칙

@media print { 해당 미디어 타입(print)에 적용할 스타일시트 }

미디어 쿼리는 하나의 미디어 타입과 해당 미디어의 특성을 나타내는 0개 이상의 표현식으로 구성된다.

<style> @media [not | only] 미디어 유형 [and 표현식(조건)] [and 표현식(조건)] { CSS 코드 } </style>

- 키워드 only는 기본값이므로 생략 가능하며, 표현식은 '미디어 특성: 값'의 쌍으로 이루어진다.
- 또한 콤마(,)를 사용하여 여러 미디어 쿼리를 결합해서 표현할 수 있으나, 이때 콤마는 논리적으로 OR('이거나 저거')의 역할을
하므로, 하나 이상의 미디어 쿼리가 참이면 콤마로 구분된 목록 전체가 참이 된다.
- 지정한 미디어 유형이 웹 문서를 출력할 장치와 동일하고 모든 표현식이 참이면 미디어 쿼리의 결과가 참이 되어, 해당 스타일시트가 적용된다.

ex) @media screen and (min-width: 768px) and (max-width: 1024px) { ... }
뷰포트 폭이 최소 768px~ 최대 1024px인 미디어 유형이 컴퓨터나 스마트폰 등의 장치에 대해 { ... }라는 CSS를 적용해라.

 

ex) @media all and (orientation: landscape) { ... }
가로 방향인 모든 미디어에 대해 { ... }의 CSS를 적용해라. ex) @media all and (color) { ... }
모든 컬러 장치에 대해 { ... }의 CSS를 적용해라.

ex) @media screen and (min-color-index: 256) { ... }
최소 256가지 이상의 색상을 표현할 수 있는 화면에 대해 { ... }의 CSS를 적용해라.

 

ex) @media print and (min-resolution: 360dpi) { ... }
해상도가 360dpi 이상인 모든 프린터에 대해 { ... }의 CSS를 적용해라.

ex) @media not screen and (color), print and (color) { ... }
스크린이면서 컬러인 것 말고, 인쇄 장치이면서 컬러인 것에 대해 { ... }의 CSS를 적용해라.

 

 

 

 

기본 미디어 유형	미디어 유형		설명
	all		모든 유형의 미디어 장치
	print		프린터
	screen		컴퓨터 스크린, 태블릿, 스마트폰 등
미디어 특성	특성	사용방식	설명
	width	(특성 : 숫자px)	출력 장치의 대상 표시 영역(뷰포트)의 너비 설정
	min-width		디바이스의 뷰포트의 최소 너비 설정
	max-width		화면(뷰포트)의 최대 너비 설정
	height	(특성 : 숫자px)	뷰포트의 높이 설정
	min-height		뷰포트의 최소 높이 설정
	max-height		뷰포트의 최대 높이 설정
	device-width	(특성 : 숫자px)	디바이스 디스플레이의 물리적인 화면 너비
	min-device-width		디바이스 디스플레이의 기본적인 최소 너비
	max-device-width		디바이스 디스플레이의 기본적인 최대 너비
	device-height	(특성 : 숫자px)	디바이스 디스플레이의 물리적인 화면 높이
	min-device-height		디바이스 디스플레이의 기본적인 최소 높이
	max-device-height		디바이스 디스플레이의 기본적인 최대 높이
	orientation	(특성 : landscape)	화면(뷰포트)의 가로 방향
		(특성 : portrait)	화면의 세로 방향
	aspect-ratio	(특성 : 정수/정수)	화면(뷰포트)의 너비와 높이의 비율(종횡비)
	min-aspect-ratio		화면의 너비와 높이의 최소 종횡비
	max-aspect-ratio		화면의 너비와 높이의 최대 종횡비
	device-aspect-ratio	(특성 : 정수/정수)	출력 장치 디스플레이의 물리적인 화면 비율
	min-device-aspect-ratio		디바이스 디스플레이의 물리적인 화면 최소 비율
	max-device-aspect-ratio		디바이스 디스플레이의 물리적인 화면 최대 비율
	color	(특성 : 정수)	디바이스의 색 성분에 할당되는 비트 수(흑백일 때 0)
	min-color		디바이스의 색상 채널별 최소 비트 수
	max-color		디바이스의 색상 채널별 최대 비트 수
	color-index	(특성)	디바이스가 색상 룩업 테이블을 사용(하면 {...} 실행)
		(특성 : 0)	디바이스가 색상 룩업 테이블을 사용하지 않으(면 {...} 실행)
	min-color-index	(특성 : 정수)	디바이스가 최소 (숫자)이상 색을 지원(하면 {...} 실행)
	max-color-index		디바이스가 최대 (숫자)이하 색을 지원(하면 {...} 실행)
	resolution	(특성 : 숫자dpi) /숫자dpcm	디바이스의 해상도(1인치당 화소 수)
	min-resolution		디바이스의 1인치당 최소 (숫자)이상의 화소를 제공
	max-resolution		디바이스의 1인치당 최대 (숫자)이하의 화소를 제공
	scan	(특성 : progressive)	TV 미디어의 화면 주사 방식이 순차주사 (초당 60회 수준의 고화질 스캔에 대응)
		(특성 : interlace)	TV 미디어의 화면 주사 방식이 비월주사 (초당 30회 수준의 일반 스캔
	grid	(특성)	디바이스가 그리드 방식
		(특성 : 1)
		(특성 : 0)	디바이스가 그리드 방식이 아니(면 {...} 실행)
	monochrome	(특성)	디바이스가 흑백
		(특성 : 0)	디바이스가 흑백이 아니(면 {...} 실행)
	min-monochrome	(특성 : 정수)	디바이스가 흑백이고 픽셀당 최소 (숫자)비트 이상이면 실행
	max-monochrome	(특성 : 정수)	디바이스가 흑백이고 픽셀당 최대 (숫자)비트 이하면 실행

- 실제 웹 문서 내용이 현재 화면에 나타나는 영역을 뷰포트라고 하는데, 웹 브라우저에서는 현채 창에서 문서를 볼 수 있는 전체 화면을 말한다. 뷰포트의 너비와 높이를 미디어 쿼리의 조건으로 사용할 수 있다.

 

 

 

 

디바이스별 정확한 스크린 사이즈를 알고 싶다면 이 사이트를 참조! → https://screensiz.es/

Screen Sizes | Viewport Sizes and Pixel Densities for Popular Devices