CSS에서 특정 출력 환경(인쇄물, 휴대용 기기 등)에 맞는 스타일시트를 적용하려면 media 속성을 사용해 대상 미디어를 지정할 수 있습니다. 이 속성은 <link> 태그나 <style> 태그에 추가하며, 쉼표로 구분해 여러 미디어 유형을 한 번에 지정하는 것도 가능합니다.
예를 들어, 인쇄(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>코드 설명
- media="print, handheld" : 이 스타일시트가 인쇄물과 휴대용 기기 화면에만 적용됨을 의미합니다.
- href="foo.css" : 적용할 외부 스타일시트 파일의 경로를 지정합니다.
- rel="stylesheet" : 연결된 문서가 스타일시트임을 나타냅니다.
이처럼 media 속성을 활용하면 하나의 HTML 문서에서도 화면(screen), 인쇄(print), 프로젝터 등 다양한 출력 환경에 최적화된 스타일을 각각 제공할 수 있습니다. 불필요한 장식 요소를 제거한 인쇄용 레이아웃이나 작은 화면에 맞춘 모바일 스타일을 별도로 관리할 때 특히 유용합니다.