미디어 쿼리(Media Query)

미디어 쿼리(Media Query)란?

접속하는 디바이스나 뷰포트에 따라 특정 CSS 스타일을 사용하는 방법
중단점(breakpoint)에서 어떤 CSS를 적용할 것인지 지정
문법은 아래와 같음
- @media 미디어 유형 and [조건]
  - 미디어 유형(생략가능)
    - screen : 주로 화면이 대상
    - all : 모든 장치에 적합
    - print : 인쇄 결과물 및 출력 미리보기 화면에 표시 중인 문서
  - 조건
    - 미디어 쿼리가 동작하는 조건으로 뷰포트의 최소 최대 너비를 기준으로 함 (min-width, max-width)

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=3.0">
	<title>Document</title>
	<style>
		div {
			width: 300px;
			height: 300px;
		}
		@media (max-width: 500px) {
			div {
				background-color: blue;
			}
		}
		@media (min-width: 501px) and (max-width: 1000px) {
			div {
				background-color: red;
			}
		}
		@media (min-width: 1001px) {
			div {
				background-color: black;
			}
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

뷰포트가 1001px 이상일 경우

Untitled

뷰포트가 501~1000px일 경우

Untitled

뷰포트가 500px 이하일 경우

Untitled