목차
CSS Advanced - CSS Media Queries
- description : CSS Advanced - CSS Media Queries
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-05-04
Source of the article
CSS2 Introduced Media Types
CSS2에 도입된 @media 규칙을 통해 다양한 미디어 유형에 대해 다른 스타일 규칙을 정의할 수 있습니다.
예 : 컴퓨터 화면, 프린터, 핸드 헬드 장치, 텔레비전 유형 장치 등에 대한 스타일 규칙 집합이 있을 수 있습니다.
아쉽게도 이러한 미디어 유형은 인쇄 미디어 유형 이외의 장치에서 많은 지원을 받지 못했습니다.
CSS3 Introduced Media Queries
CSS3의 미디어 쿼리는 CSS2 미디어 유형 아이디어를 확장했습니다.
CSS3의 미디어 쿼리는 장치 유형을 찾는 대신 장치의 기능을 살펴봅니다.
미디어 쿼리는 다음과 같은 많은 사항을 확인하는 데 사용할 수 있습니다.
- 뷰포트의 너비와 높이
- 장치의 너비와 높이
- 방향 (태블릿/휴대폰이 가로 또는 세로 모드입니까?)
- resolution(해상도)
미디어 쿼리 사용은 데스크톱, 노트북, 태블릿 및 휴대폰(예:iPhone 및 Android 휴대폰)에 맞춤형 스타일 시트를 제공하는 데 널리 사용되는 기술입니다.
Media Query Syntax
미디어 쿼리는 미디어 유형으로 구성되며 true 또는 false로 되는 하나 이상의 표현식을 포함할 수 있습니다.
@media not|only mediatype and (expression) { CSS-Code; }
지정된 미디어 유형이 문서가 표시되는 장치 유형과 일치하고, 미디어 쿼리의 모든 표현식이 참이면 쿼리 결과는 참입니다.
미디어 쿼리가 참이면, 일반적인 계단식 규칙에 따라 해당 스타일 시트 또는 스타일 규칙이 적용됩니다.
not 또는 only 연산자를 사용하지 않는 한, 미디어 유형을 선택할 수 있고 all 유형이 수반됩니다.
미디어마다 다른 스타일 시트를 사용할 수도 있습니다:
<link rel="stylesheet" media="mediatype and|not|only (expression)" href="print.css">
CSS3 Media Types
| Value | Description |
|---|---|
| all | 모든 media 유형의 기기에 사용됩니다. |
| 프린터에 사용됩니다. | |
| screen | 컴퓨터 화면, 태블릿, 스마트 폰 등에 사용됩니다. |
| speech | 페이지를 읽어주는 스크린리더에 사용됩니다. |
Media Queries Simple Examples
미디어 쿼리를 사용하는 한 가지 방법은 스타일 시트 내부에 대체 CSS 섹션을 포함하는 것입니다.
다음 예제에서는 뷰포트의 너비가 480 픽셀 이상이면 배경색을 lightgreen으로로 변경합니다
(뷰포트가 480 픽셀 미만이면, 배경색은 pink가 됩니다).
Example
body { background-color: pink; } @media screen and (min-width: 480px) { body { /* 화면 너비가 480px일 때 lightgreen으로 변경됨 */ background-color: lightgreen; } }
다음 예제는 뷰포트의 너비가 480 픽셀 이상인 경우 페이지 왼쪽에 떠있는 메뉴를 보여줍니다
(뷰포트가 480 픽셀 미만인 경우 메뉴는 콘텐츠 위에 표시됨).
Example
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .wrapper { overflow: auto; } #main { margin-left: 4px; } #leftsidebar { float: none; width: auto; } #menulist { margin: 0; padding: 0; } .menuitem { background: #CDF0F6; border: 1px solid #d4d4d4; border-radius: 4px; list-style-type: none; margin: 4px; padding: 2px; } @media screen and (min-width: 480px) { #leftsidebar { /* 너비가 480px이 될 때 상단메뉴가 좌측 사이드 메뉴로 변경됨 */ width: 200px; float: left; } #main { margin-left: 216px; } } </style> </head> <body> <div class="wrapper"> <div id="leftsidebar"> <ul id="menulist"> <li class="menuitem">Menu-item 1</li> <li class="menuitem">Menu-item 2</li> <li class="menuitem">Menu-item 3</li> <li class="menuitem">Menu-item 4</li> <li class="menuitem">Menu-item 5</li> </ul> </div> <div id="main"> <h1>Resize the browser window to see the effect!</h1> <p> This example shows a menu that will float to the left of the page if the view port is 480 pixels wide or wider. If the viewport is less than 480 pixes, the menu will be on top of the content. </p> </div> </div> </body> </html>
CSS @media Reference
모든 미디어 유형과 기능/표현에 대한 전체 개요는 CSS Media Rule를 참조하세요
