CSS에서 미디어 쿼리(@media)를 활용하면 화면 크기에 따라 서로 다른 스타일을 적용할 수 있습니다. 모바일, 태블릿, 노트북, 데스크톱처럼 일반적으로 사용되는 기기 중단점을 기준으로 반응형 웹을 구현하는 방법을 예제와 함께 살펴보겠습니다.
예제 코드
아래 예제는 뷰포트 너비에 따라 페이지 배경색이 달라지도록 여러 개의 미디어 쿼리를 설정한 코드입니다.
<!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>Typical Breakpoints Example</h1>
<h2>
Resize the screen to see background color change on different breakpoints
</h2>
</body>
</html>
출력 결과
위 코드를 실행하면 화면 크기가 1200px보다 클 때 다음과 같이 초록색 배경이 표시됩니다.
반면 화면 너비가 0px부터 600px 사이, 즉 모바일 환경에서는 다음과 같이 분홍색 배경으로 변경됩니다.
중단점별 스타일 정리
각 미디어 쿼리가 적용되는 구간과 배경색을 정리하면 다음과 같습니다.
- max-width: 600px — 모바일 (분홍색)
- min-width: 600px — 태블릿 세로 방향 (녹색)
- min-width: 768px — 태블릿 가로 방향 (주황색)
- min-width: 992px — 노트북 (보라색)
- min-width: 1200px — 데스크톱 대형 화면 (초록색)
브라우저 창 크기를 조절해 보면 중단점을 지날 때마다 배경색이 즉시 바뀌는 것을 확인할 수 있습니다. 이처럼 미디어 쿼리를 활용하면 별도의 JavaScript 없이 순수 CSS만으로 다양한 기기에 최적화된 반응형 웹 페이지를 손쉽게 만들 수 있습니다.