HTML <link media> 속성은 자산(일반적으로 CSS 파일)이 최적화되어야 하는 장치 유형을 지정하는 데 사용됩니다. 이렇게 하면 다양한 목적을 위해 다양한 CSS 스타일시트를 사용할 수 있습니다.
media 속성은 여러 값을 취하며 가장 일반적인 값은 다음과 같습니다.
all:모든 미디어 유형 장치에 적용되는 기본값입니다.screen:컴퓨터 화면, 태블릿, 스마트폰 등 모든 화면에서 사용할 수 있습니다.print:인쇄 미리보기 모드 및 인쇄된 페이지용입니다.
따라서 실제로는 screen에 최적화된 다양한 CSS 스타일시트를 가질 수 있습니다. 및 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"를 사용합니다. 속성, 즉 이 스타일시트가 인쇄/미리보기에 최적화되어 있음을 의미합니다.