CSS 미디어 유형(Media Types)은 문서가 렌더링되는 기기의 종류를 의미하며, 각 미디어 유형별로 서로 다른 스타일을 지정할 수 있습니다. 예를 들어 같은 웹 페이지라도 컴퓨터 화면에서 볼 때와 프린터로 출력할 때 각각 최적화된 디자인을 적용할 수 있습니다.
CSS3 및 Media Queries 4에서 지원하는 미디어 유형
| 번호 | 값 및 설명 |
|---|---|
| 1 | all 모든 미디어 유형 기기에 스타일시트를 적용합니다. |
| 2 | print 프린터 출력 시 스타일시트를 적용합니다. |
| 3 | screen 컴퓨터 화면, 태블릿, 스마트폰 등 화면 기기에 스타일시트를 적용합니다. |
| 4 | speech 페이지를 소리 내어 읽어주는 스크린 리더에 스타일시트를 적용합니다. |
참고: aural(음성), braille(점자), embossed(점자 인쇄), handheld(휴대용), projection(프로젝션), tty, tv 등 여러 미디어 유형은 Media Queries 4에서 더 이상 사용되지 않도록(deprecated) 지정되었으므로 사용하지 않는 것이 좋습니다. 특히 기존의 aural 유형은 speech 미디어 유형으로 대체되었습니다.
예제 1: link 태그로 화면과 인쇄 스타일 분리하기
HTML 문서에서 <link> 태그의 media 속성을 활용하면 화면(screen)과 인쇄(print)에 서로 다른 CSS 파일을 적용할 수 있습니다.
HTML 문서
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" media="screen" href="screen.css"> <link rel="stylesheet" type="text/css" media="print" href="print.css"> </head> <body> <div></div> </body> </html>
CSS 문서 (screen.css)
div {
height: 50px;
width: 100px;
border-radius: 20%;
border: 2px solid blueviolet;
box-shadow: 22px 12px 3px 3px lightblue;
position: absolute;
left: 30%;
top: 20px;
}CSS 문서 (print.css)
div {
height: 50px;
width: 100px;
border-radius: 20%;
border: 2px solid #dc3545;
box-shadow: 22px 12px 3px 3px #dc3545;
position: absolute;
left: 30%;
top: 20px;
}실행 결과
화면(screen) 미디어 유형으로 문서를 볼 경우 −
인쇄(print) 미디어 유형으로 문서를 볼 경우 −
예제 2: @import 규칙으로 미디어 유형 지정하기
@import 규칙 뒤에 미디어 유형을 붙이면, 하나의 스타일 블록 안에서 조건부로 외부 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) 미디어 유형으로 문서를 볼 경우 −
인쇄(print) 미디어 유형으로 문서를 볼 경우 −
정리
CSS 미디어 유형을 활용하면 하나의 HTML 문서로 화면용, 인쇄용, 음성 출력용 등 다양한 환경에 맞춘 스타일을 제공할 수 있습니다. <link> 태그의 media 속성이나 @import 규칙을 적절히 사용하면 유지보수가 쉬운 반응형·인쇄 친화적인 웹 페이지를 만들 수 있습니다.