CSS 미디어 유형

미디어 유형을 사용하면 파일이 다양한 미디어에서 렌더링되는 방식을 지정할 수 있습니다. 파일은 화면, 종이, 청각 브라우저 등에서 다양한 방식으로 표시될 수 있습니다.

미디어 유형

일부 CSS 속성은 특정 미디어용으로만 설계되었습니다. 예를 들어, "voice-family" 속성은 청각 사용자 에이전트를 위해 설계되었습니다. 다양한 미디어 유형에 대해 여러 다른 속성을 사용할 수 있습니다. 예를 들어, "font-size" 속성은 화면 및 인쇄 매체에 사용될 수 있지만 값은 다릅니다. 화면 문서와 종이 문서는 다르며 일반적으로 더 큰 글꼴이 필요합니다. Sans-serif 글꼴은 화면에서 읽기에 더 좋고, serif 글꼴은 종이에서 읽기에 더 쉽습니다.

@media 규칙

@media 규칙을 사용하면 동일한 스타일 시트에서 다양한 미디어에 대해 다양한 스타일을 설정할 수 있습니다.

아래 예에서는 브라우저 화면에 14픽셀 Verdana 글꼴 스타일을 표시하도록 지시합니다. 그러나 페이지가 인쇄되면 10픽셀의 Times 글꼴로 표시됩니다. 화면과 종이에서는 글꼴 두께가 굵게 설정되어 있습니다.

<html>
<head>
<style>
@media screen
{
	p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
	p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
	p.test {font-weight:bold;}
}
</style>
</head>

<body>
....
</body>
</html>

직접 시도해 볼 수 있습니다. Mozilla/Firefox 또는 IE5+를 사용하여 이 페이지를 인쇄하는 경우 "미디어"가 표시됩니다. Type'은 다른 텍스트 글꼴 크기보다 작은 다른 글꼴을 사용하여 표시됩니다.

기타 미디어 유형

참고: 미디어 유형 이름은 대소문자를 구분하지 않습니다.

媒体类型	描述
all	用于所有的媒体设备。
aural	用于语音和音频合成器。
braille	用于盲人用点字法触觉回馈设备。
embossed	用于分页的盲人用点字法打印机。
handheld	用于小的手持的设备。
print	用于打印机。
projection	用于方案展示，比如幻灯片。
screen	用于电脑显示器。
tty	用于使用固定密度字母栅格的媒体，比如电传打字机和终端。
tv	用于电视机类型的设备。

CSS 미디어 유형