CSS 미디어 속성이란?
HTML의 <link> 요소에 사용되는 media 속성은 외부 스타일 시트가 적용될 대상 미디어(장치)를 지정합니다. 이 속성을 활용하면 화면 출력용, 인쇄용 등 용도에 따라 서로 다른 스타일을 정의할 수 있어 하나의 문서를 다양한 환경에 최적화된 형태로 제공할 수 있습니다.
예제 코드
다음 예제는 외부 스타일 시트인 foo.css 파일이 프린터(print)와 휴대용 기기(handheld)에만 적용되도록 설정한 코드입니다.
<!doctype html public "-//w3c//dtd html 4.0//en">
<html>
<head>
<title>Link to a Target Medium</title>
<link rel="stylesheet" type="text/css" media="print, handheld" href="foo.css">
</head>
<body>
<p>본문 내용...</p>
</body>
</html>
위 코드처럼 media 속성 값에 여러 미디어 유형을 쉼표(,)로 구분하여 나열하면, 해당하는 모든 장치에 스타일 시트가 동시에 적용됩니다.
주요 미디어 유형
CSS에서 지정할 수 있는 대표적인 미디어 유형은 다음과 같습니다.
- all — 모든 장치 (기본값)
- screen — 컴퓨터 모니터, 스마트폰, 태블릿 등 화면 출력 장치
- print — 인쇄물 및 브라우저의 인쇄 미리보기
- handheld — 휴대용 기기
- speech — 스크린 리더 같은 음성 합성 장치
@media 규칙으로 내부에서 지정하기
외부 파일을 불러오는 것이 아니라 스타일 시트 내부에서 직접 미디어를 지정하고 싶다면 @media 규칙을 사용할 수 있습니다.
@media print {
body {
font-size: 12pt;
}
}이렇게 하면 문서가 인쇄될 때만 본문 글자 크기가 12pt로 조정됩니다. 미디어 속성과 @media 규칙을 적절히 조합하면 화면, 인쇄, 모바일 등 각 환경에 맞는 반응형 스타일링을 효율적으로 구현할 수 있습니다.