미디어 종속 스타일시트는 기본 스타일시트일 뿐이지만 미디어 유형이 문서가 표시되는 장치 유형과 일치하는 경우에만 html 문서에 적용됩니다.
다음과 같은 방법으로 미디어 종속 스타일시트를 만들 수 있습니다. -
- @media At-rules 사용
- @import At-rules 사용
- 미디어 속성이 있는 HTML 요소 사용
예시
미디어 종속 스타일시트를 만드는 예를 살펴보겠습니다. −
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 문서(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;
} 출력
이것은 다음과 같은 출력을 생성합니다 -
문서가 화면 미디어 유형에 표시되는 경우 -
문서가 인쇄 매체 유형에서 보이는 경우 -
예시
미디어 종속 스타일시트를 만드는 또 다른 예를 살펴보겠습니다. −
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
background-origin: content-box;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 0 0 3px black;
padding: 20px;
background-origin: border-box;
}
@media screen and (max-width: 900px) {
p{
background: url("https://www.tutorialspoint.com/android/images/android.jpg");
color: #c303c3;
}
}
@media screen and (max-width: 500px) {
p {
color: black;
background: url("https://www.tutorialspoint.com/react_native/images/react-native.jpg");
}
}
</style>
</head>
<body>
<p>This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text. </p>
</body>
</html> 출력
이것은 다음과 같은 출력을 생성합니다 -
화면 크기가 500px 이상인 경우 -
화면 크기가 500px 미만인 경우 -
