CSS 미디어 유형(Media Types)과 미디어 쿼리(Media Queries)는 기기의 일반적인 유형(화면, 인쇄 등)이나 특성(해상도, 뷰포트 크기 등)에 따라 특정 스타일을 정의할 수 있게 해주는 강력한 기능입니다. 이를 활용하면 하나의 문서가 다양한 기기에서 최적화된 모습으로 표시되도록 만들 수 있습니다.
미디어 쿼리 문법
미디어 쿼리의 기본 문법은 다음과 같습니다.
@media not | only mediatype and (expressions) {
CSS-Code;
}여기서 미디어 쿼리는 다음 조건에서 적용됩니다.
- mediatype이 문서가 렌더링되는 기기 유형과 일치하는 경우
- not/only 연산자가 정의되지 않은 경우, 미디어 쿼리는 모든 미디어 유형에 적용됩니다.
- not/only 연산자가 지정된 경우, 미디어 쿼리는 각각 해당 미디어 유형에만 적용되거나(not) 제외됩니다(only).
사용자는 미디어별로 서로 다른 스타일시트를 가질 수 있습니다. 예를 들어, 인쇄용과 화면용으로 각각 별도의 스타일시트를 준비할 수 있습니다.
<link rel="stylesheet" media="print and|not|only (expressions)" href="print.css">
그리고,
<link rel="stylesheet" media="screen and|not|only (expressions)" href="screen.css">
CSS3 미디어 유형 종류
CSS3에서 지원하는 미디어 유형은 다음과 같습니다.
| 번호 | 값 및 설명 |
|---|---|
| 1 | all 모든 미디어 유형 기기에 스타일시트를 적용합니다. |
| 2 | print 프린터에 스타일시트를 적용합니다. |
| 3 | screen 컴퓨터 화면, 태블릿, 스마트폰 등에 스타일시트를 적용합니다. |
| 4 | speech 페이지를 소리 내어 읽어주는 스크린 리더에 스타일시트를 적용합니다. |
미디어 의존적 스타일시트 작성 방법
미디어에 따라 다르게 적용되는 스타일시트를 만드는 방법에는 세 가지가 있습니다.
- @media At-rule 사용하기
- @import At-rule 사용하기
- HTML <link> 요소의 media 속성 사용하기
예제 1: @media를 활용한 반응형 레이아웃
CSS 미디어 쿼리를 활용한 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.col {
float: left;
width: 20%;
padding: 40px;
}
body {
background-color: lemonchiffon;
margin: 20px;
}
@media screen and (max-width: 850px) {
.col {
width: 50%;
}
body {
background-color: mediumseagreen;
}
}
@media screen and (max-width: 550px) {
.col {
width: 100%;
}
body {
background-color: powderblue;
}
}
</style>
</head>
<body>
<div class="row">
<div class="col" style="background-color:#373;"> </div>
<div class="col" style="background-color:#363;"> </div>
<div class="col" style="background-color:#353;"> </div>
<div class="col" style="background-color:#343;"> </div>
<div class="col" style="background-color:#333;"> </div>
</div></body></html>출력 결과
위 코드는 화면 크기에 따라 다음과 같이 출력됩니다.
화면 크기가 850px보다 클 때: 다섯 개의 컬럼이 한 줄에 나란히 배치되고 배경색은 lemonchiffon으로 표시됩니다.
화면 크기가 550px~850px 사이일 때: 컬럼 너비가 50%로 변경되어 두 개씩 배치되고, 배경색은 mediumseagreen으로 바뀝니다.
화면 크기가 550px보다 작을 때: 컬럼 너비가 100%로 변경되어 세로로 쌓이고, 배경색은 powderblue로 바뀝니다.
예제 2: @import를 활용한 미디어별 스타일 분리
이번에는 @import At-rule을 사용하여 미디어 유형별로 다른 CSS 파일을 불러오는 예제입니다.
HTML 문서:
<!DOCTYPE html> <html> <head> <style type="text/css"> @import url(screen.css) screen; @import url(print.css) print; </style> </head> <body> <p> Vivamus commodo, dolor eu porttitor sagittis, orci nisl consectetur ipsum, vel volutpat nibh lectus at erat. Cras scelerisque faucibus tellus aliquam commodo.Donec sem urna, facilisis at ipsum id, viverra sollicitudin est. Nam rhoncus sollicitudin lorem, a accumsan purus varius eget. </p> <p class="two">In ultrices lectus nisi. Nulla varius ex ut tortor congue viverra. Sed sodales vehicula leo, vitae interdum elit vehicula nec. Donec turpis nunc, iaculis et nisi sit amet, feugiat lacinia metus. </p> <p>Suspendisse eget ligula et risus lobortis ornare id at elit. Suspendisse potenti. Vivamus pellentesque eleifend pellentesque. Vestibulum neque ante, iaculis a sagittis et, fermentum at metus.</p> </body> </html>
CSS 문서 (screen.css):
p { color: navy; font-style: italic; }
.two { color: #c303c3; font-size: 20px; }
body { background-color: honeydew;}CSS 문서 (print.css):
p { color: red; font-style: italic;}
.two { color: #989898; font-size: 40px; }출력 결과
위 코드는 미디어 유형에 따라 다음과 같이 출력됩니다.
screen 미디어 유형으로 문서를 볼 때: navy 색상의 이탤릭체 텍스트와 honeydew 배경색이 적용됩니다.
print 미디어 유형으로 문서를 볼 때: red 색상의 이탤릭체 텍스트와 더 큰 글자 크기가 적용됩니다.
정리
CSS 미디어 쿼리는 반응형 웹 디자인의 핵심 기술입니다. @media 규칙, @import 규칙, 그리고 HTML link 요소의 media 속성을 활용하면 화면 크기나 기기 유형에 따라 유연하게 스타일을 조정할 수 있으며, 이를 통해 데스크톱, 태블릿, 스마트폰 등 다양한 환경에서 최적의 사용자 경험을 제공할 수 있습니다.