HTML의 <link> 태그에서 사용하는 media 속성은 특정 리소스(주로 CSS 파일)가 어떤 미디어 유형에 최적화되어야 하는지 지정하는 역할을 합니다. 이 속성을 활용하면 용도에 따라 서로 다른 스타일시트를 적용할 수 있습니다.
media 속성의 주요 값
media 속성은 여러 가지 값을 가질 수 있으며, 그중 가장 많이 사용되는 값은 다음과 같습니다.
all: 기본값으로, 모든 미디어 유형 기기에 적용됩니다.screen: 컴퓨터 화면, 태블릿, 스마트폰 등 화면이 있는 모든 기기에 적용됩니다.print: 인쇄 미리보기 화면과 실제 인쇄된 페이지에 적용됩니다.
따라서 실무에서는 화면 출력용(screen)과 인쇄용(print)으로 각각 최적화된 별도의 스타일시트를 준비해 두었다가, 상황에 맞게 자동으로 불러오도록 구성할 수 있습니다.
사용 예시
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="screen.css" media="screen">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>위 예제의 동작 방식을 하나씩 살펴보겠습니다.
- 첫 번째
<link>요소는 미디어 유형을 따로 지정하지 않았습니다. 이 경우 기본값인media="all"이 자동으로 적용되어 모든 미디어 유형에 해당 스타일이 반영됩니다. 코드에 명시되어 있지 않을 뿐, 실제로는 항상 설정되어 있는 것입니다. - 두 번째
<link>요소는media="screen"을 사용하므로, 이 스타일시트는 화면 표시에 최적화되어 브라우저에서만 적용됩니다. - 세 번째
<link>요소는media="print"를 사용하므로, 이 스타일시트는 인쇄 및 인쇄 미리보기 시에만 적용됩니다.
추가로 알아두면 좋은 점
media 속성은 단순한 키워드뿐 아니라 CSS 미디어 쿼리 문법도 그대로 사용할 수 있습니다. 예를 들어 media="(max-width: 768px)"처럼 작성하면 화면 너비가 768px 이하일 때만 해당 스타일시트를 불러오도록 설정할 수 있어, 반응형 웹 디자인을 구현할 때도 매우 유용합니다.