[CSS] @media query

[CSS] @media query

미디어 쿼리, @media query 이해하기

• 미디어 쿼리는 단말기 유형(출력물 vs 화면)과, 어떤 특성이나 수치(화면 해상도, *뷰포트 너비 등)에 따라 웹사이트나 앱의 스타일을 수정할 때 유용하다.

  *뷰포트(viewport) :: 현재 화면에 보여지고 있는 다각형(보통 직사각형)의 영역. 웹브라우저에서는 현재 창에서 문서를 볼 수 있는 부분(전체화면이라면 화면전체)을 말한다. 뷰포트 중에서도 지금 볼 수 있는 부분을 시각적뷰포트(visual viewport)라고 부른다. 스마트폰에서 사용자가 화면을 확대했을 때와 같은 특정 상황에서 레이아웃 뷰포트의 크기는 변하지 않지만 시각적 뷰포트는 더 작아진다.

 

1. 미디어쿼리 사용법

1-1) CSS 코드 내부에서 분기하는 방법.

@media only all and (조건문) { 실행문 }

 

1-2) CSS 코드 외부에서 분기하는 방법.

• 조건문에 따라 별도의 외부 CSS 파일을 참조하여 분기하는 방법이다. 이 방식은 성능 최적화 측면에서 권장하지 않는다.

  데스크탑 브라우저 사용자가 언제든 조건을 변경(예를 들면 창크기를 조절해서 해상도를 바꿈)할 수 있기 때문에 웹 브라우저는 조건에 관계없이 A.css 파일과 B.css 파일을 항상 요청한다. HTTP 요청을 불필요하게 두 번 발생시켜 이 페이지를 처음 로딩하는 사용자에게는 성능 저하의 원인이 된다. CSSs파일은 하나로 병합하고, CSS 코드 내부에서 조건 분기하는 방식을 권장한다.

<link rel="stylesheet" media="all and (조건A)" href="A.css" />
<link rel="stylesheet" media="all and (조건B)" href="B.css" />

 

2. 미디어쿼리 살펴보기.

• @media :: 미디어 쿼리가 시작됨을 선언.

2-1) 연산자 타입

and | not | only | ,

• and :: 여러 미디어 특징들을 하나로 결합.
• not :: 전체 미디어 쿼리를 부정하기 위해 사용.
• only :: 미디어쿼리를 인식하지 못하는 브라우저(정확히 legacy user agents)에서 미디어 쿼리를 숨기기 위해 사용.
• , (or) :: 여러 미디어 특징들을 하나로 결합.

 

not이나 only를 사용하려면 미디어 타입을 규정해야 한다.

미디어 쿼리는 대소문자를 구별하지 않는다.

 

[예제]

1. 가장 단순한 형태의 미디어쿼리

@media (min-width: 700px) {}

위 구문에서 미디어 타입이 생략되었지만, 미디어 타입의 기본값은 all이다.

아래의 예시와 같은 명령이다.

@media only and (min-width: 700px) {}
/* 모든 유형의 장치이며 최소너비 700px일 떄 스타일을 적용하겠다는 의미. */

 

2. and 사용.

   새로운 미디어 특징들을 추가할 때마다 and연산자를 사용한다.

@media (min-width: 700px) and (orientation: portrait) {}
/* 모든 유형의 장치이며 최소 너비 700px이상이며, 방향이 세로모드일 때만 적용. */

@media print and (min-width: 700px) and (orientation: landscape) {}
/* 프린트 장치이며 최소너비가 700px이상이며, 방향이 가로일 때 젹용. */

 

3. , 쉼표 사용. , 쉼표는 각각 개별 미디어 쿼리로 인식한다.

@media (min-width: 700px), print and (orientation: landscape) {}
/* 모든 장치에서 최소너비 700px이상일 때 적용하거나, 프린트 장치에서는 가로방향일 때만 적용. */

 

4. not 사용. not은 전체 미디어쿼리를 수식한다. 즉, not은 all and (color)를 포함하여 부정함.

@media not all (color) {}
/* === @media not (all and (color)){} 와 같은 의미. */
/* 모든 색상 장치에서 이 스타일을 적용하지 않겠다. */

쉼표로 분리하여 사용할 때, 미디어 구문은 개별 미디어 쿼리로 인식하므로 not은 쉼표 이후에 영향을 미치지 않는다.

@media not screen and (color), print and (color) {}
/* 모든 스크린 색상 장치에서 적용하지 않거나, 프린트 색상장치에서 적용. */

 

5. only 사용.

   미디어 쿼리 지원하는 사용자 에이전트만 미디어 쿼리 구문을 해석하라는 명령. 생략가능하다.

    

2-2) media type(미디어종류).

all | print | speech | screen

• all :: 기본값. 모든 미디어 장치에 사용.
• print :: 프린터에 사용.
• screen :: 컴퓨터 스크린, 테블릿, 스마티폰 등.
• speech :: 페이지를 읽어주는 화면 낭독기.
• 미디어 종류 중 퇴화된 것 :: aural , baille, embossed, handheld, projection, tty, tv

 

 

2-3) media feature(미디어 특징).

width | height | min-width | min-height | max-width | max-height | device-width | device-height | min-device-width | min-device-height | max-device-width | max-device-height | aspect-ratio(min- / max- 접두어 사용가능) | divice-aspect-ratio (min- / max- 접두어 사용가능) | color(min- / max- 접두어 사용가능) | color-index (min- / max- 접두어 사용가능) | monochrome (min- / max- 접두어 사용가능) | resoluction (min- / max- 접두어 사용가능) | scan | grid

 

• width :: 화면 영역 너비(브라우저 창 같은)

@media screen and (min-width: 500px) and (max-width: 800px) {}
/* 스크린 장치 최소 화면이 500px보다 크고 800px보다 작을 때 스타일 적용. */

• height :: 화면 영역 높이
• device-width :: 출력 장치의 너비. ( 컴퓨터 스크린 같은)

@media screen and (max-device-width: 450px) {}
/* 장치 너비가 450px보다 작을 때 스타일 적용. */

• device-height :: 출력 장치의 높이
• aspect-ratio :: 화면 영역의 가로 세로 비 기호 /를 사용하여, 앞에는 수평 픽셀비율, 뒤에는 수직 픽셀비율 (양수이며 정수).

@media screen and (min-aspect-ratio: 1/1) {}
/* 
 * 가로 화면 비가 1:1 이상일 때 적용. 
	 즉, 화면이 직사각이나 세로일 때만 적용.
*/

• device-aspect-ratio :: 출력 장치의 가로세로 비.(수평픽셀 비 / 수직픽셀 비)

@media screen and (device-aspect-ratio: 16/9) {}
/*
 * 장치 가로 세로비가 16:9일 때 적용.
*/

• color :: 출력 장ㅇ치의 색상 구성요소 당 비트 수 (장치가 생깔 장치가 아니면 값은 0)`

@media all and (color) {}
/* 모든 색상 장치에 적용. */

@media all and (min-color:4) {}
/* 색상 구성요소당 최소 4비트를 지닌 장치에 적용. */ 

• color-index :: 장치가 표시할 수 있는 색상 수.

@media all and (min-color-index: 256) {}
/* 최소 256 색상을 지닌 모든 장치에 적용. */

• grid :: 출력 장치가 그리드 장치 또는 비트뱁 장치냐에 따라 결정.

  장치가 그리드 기반이면 값은 1, 그렇지 않으면 0

• monochrome :: 흑백(회색톤)장치에 색상 당 비트 수. 장치가 흑백이 아니면 값은 0

@media all and (monochrome) {}
/* 모든 흑백장치에 적용. */

• orientation :: 화면이 가로모드 인지, 세로모드 인지 지정.

@media all and (orientation: portrait) {}
/* 오직 세로 방향에서만 적용. */

• resolution :: 출력 장치의 해상도 해상도는 dpi(dots per inch)나, dpcm(dots per cintimeter)로 지정.

@media screen and (min-resolution: 300dpi) {}
/* 최소 300dpi이상 해상도를 지닌 장치에 적용. */