CSS @media 규칙 – 미디어 타입별 스타일 적용 방법

CSS의 @media 규칙은 특정 미디어 타입(화면, 인쇄 등)에 따라 서로 다른 스타일을 적용할 수 있게 해주는 기능입니다. 여러 미디어 타입을 쉼표(,)로 구분하여 동시에 지정할 수도 있습니다.

@media 규칙이란?

@media 규칙은 스타일 시트 안에서 대상 미디어 타입을 지정하고, 해당 미디어 환경에서만 적용될 CSS 규칙 집합을 정의합니다. 예를 들어, 화면에 표시할 때와 문서를 인쇄할 때 각각 다른 글꼴 크기나 줄 간격을 설정할 수 있어 하나의 HTML 문서로 다양한 출력 환경에 대응할 수 있습니다.

주요 미디어 타입

• screen – 컴퓨터 모니터, 스마트폰, 태블릿 등 화면 출력 장치
• print – 인쇄물 및 브라우저의 인쇄 미리보기
• all – 모든 미디어 장치(기본값)

예제

다음은 @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 – 화면과 인쇄 두 환경 모두에서 줄 간격(line-height)을 1.2로 지정합니다. 이처럼 쉼표로 구분하면 여러 미디어 타입에 동일한 스타일을 한 번에 적용할 수 있습니다.

이처럼 @media 규칙을 활용하면 출력 환경에 맞춰 최적화된 스타일을 손쉽게 구성할 수 있으며, 반응형 웹 디자인의 기반이 되는 미디어 쿼리(Media Query)의 핵심 개념이기도 합니다.