CSS 미디어 쿼리
CSS2 도입 미디어 유형
CSS2에 도입 된 @media규칙을 통해 다양한 미디어 유형에 대해 서로 다른 스타일 규칙을 정의할 수 있습니다.
예: 컴퓨터 화면에 대한 스타일 규칙 세트, 프린터에 대한 규칙, 휴대용 장치에 대한 규칙, 텔레비전 유형 장치 등에 대한 스타일 규칙 세트가 있을 수 있습니다.
불행히도 이러한 미디어 유형은 인쇄 미디어 유형 이외의 장치에서 많은 지원을 받지 못했습니다.
CSS3 도입된 미디어 쿼리
CSS3의 미디어 쿼리는 CSS2 미디어 유형 아이디어를 확장했습니다. 장치 유형을 찾는 대신 장치의 기능을 봅니다.
미디어 쿼리는 다음과 같은 많은 것을 확인하는 데 사용할 수 있습니다.
- 뷰포트의 너비와 높이
- 장치의 너비와 높이
- 방향(태블릿/휴대전화가 가로 또는 세로 모드에 있습니까?)
- 해결
미디어 쿼리를 사용하는 것은 데스크톱, 랩톱, 태블릿 및 휴대폰(예: iPhone 및 Android 휴대폰)에 맞춤형 스타일 시트를 제공하는 데 널리 사용되는 기술입니다.
브라우저 지원
표의 숫자는 @media규칙을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Property | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
미디어 쿼리 구문
미디어 쿼리는 미디어 유형으로 구성되며 true 또는 false로 해석되는 하나 이상의 표현식을 포함할 수 있습니다.
@media not|only mediatype and (expressions) {
CSS-Code;
}
지정된 미디어 유형이 문서가 표시되는 장치의 유형과 일치하고 미디어 쿼리의 모든 표현식이 true인 경우 쿼리 결과는 true입니다. 미디어 쿼리가 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 |
| 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;}
}
더 많은 미디어 쿼리 예
미디어 쿼리에 대한 더 많은 예제를 보려면 다음 페이지로 이동하십시오. CSS MQ 예제 .
CSS @미디어 참조
모든 미디어 유형 및 기능/표현에 대한 전체 개요는 CSS 참조에서 @media 규칙을 확인하세요 .