오늘날 다양한 디바이스에서 웹 사이트를 최적화하려면 반응형 웹 디자인이 필수입니다. CSS 미디어 쿼리(Media Queries)는 화면 크기, 해상도, 방향 등을 기반으로 스타일을 조정할 수 있는 강력한 도구입니다. 이 글에서는 미디어 쿼리의 기본 개념부터 실전 활용법까지 자세히 설명합니다.
1. CSS 미디어 쿼리란?
CSS 미디어 쿼리는 특정 조건에 따라 스타일을 변경할 수 있는 규칙입니다. 주로 화면 크기와 디바이스 타입에 따라 레이아웃과 스타일을 조정하는 데 사용됩니다.
미디어 쿼리를 사용하면 다음이 가능합니다:
• 모바일, 태블릿, 데스크톱 등 디바이스별 맞춤 디자인
• 특정 화면 크기에서 레이아웃 변경
• 다양한 해상도에서 최적화된 사용자 경험 제공
2. CSS 미디어 쿼리 기본 문법
@media (조건) {
/* 스타일 규칙 */
}
예제: 화면 너비가 768px 이하일 때 스타일 적용
@media (max-width: 768px) {
body {
background-color: lightblue;
}
}
3. 미디어 쿼리의 주요 조건
3-1. max-width와 min-width
• max-width: 지정된 너비 이하에서 스타일 적용.
• min-width: 지정된 너비 이상에서 스타일 적용.
/* 768px 이하일 때 */
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
/* 1024px 이상일 때 */
@media (min-width: 1024px) {
body {
font-size: 18px;
}
}
3-2. 디바이스 방향 (orientation)
• portrait: 세로 방향.
• landscape: 가로 방향.
@media (orientation: landscape) {
body {
background-color: lightgreen;
}
}
3-3. 해상도 (resolution)
디바이스의 픽셀 밀도에 따라 스타일을 변경할 수 있습니다.
@media (min-resolution: 2dppx) {
img {
width: 50%;
}
}
4. 미디어 쿼리의 실전 활용
4-1. 반응형 레이아웃 구현
다양한 화면 크기에 대응하는 레이아웃을 설계할 때 유용합니다.
/* 기본 스타일 */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* 태블릿 화면 */
@media (max-width: 768px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}
/* 모바일 화면 */
@media (max-width: 480px) {
.container {
grid-template-columns: 1fr;
}
}
결과:
• 데스크톱: 3개의 열.
• 태블릿: 2개의 열.
• 모바일: 1개의 열.
4-2. 글꼴 크기 최적화
화면 크기에 따라 글꼴 크기를 조정합니다.
/* 데스크톱 */
body {
font-size: 18px;
}
/* 태블릿 */
@media (max-width: 768px) {
body {
font-size: 16px;
}
}
/* 모바일 */
@media (max-width: 480px) {
body {
font-size: 14px;
}
}
4-3. 반응형 네비게이션 바
화면 크기에 따라 네비게이션 메뉴를 변경합니다.
/* 데스크톱 스타일 */
.navbar {
display: flex;
justify-content: space-between;
padding: 20px;
}
.navbar ul {
display: flex;
gap: 15px;
}
/* 모바일 스타일 */
@media (max-width: 768px) {
.navbar ul {
display: none; /* 메뉴 숨김 */
}
.navbar .menu-icon {
display: block; /* 햄버거 메뉴 표시 */
}
}
5. 반응형 웹 디자인 예제
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>미디어 쿼리 예제</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="navbar">
<h1>My Website</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="menu-icon">☰</div>
</header>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
CSS
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.navbar {
background-color: #333;
color: white;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar ul {
display: flex;
gap: 20px;
list-style: none;
}
.navbar .menu-icon {
display: none;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 20px;
}
/* 태블릿 스타일 */
@media (max-width: 768px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
.navbar ul {
display: none; /* 메뉴 숨김 */
}
.menu-icon {
display: block; /* 햄버거 메뉴 표시 */
}
}
/* 모바일 스타일 */
@media (max-width: 480px) {
.container {
grid-template-columns: 1fr;
}
}
6. 미디어 쿼리 활용 팁
1. 모바일 우선 접근: 작은 화면을 먼저 설계한 뒤, 화면이 커질수록 스타일을 추가하세요.
body {
font-size: 14px;
}
@media (min-width: 768px) {
body {
font-size: 16px;
}
}
2. 디자인 일관성 유지: 모든 화면 크기에서 동일한 사용자 경험을 제공하세요.
3. 브라우저 호환성 테스트: 다양한 브라우저와 디바이스에서 미디어 쿼리의 동작을 확인하세요.
CSS 미디어 쿼리는 다양한 화면 크기와 디바이스에서 웹 페이지를 최적화하는 핵심 도구입니다. 이 글의 내용을 바탕으로 반응형 웹 디자인을 실습하며 자신만의 프로젝트에 적용해 보세요.
다음 글에서는 CSS로 애니메이션과 트랜지션 구현하기를 다룰 예정입니다.
