미디어 쿼리란 무엇인가?
미디어 쿼리(Media Query)는 CSS3에서 도입된 강력한 기능으로, 접속하는 장치의 화면 크기나 해상도에 따라 서로 다른 스타일 규칙을 적용할 수 있게 해줍니다. 스마트폰, 태블릿, 데스크톱 등 다양한 기기에서 최적화된 화면을 제공하는 반응형 웹 디자인의 핵심 요소입니다.
미디어 쿼리 설정 방법
다양한 CSS 스타일 규칙에 미디어 쿼리를 적용하려면 아래 예제 코드를 참고하여 직접 실행해 보세요.
예제 코드
<html>
<head>
<style>
body {
background-color: lightpink;
}
@media screen and (max-width: 420px) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p>화면 크기가 420px보다 작으면 연한 파란색(lightblue)이 표시되고, 그렇지 않으면 연한 분홍색(lightpink)이 표시됩니다.</p>
</body>
</html>
코드 동작 방식
위 코드는 다음과 같은 원리로 작동합니다.
- 기본적으로 페이지의 배경색은 연한 분홍색(lightpink)으로 지정됩니다.
@media screen and (max-width: 420px)조건문은 화면 너비가 420px 이하일 때 내부의 스타일 규칙을 적용합니다.- 따라서 모바일처럼 좁은 화면에서는 배경색이 연한 파란색(lightblue)으로 자동 전환됩니다.
- 화면 너비가 420px를 초과하면 조건이 충족되지 않아 기본 배경색인 연한 분홍색이 그대로 유지됩니다.
마무리
이처럼 미디어 쿼리를 활용하면 하나의 HTML 문서만으로도 장치 크기에 맞춰 유연하게 대응하는 반응형 웹페이지를 만들 수 있습니다. 실제 프로젝트에서는 여러 개의 중단점(breakpoint)을 설정하여 태블릿, 노트북, 대형 모니터 등 다양한 환경에 최적화된 레이아웃을 구현할 수 있습니다.