@media

요약

@media CSS at-규칙은 중괄호로 구분된 CSS 블록 내 중첩문 집합을 미디어 질의에 정의된 조건과 연결합니다. @media at-규칙은 최상단 레벨 CSS뿐만 아니라, 어떤 CSS 조건부 그룹 at-규칙 내에서도 사용될 수 있습니다.

@media at-규칙 CSS 객체 모델 인터페이스 CSSMediaRule을 통해 액세스 될 수 있습니다.

구문

@media <media-query-list> {
  <group-rule-body>
}

<media-query>는 미디어 유형 및/또는 다수의 미디어 기능으로 구성되어 있습니다.

미디어 유형

all

모든 장치에 적합.

print

인쇄물(paged material) 및 인쇄 미리보기 모드에서 화면 상에 보이는 문서를 위해 계획됨. 인쇄 미디어에 특정한 형식 문제에 관한 정보는 paged media 절 및 시작하기 tutorial의 미디어 절을 참고해 주세요.

screen

주로 컬러 컴퓨터 화면을 위해 계획됨.

speech

음성 합성기(speech synthesizer)를 위해 계획됨. 주의: CSS2는 이를 위해 'aural'이라는 비슷한 미디어 유형이 있었습니다. 자세한 내용은 aural 스타일 시트의 부록을 참조하세요.

미디어 특성

각 미디어 특성은 브라우저 또는 장치의 특정 특성 하나를 테스트합니다.

예

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

스펙

브라우저 호환성

참조

• 미디어 질의
• 이 at-규칙과 관련된 CSSOM CSSMediaRule.