데모보기
http://relation.co.kr/images_board/board_system_publishing/82/test/test.html


미디어 쿼리는 브라우져 사이즈에 따라 레이아웃을 작성하거나, 다른 미디어 종류에 따라 따른 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" />


오직 스크린에 색상 장치일 때만 이 스타일을 적용하겠다는 뜻.





▷ 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


출처: http://dol2156.tistory.com/146 [적게 작성하고, 보다 많이 한다.]