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

 

 

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

 

오늘은 반응형 웹에서 자주 사용하는 미디어 쿼리 문법을 배워 보겠습니다.

 

미디어 쿼리는 장치에 따라 각기 다른 레이아웃을 작성하거나,

 

다른 미디어 종류에 따라 다른 css 코드를 작성하는 등, 반응형 웹페이지를 작성할 때

 

유용한 구문입니다.

 

▶ @media 브라우저 지원

 

ie9+, chrome 21+, firefox 3.5+, safari 4.0+, opera 9+

 

 

▶ 미디어 쿼리 사용법

 

미디어 퀴어리 구문은 css에 내부에 삽입하는 방법과, 링크로 연결하는 방법이 있습니다.

 

css 내부에 삽입하기 

 

<style>
@media (max-width: 700px) {
  .container{
    margin:0px; padding: 0px;
  }
}
</style>

 

링크로 연결할 때

<link red="stylesheet" media="(max-width: 700px)" href="test.css" />

 

*test.css 파일 안에는 위 미디어쿼리 구문이 들어가야 합니다.

 

 

CSS란? (HTML과 CSS의 차이, CSS 작성법)

 

 

▶ 미디어 쿼리 문법

 

css에서

 

@media not|only media type and (media feature) {CSS-Code;}

 

 

링크로 연결할 때

 

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="test.css">

 

 

 

위 문법을 하나씩 살펴 볼게요.

 

우선 and나, not, only 등을 연산자라고 부르는데요.

연산자는 and, 쉼표, not, only가 있습니다.

 

 

▷ 연산자

 

and | not | only | ,

 

 

● and 연산자 : 여러 미디어 특징들을 하나로 결합함 .

 

● , (or)연산자: 쉼표로 분리된 각 목록은 각각 개별 미디어 쿼리임.

 

● not 연산자 : 전체 미디어 쿼리를 부정하기 위해 사용 함.

 

● only 연산자 : 미디어 쿼리를 지원하지 않는 브라우저가 주어진 스타일을 적용하는 것을 방지

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

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

 

사용 예.

 

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

 

@media (min-width: 700px) {background-color: yellow;}

 

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

 

따라서 다음 구문과 같은 말임

 

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

 

모든 유형의 장치이며 최소너비 700px 일 때 스타일을 적용하겠다는 의미

 

 

and 연산자의 사용

 

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

 

@media (min-width: 700px) and (orientation: portrait) { ... }

 

위 예는, 모든 유형의 장치이며 최소 너비 700px 이상이며, 방향이 세로 모드일 때만 적용한다는 뜻

 

 

@media print and (min-width: 700px) and (orientation: landscape) { ... }

 

프린트 장치이며, 최소 너비가 700px이상이며, 방향이 가로일 때 적용함.

 

 

 

쉼표 연산자의 사용

 

*쉼표는 각각 개별 미디어 쿼리로 인식합니다.

 

@media (min-width: 700px), print and (orientation: landscape) { ... }

 

모든 장치에서 최소너비 700px이상일 때 적용하거나, 프린트 장치에서는 가로 방향일 때만 적용하겠다는 뜻.

 

not 연산자의 사용

 

@media not all and (color) { ... }

 

not은 전체 미디어 쿼리를 수식합니다. 즉 not은 all and (color)를 포함하여 부정함.

 

 @media not (all and (color)) { ... } 와 같은 말

모든 색상 장치에서  이 스타일을 적용하지 않겠다는 뜻.

 

쉼표로 분리하여 사용할 때, 미디어 구문은 개별 미디어 쿼리로 인식하므로

 

not은 쉼표 이후에 영향을 미치지 않습니다.

 

@media not screen and (color), print and (color)는

 

따라서 위 예는, 모든 스크린 색상 장치에서 적용하지 않거나, 프린트 색상 장치에서 적용하겠다는 뜻

 

 

only 연산자 사용

 

<link rel="stylesheet" media="only screen and (color)" href="test.css" />

*제가 only 키워드를 잘못 이해한 면이 있어서 내용을 수정하였습니다*

미디어 쿼리를 인식하지 못하는 브라우저(정확히는  legacy user agents)에서 미디어 쿼리를 숨기기 위해 사용함

only 키워드는 미디어 쿼리 결과에 아무런 영향을 미치지 않습니다. 

오래된 브라우저는 screen and (color)를 'screen'으로 번역 하게되어 남아있는 쿼리를 무시하게 됩니다. 

그리하여 모든 스크린에 스타일을 적용하게 되는데, 알려지지 않은 미디어 타입 only를 지정함으로써 무시하게 됩니다. 

screen 타입에 맞다고 하더라도 말입니다. (https://www.w3.org/TR/mediaqueries-4/)

▷ media type(미디어 종류)

 

all | print | speech| screen 

 

● all 기본값. 모든 미디어 장치에 사용 됨
● print 프린터에 사용
● screen 컴퓨터 스크린, 테블릿, 스마트폰 등
● speech 페이지를 읽어주는 화면 낭독기

 

미디어 종류 중 퇴화된 것.

aural ,braille, embossed, handheld, projection , tty, tv 

 

 

▷ 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- 접두어 사용가능)
device-aspect-ratio (min- / max- 접두어 사용가능)
color (min- / max- 접두어 사용가능)
color-index (min- / max- 접두어 사용가능)
monochrome (min- / max- 접두어 사용가능)
resolution (min- / max- 접두어 사용가능)
scan | grid

 

 

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

예 1: @media (min-width: 20em) {...}

 

* 모든 장치에서 최소 너비 20em 이상이면 적용

 
예2 : <link rel="stylesheet" media="screen and  (min-width: 500px) and (max-width: 800px)
    href="test.css" />

* 스크린 장치 최소 화면이 500px보다 크고 800px보다 작을 때  스타일 적용
 

 

● height  화면 영역 높이

 

  

● device-width 출력 장치의 너비.(컴퓨터 스크린 같은)

 

예 : <link rel="stylesheet" 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)

예1 : @media all and (color) { ... }

 

* 모든 색상 장치에 적용.

 

예 2: @media all and (min-color: 4) { ... }

* 색상 구성요소당 최소 4비트를 지닌 장치에  적용

● color-index 장치가 표시할 수 있는 색상 수

 

예: <link rel="stylesheet" media="all and (min-color-index: 256)" href="test.css" />

 

* 최소 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 이상 해상도를 지닌 장치에 적용

 

● scan 텔레비전 출력 장치의 스캐닝 과정

값은  progressive | interlace

 

*tv값이 퇴화되었으므로 이 값도 사용하지 않을 것 같네요

 

[참조 사이트]

 

https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Media_queries

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

http://www.htmlgoodies.com/beyond/css/introduction-to-css-media-queries.html 

 

▶간단한 예제

 

처음에는 A 화면이었다가, 컴퓨터, 스마트폰 등에서 480px이하로 화면이 축소되면 B 화면처럼 바뀌는

 

소스를 작성해 보세요~ 정답은 다음 시간에

 

 

A 화면

 

B 화면

 

 

min-width 속성, min-height 속성 사용법

 

max-width 속성, max-height 속성 알아보기

 

외부 문서를 연결하는 link 태그 사용법

meta viewport (메타 뷰포트 태그) 사용법