CSS의 다양한 미디어 유형

<시간/>

CSS 미디어 유형은 문서가 렌더링되는 장치 유형이며 모든 미디어 유형에 대해 특정 스타일을 정의할 수 있습니다.

다음은 CSS3의 미디어 유형 및 미디어 쿼리 4 −

Sr.No	가치 및 설명
1	모두 스타일시트는 모든 미디어 유형 장치에 적용됩니다.
2	인쇄 스타일시트는 프린터에 적용됩니다.
3	화면 스타일시트는 컴퓨터 화면, 태블릿, 스마트폰 등에 적용됩니다.
4	말하기 스타일시트는 페이지를 소리내어 "읽는" 스크린 리더에 적용됩니다.

참고 −여러 미디어 유형(예:청각, 점자, 양각, 핸드헬드, 영사, ttv 및 tv)은 Media Queries 4에서 더 이상 사용되지 않으며 사용해서는 안 됩니다. 청각 유형이 음성 미디어 유형으로 대체되었습니다.

화면 및 인쇄 매체 유형의 스타일 지정에 대한 예를 살펴보겠습니다. −

HTML 문서

예시

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="screen.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">
</head>
<body>
<div></div>
</body>
</html>

CSS 문서(screen.css)

div {
   height: 50px;
   width: 100px;
   border-radius: 20%;
   border: 2px solid blueviolet;
   box-shadow: 22px 12px 3px 3px lightblue;
   position: absolute;
   left: 30%;
   top: 20px;
}
CSS document (print.css):
div {
   height: 50px;
   width: 100px;
   border-radius: 20%;
   border: 2px solid #dc3545;
   box-shadow: 22px 12px 3px 3px #dc3545;
   position: absolute;
   left: 30%;
   top: 20px;
}

출력

문서가 화면 미디어 유형에 표시되는 경우 -

CSS의 다양한 미디어 유형

문서가 인쇄 매체 유형에서 보이는 경우 -

CSS의 다양한 미디어 유형

화면 및 인쇄 매체 유형의 스타일 지정에 대한 또 다른 예를 살펴보겠습니다. -

HTML 문서

예시

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import url(screen.css) screen;
@import url(print.css) print;
</style>
</head>
<body>
<p> Vivamus commodo, dolor eu porttitor sagittis, orci nisl consectetur ipsum, vel volutpat nibh lectus at erat. Cras scelerisque faucibus tellus aliquam commodo.Donec sem urna, facilisis at ipsum id, viverra sollicitudin est. Nam rhoncus sollicitudin lorem, a accumsan purus varius eget. </p>
<p class="two">In ultrices lectus nisi. Nulla varius ex ut tortor congue viverra. Sed sodales vehicula leo, vitae interdum elit vehicula nec. Donec turpis nunc, iaculis et nisi sit amet, feugiat lacinia metus. </p>
<p>Suspendisse eget ligula et risus lobortis ornare id at elit. Suspendisse potenti. Vivamus pellentesque eleifend pellentesque. Vestibulum neque ante, iaculis a sagittis et, fermentum at metus.</p>
</body>
</html>

CSS 문서(screen.css)

p { color: navy; font-style: italic; }
.two { color: #c303c3; font-size: 20px; }
body { background-color: honeydew;}
CSS document (print.css):
p { color: red; font-style: italic;}
.two { color: #989898; font-size: 40px; }

출력

문서가 화면 미디어 유형에 표시되는 경우 -

CSS의 다양한 미디어 유형

문서가 인쇄 매체 유형에서 보이는 경우 -

CSS의 다양한 미디어 유형