미디어 종속 스타일시트란 무엇인가?
미디어 종속 스타일시트(Media Dependent Stylesheet)는 기본적인 CSS 스타일시트와 동일하지만, 미디어 타입(media type)이 문서가 표시되는 기기의 유형과 일치할 때에만 HTML 문서에 적용되는 스타일시트입니다.
예를 들어 화면(screen)용 스타일과 인쇄(print)용 스타일을 각각 다르게 지정하면, 같은 HTML 문서라도 모니터에서 볼 때와 종이로 출력할 때 서로 다른 모습으로 렌더링됩니다.
미디어 종속 스타일시트를 만드는 3가지 방법
@mediaAt-Rule 사용하기@importAt-Rule 사용하기- HTML
<link>요소의media속성 사용하기
아래 예제들을 통해 각 방법을 자세히 살펴보겠습니다.
예제 1: <link> 요소의 media 속성 활용하기
HTML 문서에서 <link> 요소에 media 속성을 지정하면, 기기 유형에 따라 서로 다른 외부 CSS 파일을 불러올 수 있습니다.
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>
위 코드에서는 media="screen"으로 지정된 screen.css와 media="print"로 지정된 print.css 두 개의 스타일시트를 연결했습니다.
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;
}실행 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
화면(screen) 미디어 타입으로 문서를 볼 때 — 파란색 계열(blueviolet)의 테두리와 연한 파란 그림자가 적용됩니다.
인쇄(print) 미디어 타입으로 문서를 볼 때 — 붉은색(#dc3545) 테두리와 그림자가 적용됩니다.
예제 2: @media 규칙으로 반응형 스타일 만들기
@media 규칙을 사용하면 하나의 스타일시트 안에서 화면 크기 조건에 따라 다른 스타일을 지정할 수 있습니다. 이는 반응형 웹 디자인의 핵심 기법입니다.
<!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>코드 설명
- 기본 상태에서는 배경 이미지 없이 검은 그림자만 있는 단락이 표시됩니다.
- 화면 너비가 900px 이하가 되면 Android 관련 배경 이미지와 보라색(#c303c3) 글자색이 적용됩니다.
- 화면 너비가 500px 이하로 더 작아지면 React Native 배경 이미지와 검은색 글자가 적용됩니다.
실행 결과
화면 크기가 500px보다 클 때
화면 크기가 500px보다 작을 때
정리
미디어 종속 스타일시트를 활용하면 하나의 HTML 문서로도 화면, 인쇄, 모바일 등 다양한 환경에 최적화된 표현이 가능합니다. 특히 @media 쿼리는 반응형 웹 디자인에서 필수적인 기술이므로, max-width, min-width 등의 조건과 함께 익혀두면 실무에서 큰 도움이 됩니다.