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+를 사용하여 이 페이지를 인쇄하면 "미디어 유형"이 표시됩니다. "는 다른 텍스트 글꼴 크기보다 작은 다른 글꼴을 사용하여 표시됩니다.

기타 미디어 유형

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

미디어 유형 ~

청각적 음성 및 오디오 합성기에 사용됩니다.

점자는 시각 장애인을 위한 점자 촉각 피드백 장치입니다.

페이지 매김을 위한 양각 점자 프린터입니다.

휴대용은 소형 휴대용 장치에 사용됩니다. ~ .

프로젝션은 슬라이드 등 프로젝트 프레젠테이션에 사용됩니다. > >

tty는 텔레타이프라이터 및 터미널과 같이 고정 밀도 문자 그리드를 사용하는 미디어에 사용됩니다.

tv > 텔레비전 유형 장치에 사용됩니다.

지속적인 학습

새로운 파일

<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>

제출하다 코드 재설정

자동운전