미디어 쿼리(Media Queries)란?
미디어 쿼리는 태블릿, 모바일, 데스크톱 등 서로 다른 기기나 화면 크기에 맞춰 개별적인 스타일을 적용해야 할 때 사용하는 CSS 기능입니다. 화면 너비 조건에 따라 레이아웃이 자동으로 변경되도록 설정할 수 있어, 하나의 웹 페이지를 다양한 디바이스에서 최적화된 형태로 보여주는 반응형 웹(Responsive Web) 구현의 핵심 요소입니다.
미디어 쿼리로 반응형 탐색 메뉴 구현하기
아래 예제 코드를 실행하면 미디어 쿼리를 활용한 반응형 탐색 메뉴를 직접 확인할 수 있습니다. 화면 너비가 600px 이하로 줄어들면 가로로 배치되던 메뉴 항목들이 세로 방향으로 전환되며 각 항목이 전체 너비를 차지하게 됩니다.
예제
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<style>
.demo {
overflow: hidden;
background-color: blue;
}
.demo a {
float: left;
display: block;
color: white;
text-align: center;
padding: 10px;
text-decoration: none;
}
@media screen and (max-width: 600px) {
.demo a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<p>Navigation Menu:</p>
<div class = "demo">
<a href = "#">Home</a>
<a href = "#">About</a>
<a href = "#">Tutorials</a>
<a href = "#">QA</a>
<a href = "#">Videos</a>
<a href = "#">Contact</a>
</div>
</body>
</html>코드 주요 포인트
1. 기본 메뉴 스타일
.demo 클래스에는 파란색 배경과 overflow: hidden 속성을 적용해 float된 요소가 컨테이너 밖으로 벗어나지 않도록 처리했습니다. 메뉴 링크(.demo a)에는 float: left와 display: block을 지정해 항목들이 가로 방향으로 나란히 배치됩니다.
2. 뷰포트 메타 태그
<meta name="viewport"> 태그는 모바일 기기에서 실제 화면 너비에 맞게 페이지가 렌더링되도록 하는 필수 설정입니다. 이 태그가 없으면 미디어 쿼리가 의도대로 동작하지 않을 수 있습니다.
3. 미디어 쿼리 조건
@media screen and (max-width: 600px)는 화면 너비가 600px 이하일 때 내부 스타일을 적용합니다. 이 조건에서 float: none으로 변경해 가로 배치를 해제하고, width: 100%를 지정해 각 메뉴 항목이 한 줄을 모두 차지하도록 하여 모바일 환경에 적합한 세로형 메뉴로 전환됩니다.