CSS3 미디어 쿼리

CSS2 도입 된 미디어 유형

@mediaCSS2에 소개 된 규칙은, 가능 다른 미디어 유형에 대해 서로 다른 스타일의 규칙을 정의했다.

예 : 컴퓨터 화면, 프린터 용, 핸드 헬드 장치 용, TV 유형 장치 용 등의 스타일 규칙 집합을 하나씩 가질 수 있습니다.

불행히도 이러한 미디어 유형은 인쇄 매체 유형 이외의 다른 장치로는 절대 지원을받지 못합니다.

CSS3, 미디어 쿼리 소개

CSS3의 미디어 쿼리는 CSS2 미디어 유형 아이디어를 확장합니다. 유형의 장치를 찾는 대신 장치의 기능을 살펴 봅니다.

미디어 쿼리를 사용하여 다음과 같은 여러 가지 사항을 확인할 수 있습니다.

뷰포트의 너비와 높이

장치의 너비와 높이

방향 (가로 또는 세로 모드의 태블릿 / 휴대 전화입니까?)

해결

미디어 쿼리를 사용하면 맞춤형 스타일 시트를 태블릿, iPhone 및 Android에 전달하는 데 널리 사용되는 기술입니다.

미디어 쿼리 구문

미디어 쿼리는 미디어 유형으로 구성되며 true 또는 false로 확인되는 하나 이상의 표현식을 포함 할 수 있습니다.

@media not|only mediatype and (expressions) {

    CSS-Code;

}

지정된 미디어 유형이 문서가 표시되는 장치 유형과 일치하고 미디어 쿼리의 모든 표현식이 참이면 쿼리의 결과는 true입니다. 미디어 쿼리가 참이면 정상적인 계단식 규칙에 따라 해당 스타일 시트 또는 스타일 규칙이 적용됩니다.

not 연산자 또는 only 연산자를 사용하지 않는 한 미디어 유형은 선택 사항이며 all형식이 암시됩니다.

다른 미디어에 대해 다른 스타일 시트를 사용할 수도 있습니다.

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

CSS3 미디어 유형

Value Description

all Used for all media type devices

print Used for printers

screen Used for computer screens, tablets, smart-phones etc.

speech Used for screenreaders that "reads" the page out loud

미디어 쿼리 간단한 예제

미디어 쿼리를 사용하는 한 가지 방법은 스타일 시트 안에 대체 CSS 섹션을 만드는 것입니다.

다음 예제는 뷰포트의 너비가 480 픽셀 이상인 경우 배경색을 밝은 녹색으로 변경합니다 (뷰포트가 480 픽셀보다 작 으면 배경색이 분홍색으로 표시됨).

예

@media screen and (min-width: 480px) {

    body {

        background-color: lightgreen;

    }

}

다음 예제는 뷰포트의 너비가 480 픽셀 이상인 경우 페이지의 왼쪽으로 떠오르는 메뉴를 보여줍니다 (뷰포트가 480 픽셀보다 작은 경우 메뉴가 내용 위에 표시됨).

예

@media screen and (min-width: 480px) {

    #leftsidebar {width: 200px; float: left;}

    #main {margin-left:216px;}

}