미디어 쿼리[CSS]

[광고 누르면 오늘의 행운 상승!!]

 

• 현재 HTML 문서가 보여지는 화면이 어떤 것인지 파악
• 각종 기기에 따라 다른 CSS스타일 지정 가능
• 미디어쿼리 구문 : link 요소에 속성으로 적용
  미디어쿼리 값 + 미디어 쿼리 속성
  예) 외부 css파일 연결을 위해 링크 요소 사용, media 속성으로 미디어 쿼리 적용 
• media = "all" :모든 미디어에 해당 CSS스타일 파일 적용
• media = "print" : 해당 CSS스타일 파일 인쇄 시 적용
• media = "screen and (max-device-width: 480px) and (min-device-width:320px)":
  최소 320픽셀에서 최대 480픽셀 화면에 HTML문서가 보일 때 해당 CSS 파일을 이용
  (모니터나 모바일 화면 등의 넓이 제한)

• 미디어 쿼리 값
  현재 CSS3에서 적용하는 미디어 쿼리
  
  

screen	컴퓨터 화면 또는 이에 준하는 디스플레이
tv	텔레비전 화면
print	인쇄되는 종이
projection	프로젝션 빔
handheld	모바일 기기
tty	컴퓨터 터미널
braille	점자 리더기
speech	음성 발생기
all	모든 미디어 기기

디바이스의 최소 넓이나 최대 넓이 등을 제한하는 미디어쿼리 속성 값

aspect-ratio	종횡비	max-aspect-ratio min-aspect-ratio
device-aspect-rati	디바이스 종횡비	max-device-aspect-ratio min-device-aspect-ratio
resolution	해상도	max-resolution min-resolution
width	넓이	max-width min-width
device-width	디바이스 넓이	max-device-width min-device-width
height	높이	max-height min-height
device-height	디바이스 높이	max-device-height min-device-height

전체 미디어 쿼리 속성 값 : http://www.w3.org/TR/css3-mediaqueries/

Media Queries