미디어 쿼리(Media Queries)는 모바일, 데스크톱 등 기기의 화면 크기에 따라 서로 다른 스타일 규칙을 적용할 수 있게 해주는 CSS 핵심 기술입니다. 이를 활용하면 하나의 웹 페이지가 다양한 디바이스에서 최적화된 화면으로 자연스럽게 표시되는 반응형 웹 디자인(Responsive Web Design)을 구현할 수 있습니다.
미디어 쿼리의 동작 원리
미디어 쿼리는 @media 규칙을 사용하여 특정 조건(예: 화면 너비)이 충족될 때만 CSS 스타일을 적용합니다. 예를 들어, 화면 너비가 600px 이하일 때와 1200px 이상일 때 각각 다른 배경색이나 레이아웃을 지정할 수 있습니다. 이러한 전환 지점을 브레이크포인트(breakpoint)라고 부릅니다.
또한 반응형 디자인을 위해서는 HTML <head> 영역에 뷰포트(viewport) 메타 태그를 반드시 추가해야 합니다. 아래 코드에서 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 부분이 바로 그 역할을 하며, 페이지가 기기의 실제 화면 너비에 맞춰 렌더링되도록 설정합니다.
CSS 미디어 쿼리 예제 코드
다음은 화면 크기별로 배경색이 달라지는 반응형 웹 페이지의 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
color: white;
}
@media only screen and (max-width: 600px) {
body {
background: rgb(207, 60, 151);
}
}
@media only screen and (min-width: 600px) {
body {
background: rgb(0, 128, 107);
}
}
@media only screen and (min-width: 768px) {
body {
background: rgb(226, 136, 18);
}
}
@media only screen and (min-width: 992px) {
body {
background: rgb(108, 25, 185);
}
}
@media only screen and (min-width: 1200px) {
body {
background: rgb(13, 124, 63);
}
}
</style>
</head>
<body>
<h1>미디어 쿼리 예제</h1>
<h2>화면 크기를 조절하면 브레이크포인트마다 배경색이 변경됩니다</h2>
</body>
</html>
코드 설명 및 브레이크포인트 정리
위 코드에서 사용된 각 미디어 쿼리 조건은 다음과 같습니다.
- max-width: 600px — 스마트폰처럼 화면 너비가 600px 이하일 경우 분홍색 계열(rgb(207, 60, 151)) 배경 적용
- min-width: 600px — 600px 이상일 경우 초록색 계열(rgb(0, 128, 107)) 배경 적용
- min-width: 768px — 태블릿 크기인 768px 이상일 경우 주황색 계열(rgb(226, 136, 18)) 배경 적용
- min-width: 992px — 노트북 크기인 992px 이상일 경우 보라색 계열(rgb(108, 25, 185)) 배경 적용
- min-width: 1200px — 대형 데스크톱 화면인 1200px 이상일 경우 녹색 계열(rgb(13, 124, 63)) 배경 적용
조건이 여러 개 겹칠 경우에는 나중에 선언된 규칙이 우선 적용됩니다. 따라서 화면이 커질수록 더 아래에 있는 미디어 쿼리의 배경색이 화면에 표시됩니다.
실행 결과
위 코드를 실행하고 브라우저 창의 크기를 조절해 보면, 브레이크포인트를 넘을 때마다 페이지의 배경색이 즉시 변경되는 것을 확인할 수 있습니다. 이처럼 미디어 쿼리를 활용하면 별도의 JavaScript 없이 순수 CSS만으로 기기별 맞춤 화면을 손쉽게 구현할 수 있습니다.