Resize the browser window to see the effect!
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.
@media not|only mediatype and (expression) {
CSS-Code;
}
\\
지정된 미디어 유형이 문서가 표시되는 장치 유형과 일치하고, 미디어 쿼리의 모든 표현식이 참이면 쿼리 결과는 참입니다.\\
미디어 쿼리가 참이면, 일반적인 계단식 규칙에 따라 해당 스타일 시트 또는 스타일 규칙이 적용됩니다.\\
\\
not 또는 only 연산자를 사용하지 않는 한, 미디어 유형을 선택할 수 있고 ''all'' 유형이 수반됩니다.\\
\\
미디어마다 다른 스타일 시트를 사용할 수도 있습니다:\\
\\
\\
=====CSS3 Media Types=====
^ Value ^ Description ^
| all | 모든 media 유형의 기기에 사용됩니다. |
| print | 프린터에 사용됩니다. |
| 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====
Resize the browser window to see the effect!
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.
=====CSS @media Reference=====
모든 미디어 유형과 기능/표현에 대한 전체 개요는 [[https://www.w3schools.com/cssref/css3_pr_mediaquery.asp|CSS Media Rule]]를 참조하세요
{{tag>오션, CSS Media Queries}}