@media

요약

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

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

구문

@media <media-query-list> {
  <group-rule-body>
}
where 
<media-query-list> = <media-query>#
where 
<media-query> = <media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?
where 
<media-condition> = <media-not> | <media-and> | <media-or> | <media-in-parens>
<media-type> = <ident>
<media-condition-without-or> = <media-not> | <media-and> | <media-in-parens>
where 
<media-not> = not <media-in-parens>
<media-and> = <media-in-parens> [ and <media-in-parens> ]+
<media-or> = <media-in-parens> [ or <media-in-parens> ]+
<media-in-parens> = ( <media-condition> ) | <media-feature> | <general-enclosed>
where 
<media-feature> = ( [ <mf-plain> | <mf-boolean> | <mf-range> ] )
<general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )
where 
<mf-plain> = <mf-name> : <mf-value>
<mf-boolean> = <mf-name>
<mf-range> = <mf-name> [ '<' | '>' ]? '='? <mf-value> | <mf-value> [ '<' | '>' ]? '='? <mf-name> | <mf-value> '<' '='? <mf-name> '<' '='? <mf-value> | <mf-value> '>' '='? <mf-name> '>' '='? <mf-value>
where 
<mf-name> = <ident>
<mf-value> = <number> | <dimension> | <ident> | <ratio>

<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 }
}

스펙

브라우저 호환성

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

참조

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