CSS 스타일 시트에서 미디어 종속성을 지정하는 두 가지 방법

CSS에서는 출력 매체(화면, 인쇄 등)에 따라 서로 다른 스타일을 적용할 수 있습니다. 이를 미디어 종속성(Media Dependency)이라고 하며, 스타일 시트에 미디어 종속성을 지정하는 방법은 크게 두 가지가 있습니다.

미디어 종속성을 지정하는 두 가지 방법

• @media 또는 @import 규칙 사용: 스타일 시트 내부에서 @media 또는 @import at-rule을 활용해 대상 매체를 직접 지정합니다.
• 문서 언어 내에서 지정: HTML 문서 자체에서 link 태그의 media 속성 등을 통해 대상 매체를 지정합니다.

@media 규칙 예제

다음은 @media 규칙을 사용하여 매체별로 다른 스타일을 적용하는 예제입니다.

<style>
<!--
   /* 인쇄 매체에 적용 */
   @media print {
      body { font-size: 10pt }
   }

   /* 화면(모니터) 매체에 적용 */
   @media screen {
      body { font-size: 12pt }
   }

   /* 화면과 인쇄 모두에 적용 */
   @media screen, print {
      body { line-height: 1.2 }
   }
-->
</style>

코드 설명

• @media print: 문서를 인쇄할 때 본문 글꼴 크기를 10pt로 지정합니다.
• @media screen: 화면으로 볼 때는 가독성을 위해 12pt로 지정합니다.
• @media screen, print: 쉼표로 여러 매체를 나열하면 해당 매체 전부에 스타일이 적용됩니다. 위 예제에서는 화면과 인쇄 모두에 줄 간격 1.2를 적용합니다.

이처럼 @media 규칙을 활용하면 하나의 스타일 시트 안에서 매체별 스타일을 효율적으로 관리할 수 있으며, 반응형 웹 디자인의 기반이 되는 핵심 개념입니다.