CSS3 미디어 쿼리

CSS3 미디어 쿼리

 

미디어 쿼리는 단말기의 종류에 따라 각각 다른 시트를 적용하게 함으로써 미디어 타입을 개선합니다.

미디어 쿼리 적용 방법

① link 요소를 사용하여 CSS 파일을 로드하는 방법
② style 요소에 media를 선언하는 방법
③ CSS내에 @media를 사용하는 방법

 

@media 방법

기본적으로 미디어 타입을 지정하며 and 연산자를 사용하여 조건을 추가합니다.

여러 개의 미디어 타입을 지정하기 위해서는 쉼표를 사용합니다.

형식

@media  미디어 타입 [and 조건] ..., 미디어 타입 [and 조건]  {스타일 지정}

예제

@media screen and (device-width: 500px), print and (resolution: 150dpi)  {div {width: 300px; height: 200px}}

 

미디어 타입의 종류

미디어 타입	설명
all	모든 미디어 타입
aural	음성 장치
braille	점자 장치
handheld	작은 휴대용 장치
print	인쇄
projection	프로젝터
screen	컴퓨터 화면
tty	텔렉스, 터미널 등과 같이 폭이 일정한 문자 간격을 가지는 기기를 말함
tv	텔레비젼
embossed	페이지에 인쇄된 점자 장치

 

미디어 타입에 추가할 수 있는 조건의 종류

미디어 기능	설명
width	화면의 가로 너비를 의미합니다.
min-width
max-width
height	화면의 세로 너비를 의미합니다.
min-height
max-height
device-width	단말기에서 제공하는 기본적인 가로 너비를 의미합니다.
min-device-width
max-device-width
device-height	단말기에서 제공하는 기본적인 세로 너비를 의미합니다.
min-device-height
max-device-height
orientation	화면 회전 width가 height보다 길면 landscape 값 지정 height가 width보다 길면 portrait 값 지정
aspect-ratio	화면 비율 width를 height로 나눈 값을 의미함
min-aspect-ratio
max-aspect-ratio
device-aspect-ratio	단말기의 물리적인 화면 비율을 의미함
min-device-aspect-ratio
max-device-aspect-ratio
color	단말기에서 사용하는 최대 색상 비트 수를 의미함
min-color
max-color
color-index	단말기에서 사용하는 최대 색상 수를 의미함
min-color-index
max-color-index
monochrome	흑백만을 사용하는 단말기에서의 픽셀당 비트 수를 의미함
min-monochrome
max-monochrome
resolution	단말기에서 지원하는 해상도를 의미함
min-resolution
max-resolution
scan	스캔방식 프로그레시브 방식은 progresive 값을 지정함 인터페이스 방식은 interface 값을 지정함
grid	화면의 최소 단위를 의미함

 

미디어 쿼리 실습 프로그램

미디어 쿼리를 사용하여 브라우저의 가로 폭이 좁아져도 내용이 아래로 모두 보이도록 반응형 웹페이지 제작이 완료됨을 확인할 수 있습니다.