CSS 미디어쿼리-@mediaquery

미디어쿼리란?

• CSS3에 포함되어 있으며, 컨텐츠의 변경 없이 주로 화면의 크기에 따라 적절한 모양을 보여주는 것으로 반응형 웹에서 자주 사용함

*@media가 지원되는 브라우저

ie9+, chrome21+, firefox3.5+, safari4.0+, opera9+

 

미디어 쿼리 사용방법

1. CSS 내부에 삽입하기

@media(max-width: 768px){

body {

color: blue;

}

}

최대 넓이 768px 이하에서 아래 style을 적용함

 

2. 링크로 연결하기

<link rel="stylesheet" media="screen and (max-width: 768px)" href="example.css" />

미디어 타입이 스크린이고 최대 럽이가 768px 이하에서는 example.css를 적용함

 

미디어 타입(media type)

• all: 기본값, 모든 미디어 장치에 사용

• screen: 컴퓨터 스크린, 테블릿, 스마트폰 등

• speech: 페이지를 읽어주는 화면 낭독기

• print: 프린트에 사용

 

미디어 특징(media feature)

• width: 화면 영역 넓이

• height: 화면 높이

• device-height: 출력장치 높이

• aspect-ratio: 화면 영역의 가로 세로 비율

• color: 출력 장치의 색상 구성요소 당 비트 수

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

• grid: 출력 장치가 그리드 장치 또는 비트맵 장치냐를 결정

• monochrome: 흑백 장치에 색상 당 비트 수

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

• resolution: 출력 장치의 해상도