MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

@media

요약

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

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

구문

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

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

미디어 유형

주의: Firefox는 현재 printscreen 미디어 유형만 구현합니다. FullerScreen 확장 기능(extension)은 projection 미디어 유형에 대한 지원을 가능하게 합니다.
all
모든 장치에 적합.
print
인쇄물(paged material) 및 인쇄 미리보기 모드에서 화면 상에 보이는 문서를 위해 계획됨. 인쇄 미디어에 특정한 형식 문제에 관한 정보는 paged media 절 및 시작하기 tutorial의 미디어 절을 참고해 주세요.
screen
주로 컬러 컴퓨터 화면을 위해 계획됨.
speech
음성 합성기(speech synthesizer)를 위해 계획됨. 주의: CSS2는 이를 위해 'aural'이라는 비슷한 미디어 유형이 있었습니다. 자세한 내용은 aural 스타일 시트의 부록을 참조하세요.
주의: CSS2.1 및 Media Queries 3에서 여러 부가 미디어 유형(tty, tv, projection, handheld, braille, embossed, aural)이 정의됐으나 Media Queries 4에서 사라져 사용되어서는 안됩니다.

미디어 특성

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

이름 요약 참고
width 뷰포트 너비  
height 뷰포트 높이  
aspect-ratio 뷰포트 가로세로(종횡)비  
orientation 뷰포트의 방향  
resolution 출력 장치의 픽셀 밀도  
scan 출력 장치의 주사(scanning) 방법  
grid 장치가 격자(grid) 또는 비트맵인가요?  
update-frequency 얼마나 빠르게 (적어도) 출력 장치가 콘텐츠의 겉모양을 바꿀 수 있는가? Media Queries 레벨 4에 추가됨
overflow-block 출력 장치는 블록 축(axis)을 따라 뷰포트를 넘치는(overflow) 콘텐츠를 어떻게 처리하는가? Media Queries 레벨 4에 추가됨
overflow-inline 인라인 축을 따라 뷰포트를 넘치는 콘텐츠가 스크롤될 수 있는가? Media Queries 레벨 4에 추가됨
color 출력 장치의 컬러 컴포넌트 당 비트 수, 그렇지 않으면 0(장치가 컬러가 아닌 경우).  
color-index 출력 장치의 컬러 검색 표 내 항목 수, 그렇지 않으면 0(장치가 그런 표를 사용하지 않는 경우).  
display-mode 응용 프로그램의 디스플레이 모드, 웹 앱 manifest's display 절에 지정된. Web App Manifest 스펙에 정의됨.
monochrome 출력 장치의 흑백 프레임 버퍼 내 픽셀 당 비트, 그렇지 않으면 0(장치가 흑백이 아닌 경우).  
inverted-colors 사용자 에이전트 또는 기본 OS가 색이 반전 중인가요? Media Queries 레벨 4에 추가됨
pointer 주 입력 장치가 포인팅 장치인가요? 그렇다면 얼마나 정확한가요? Media Queries 레벨 4에 추가됨
hover 주 입력 장치가 사용자가 요소 위에 마우스를 올릴 수 있게 하나요? Media Queries 레벨 4에 추가됨
any-pointer 이용 가능한 입력 장치가 포인팅 장치인가요? 그렇다면 얼마나 정확한가요?  
any-hover 이용 가능한 입력 장치가 사용자가 요소 위에 마우스를 올릴 수 있게 하나요?  
light-level 현재 주변광(ambient light) 레벨 Media Queries 레벨 4에 추가됨
scripting 스크립팅(가령 JavaScript)이 이용 가능하나요? Media Queries 레벨 4에 추가됨
device-width 출력 장치의 렌더링 면의 너비 Media Queries 레벨 4에서 사라짐
device-height 출력 장치의 렌더링 면의 높이 Media Queries 레벨 4에서 사라짐
device-aspect-ratio 출력 장치의 가로세로(종횡)비 Media Queries 레벨 4에서 사라짐
-webkit-device-pixel-ratio CSS 픽셀 당 물리 장치의 픽셀수 비표준. 왜냐하면 WebKit/Blink 전용. 가능하면, 대신에 resolution 미디어 특성을 쓰세요.
-webkit-transform-3d CSS 3D transform이 지원되나요? 비표준. 왜냐하면 WebKit/Blink 전용
-webkit-transform-2d CSS 2D transform이 지원되나요? 비표준. 왜냐하면 WebKit 전용
-webkit-transition CSS transition이 지원되나요? 비표준. 왜냐하면 WebKit 전용
-webkit-animation CSS animation이 지원되나요? 비표준. 왜냐하면 WebKit 전용

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

스펙

스펙 상태 설명
Web Compatibility Standard
The definition of 'CSS Media Queries' in that specification.
Living Standard -webkit-device-pixel-ratio-webkit-transform-3d 미디어 특성을 표준화.
CSS Conditional Rules Module Level 3
The definition of '@media' in that specification.
Candidate Recommendation @media 규칙의 기본 구문 정의함.
Media Queries Level 4
The definition of '@media' in that specification.
Working Draft

scripting, pointer, hover, light-level, update-frequency, overflow-blockoverflow-inline 미디어 특성이 추가됩.
screen, print, speechall을 제외하고는 모든 미디어 유형이 사라짐.

Media Queries
The definition of '@media' in that specification.
Recommendation 변화 없음.
CSS Level 2 (Revision 1)
The definition of '@media' in that specification.
Recommendation 초기 정의.

브라우저 호환성

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (all, print, screen) 1.0 1.0 (1.7 or earlier) 6.0 9.2 1.3
speech No support No support No support 9.2 No support
Media features 1.0 1.0 (1.7 or earlier) 9.0 9.2 1.3
display-mode media feature ? 47 (47) ? ? ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (all, print, screen) 1.0 1.0 (1.7) (Yes) 9.0 3.1
speech No support No support No support 9.0 No support
Media features 1.0 1.0 (1.7) (Yes) 9.0 3.1
display-mode media feature ? (Yes) ? ? ?

참조

문서 태그 및 공헌자

태그: 
 이 페이지의 공헌자: Netaras
 최종 변경: Netaras,