7 미디어 유형

7.1 미디어 유형 소개

스타일 시트의 가장 중요한 기능 중 하나는 문서를 화면, 종이, 음성 합성기, 점자 장치 등 다양한 미디어에서 어떻게 표시할지를 지정하는 것입니다.

특정 CSS 속성은 특정 미디어에만 설계되어 있습니다(예: 'page-break-before' 속성은 페이징 미디어에만 적용됩니다). 그러나 때로는 다른 미디어 유형의 스타일 시트가 속성을 공유하지만 해당 속성에 대해 다른 값을 필요로 할 수 있습니다. 예를 들어, 'font-size' 속성은 화면과 인쇄 미디어 모두에 유용합니다. 두 미디어 유형은 공통 속성에 대해 다른 값을 필요로 할 만큼 충분히 다릅니다. 문서는 일반적으로 컴퓨터 화면에서 종이보다 더 큰 글꼴이 필요합니다. 따라서 스타일 시트 또는 스타일 시트의 섹션이 특정 미디어 유형에 적용된다는 것을 표현하는 것이 필요합니다.

7.2 미디어 종속 스타일 시트 지정

현재 스타일 시트에 대해 미디어 종속성을 지정하는 두 가지 방법이 있습니다:

스타일 시트에서 @media 또는 @import 규칙을 사용하여 대상 미디어를 지정합니다.

@import url("fancyfonts.css") screen;
@media print {
  /* 인쇄용 스타일 시트는 여기에 작성됩니다 */
}

문서 언어 내에서 대상 미디어를 지정합니다. 예를 들어, HTML 4 ([HTML4])에서는 LINK 요소의 "media" 속성이 외부 스타일 시트의 대상 미디어를 지정합니다:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
   <HEAD>
      <TITLE>대상 미디어로 링크</TITLE>
      <LINK REL="stylesheet" TYPE="text/css" 
	 MEDIA="print, handheld" HREF="foo.css">
   </HEAD>
   <BODY>
      <P>본문...
   </BODY>
</HTML>

@import 규칙은 계단식 처리 장에서 정의됩니다.

7.2.1 @media 규칙

@media 규칙은 중괄호로 구분된 문 세트의 대상 미디어 유형(쉼표로 구분)을 지정합니다. 유효하지 않은 문은 4.1.7 "규칙 집합, 선언 블록 및 선택자"와 4.2 "구문 분석 오류 처리 규칙"에 따라 무시되어야 합니다. @media 구조는 동일한 스타일 시트에서 다양한 미디어에 대한 스타일 시트 규칙을 허용합니다:

  @media print {
    body { font-size: 10pt }
  }
  @media screen {
    body { font-size: 13px }
  }
  @media screen, print {
    body { line-height: 1.2 }
  }

@media 규칙 외부의 스타일 규칙은 스타일 시트가 적용되는 모든 미디어 유형에 적용됩니다. @media 내부의 규칙은 현행 표준 CSS 2.2에서는 유효하지 않습니다.

7.3 인식된 미디어 유형

CSS 미디어 유형의 이름은 관련 속성이 의미를 가지는 대상 장치를 반영합니다. 아래 CSS 미디어 유형 목록에서 미디어 유형의 이름은 규범적이지만, 설명은 정보 제공용입니다. 마찬가지로, 각 속성 설명의 "Media" 필드는 정보 제공용입니다.

all: 모든 장치에 적합합니다.
braille: 점자 촉각 피드백 장치를 대상으로 합니다.
embossed: 페이지 점자 프린터를 대상으로 합니다.
handheld: 휴대용 장치(일반적으로 작은 화면, 제한된 대역폭)를 대상으로 합니다.
print: 페이지 자료 및 인쇄 미리보기 모드에서 화면에 표시되는 문서를 대상으로 합니다. 페이지 미디어에 특정한 서식 문제에 대한 정보는 페이지 미디어 섹션을 참조하세요.
projection: 프로젝터와 같은 투사 프레젠테이션을 대상으로 합니다. 페이지 미디어에 특정한 서식 문제에 대한 정보는 페이지 미디어 섹션을 참조하세요.
screen: 주로 컬러 컴퓨터 화면을 대상으로 합니다.
speech: 음성 합성기를 대상으로 합니다. 참고: CSS2에는 이 목적을 위해 'aural'이라는 유사한 미디어 유형이 있었습니다. 자세한 내용은 음성 스타일 시트 부록을 참조하세요.
tty: 고정 폭 문자 그리드를 사용하는 미디어(예: 전신기, 터미널, 제한된 디스플레이 기능을 가진 휴대용 장치)를 대상으로 합니다. 작성자는 "tty" 미디어 유형과 함께 픽셀 단위를 사용하지 않아야 합니다.
tv: 텔레비전 유형 장치(저해상도, 색상, 제한된 스크롤 가능 화면, 사운드 사용 가능)를 대상으로 합니다.

미디어 유형 이름은 대소문자를 구분하지 않습니다.

미디어 유형은 상호 배타적이므로 사용자 에이전트는 문서를 렌더링할 때 하나의 미디어 유형만 지원할 수 있습니다. 그러나 사용자 에이전트는 서로 다른 캔버스에서 서로 다른 미디어 유형을 사용할 수 있습니다. 예를 들어, 문서는 하나의 캔버스에서는 'screen' 모드로, 다른 캔버스에서는 'print' 모드로 동시에 표시될 수 있습니다.

멀티모달 미디어 유형도 여전히 하나의 미디어 유형에 불과합니다. 예를 들어, 'tv' 미디어 유형은 하나의 캔버스에서 시각적으로나 청각적으로 렌더링되는 멀티모달 미디어 유형입니다.

알 수 없는 미디어 유형(그러나 여전히 유효한 식별자인 경우)이 포함된 @media 및 @import 규칙은 알 수 없는 미디어 유형이 없는 것처럼 처리됩니다. @media/@import 규칙에 잘못된 형식의 미디어 유형(식별자가 아닌)이 포함된 경우 해당 문은 유효하지 않습니다.

참고: 미디어 쿼리는 이 오류 처리를 대체합니다.

예를 들어, 다음 코드 조각에서 P 요소에 대한 규칙은 'screen' 모드에서 적용됩니다('3D' 미디어 유형은 알 수 없어도).

@media screen, 3D {
  P { color: green; }
}

참고: CSS의 향후 업데이트는 미디어 유형 목록을 확장할 수 있습니다. 작성자는 아직 CSS 사양에 정의되지 않은 미디어 유형 이름에 의존하지 않아야 합니다.

7.3.1 미디어 그룹

이 섹션은 정보 제공용이며, 규범적이지 않습니다.

각 CSS 속성 정의는 속성이 적용되는 미디어 유형을 지정합니다. 속성은 일반적으로 여러 미디어 유형에 적용되므로, 각 속성 정의의 "Applies to media" 섹션은 개별 미디어 유형이 아니라 미디어 그룹을 나열합니다. 각 속성은 정의에 나열된 미디어 그룹의 모든 미디어 유형에 적용됩니다.

현행 표준 CSS 2.2는 다음 미디어 그룹을 정의합니다:

continuous 또는 paged.
visual, audio, speech, 또는 tactile.
grid (문자 그리드 장치용), 또는 bitmap.
interactive (사용자 상호작용을 허용하는 장치용), 또는 static (허용하지 않는 장치용).
all (모든 미디어 유형 포함)

다음 표는 미디어 그룹과 미디어 유형 간의 관계를 보여줍니다:

미디어 그룹과 미디어 유형 간의 관계
미디어 유형	미디어 그룹
	continuous/paged	visual/audio/speech/tactile	grid/bitmap	interactive/static
braille	continuous	tactile	grid	both
embossed	paged	tactile	grid	static
handheld	both	visual, audio, speech	both	both
print	paged	visual	bitmap	static
projection	paged	visual	bitmap	interactive
screen	continuous	visual, audio	bitmap	both
speech	continuous	speech	N/A	both
tty	continuous	visual	grid	both
tv	both	visual, audio	bitmap	both