미디어 쿼리란?
▶ 미디어 쿼리는 CSS3에 도입된 CSS 기법입니다.
▶ 특정 조건이 참인 경우에만 @media 규칙을 사용하여 CSS 속성 블록을 포함합니다.
1. 미디어 쿼리 문법 (Media Query Syntax)
미디어 쿼리는 미디어 유형으로 구성되며 참 또는 거짓으로 확인되는 식을 하나 이상 포함할 수 있습니다.
@media not|only mediatype and (expressions) {
CSS-Code;
}
지정된 미디어 유형이 문서가 표시되는 장치 유형과 일치하고 미디어 조회의 모든 식이 참이면 조회 결과가 참입니다.
미디어 조회가 참이면 해당 스타일시트 또는 스타일 규칙이 일반 계단식 규칙에 따라 적용됩니다.
연산자를 사용하지 않는 한 미디어 유형은 선택 사항이며 모든 유형이 암시됩니다.
또한 미디어마다 다른 스타일시트를 가질 수 있습니다.
2. CSS3 미디어 타입 (Media Types)
| 값 (Value) | 설명 |
| all | 모든 미디어 유형 장치에 사용합니다. |
| 프린터에 사용됩니다. | |
| screen | 컴퓨터 화면, 태블릿, 스마트폰 등에 사용됩니다. |
| speech | 페이지를 큰 소리로 "읽는" 화면 판독기에 사용됩니다. |
3. 미디어 쿼리 예시들
미디어 쿼리를 사용하는 한 가지 방법은 스타일시트 바로 안쪽에 대체 CSS 섹션을 두는 것입니다.
다음 예제에서는 뷰포트의 너비가 480픽셀 이상인 경우,
배경색을 연한 녹색으로 변경합니다. (뷰포트가 480픽셀 미만인 경우 배경색은 분홍색).
<style>
body {
background-color: pink;
}
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
다음 예제는 뷰포트의 너비가 480픽셀 이상인 경우,
(뷰포트가 480픽셀 미만인 경우, 메뉴는 내용 맨 위에 있음)
페이지 왼쪽에 표시되는 메뉴를 보여줍니다.
<!DOCTYPE html>
<html>
<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 {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 viewport is 480 pixels wide or wider. If the viewport is less than 480 pixels, the menu will be on top of the content.</p>
</div>
</div>
</body>
</html>
'HTML & CSS > CSS' 카테고리의 다른 글
| [CSS] 화면 가득 높이 설정 방법 (0) | 2021.08.26 |
|---|---|
| [CSS] 스크롤 스냅 (Scroll Snap) (0) | 2021.08.07 |
| [CSS] 리셋: reset.css (0) | 2021.08.06 |
| [CSS] 반응형 Navbar 제작 (w/o 부트스트랩) (0) | 2021.08.06 |
| [CSS] Flexbox 완벽정리 (0) | 2021.08.05 |