미디어 쿼리
1. 미디어 쿼리
- 웹 페이지가 표시되는 장치에 반응하도록 하여 반응형 웹을 구현할 수 있는데, 이때 사용하는 것이 미디어 쿼리임
- 미디어 쿼리는 두 가지 방법으로 사용 가능
- @media 규칙
- media 속성
2. @media 규칙을 이용해 미디어 쿼리 사용하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="./test.css">
<script src="test.js"></script>
<style>
@media screen and (max-width: 800px) {
body {background-color: lightblue;}
}
@media screen and (min-width: 800px) {
body {background-color: lightgreen;}
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit...........
</p>
</body>
</html>- max-width: 800px는 화면 너비가 800이 되기 전까지의 설정 (최대 너비)
- min-width: 800px는 화면 너비가 800이 될 때부터의 설정 (최소 너비)
3. media 속성을 사용한 미디어 쿼리 사용하기
- 파일을 별도로 구성하여 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="test.css" media="screen">
</head>
<body>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit...........
</p>
</body>
</html>
@media screen and (max-width: 800px) {
body {background-color: lightblue;}
}
@media screen and (min-width: 800px) {
body {background-color: lightgreen;}
}- 결과는 전과 동일
4. 지원하는 미디어 타입
| 미디어 타입 | 설명 |
| all | 모든 장치 |
| aural | 음성 장치 |
| braille | 표시 전용 점자 장치 |
| handheld | 휴대용 장치 |
| 프린터 | |
| projection | 프로젝터 |
| screen | 화면 |
| tty | 터미널 등 그림을 띄울 수 없는 장치 |
| tv | 텔레비전 |
| embossed | 인쇄 전용 점자 장치 |
※ 미디어 타입 연산자
- only : 해장 장치에서만 나타냄
- not : 해당 장치를 제외한 것에서만 나타냄
5. 미디어 특징
| 미디어 특징 | 설명 |
| width | 화면 너비 |
| height | 화면 높이 |
| device-width | 장치 너비 |
| device-height | 장치 높이 |
| orientation | 장치 방향 |
| device-aspect-ratio | 화면 비율 |
| color | 장치 색상 비트 |
| color-index | 장치에서 표현 가능한 최대 색상 개수 |
| monochrome | 흑백 장치의 픽셀당 비트 개수 |
| resolution | 장치 해상도 |
※ orientation을 제외한 모든 속성에 min와 max 접두사를 붙일 수 있으며, and 연산자를 사용해 조건을 합칠 수 있음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="test.css" media="screen">
</head>
<body>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit...........
</p>
</body>
</html>@media screen and (orientation: portrait) { /* portrait : 화면이 세로 방향일 때 */
body {background-color: lightblue;}
}
@media screen and (orientation: landscape) { /* landscape : 화면이 가로 방향일 때 */
body {background-color: lightgreen;}
}- 화면이 세로 방향일 때
- 화면이 가로 방향일 때
'Front-End Study > HTML+CSS' 카테고리의 다른 글
| input 태그 (0) | 2022.12.28 |
|---|---|
| 폼(form) 관련 태그 (0) | 2022.12.12 |
| flex 관련 속성 정리 3 (0) | 2022.11.02 |
| flex 관련 속성 정리 2 (0) | 2022.10.30 |
| flex 관련 속성 정리 1 (0) | 2022.10.27 |