LINK 요소에서 media 속성이란?
HTML의 <link> 요소에 사용되는 media 속성은 외부 스타일시트가 적용될 대상 매체(target medium)를 지정하는 역할을 합니다. 즉, 컴퓨터 화면용인지, 인쇄물용인지, 휴대용 기기용인지 등 어떤 환경에서 해당 스타일시트를 사용할지 명확하게 구분해 줍니다.
만약 media 속성을 지정하지 않으면 기본값인 all로 처리되어, 모든 매체에 동일한 스타일시트가 적용됩니다.
사용 예제
아래 예제는 인쇄(print)와 휴대용 기기(handheld)를 대상으로 하는 외부 스타일시트를 연결하는 방법을 보여줍니다.
<!doctype html public "-//w3c//dtd html 4.0//en">
<html>
<head>
<title>대상 매체에 스타일시트 연결하기</title>
<link rel="stylesheet" type="text/css" media="print, handheld" href="foo.css">
</head>
<body>
<p>본문 내용...</p>
</body>
</html>위 코드에서 foo.css 파일은 문서가 인쇄되거나 휴대용 기기에서 열릴 때만 적용됩니다. 여러 매체를 쉼표(,)로 구분하여 나열하면 하나의 스타일시트가 복수의 매체에 동시에 적용되도록 설정할 수 있습니다.
주요 media 속성 값
- screen — 일반적인 컴퓨터 화면
- print — 인쇄물 및 인쇄 미리보기 화면
- handheld — 휴대폰, PDA 등 소형 휴대용 기기
- projection — 프로젝터나 발표용 화면
- tv — 텔레비전처럼 해상도가 낮고 색상 제한이 있는 기기
- braille — 점자 촉각 디스플레이 기기
- speech — 음성 합성(speech synthesizer) 기기
- all — 모든 매체 (기본값)
media 속성 활용 시 주의 사항
media 속성을 활용하면 같은 HTML 문서라도 상황에 따라 다른 디자인을 제공할 수 있습니다. 예를 들어 화면용 스타일에는 밝은 배경과 풍부한 그래픽을 사용하고, 인쇄용 스타일에는 잉크 소모를 줄이는 흑백 레이아웃을 적용하는 식입니다.
다만 최신 반응형 웹 개발에서는 handheld 같은 전통적인 매체 키워드 대신 CSS3의 미디어 쿼리(media query)를 함께 사용하는 것이 권장됩니다. 미디어 쿼리를 이용하면 화면 너비, 해상도, 방향 등 더 세밀한 조건으로 스타일을 제어할 수 있기 때문입니다.