[개미의 걸음 HTML&CSS 22차시] 반응형 웹 ③ Media Queries

Media Queries[미디어 쿼리]

접속하는 기기의 화면 크기에 따라 레이아웃이 달라지도록 설정하는 방법

@media [only | not | 생략] 미디어 유형 and (속성1: 속성값) and (속성2: 속성값){

}

• 속성 값을 만족하는 미디어 유형이나 이를 제외한 미디어 유형들의 CSS를 정의
• 미디어 쿼리 작성 시, 서로 다른 CSS를 적용할 화면 크기를 중단점[break point]라고 함
• @media 속성을 사용해 미디어에 사용할 CSS를 적용
• only는 미디어 쿼리를 지원하는 웹 브라우저에서만 조건 인식
  not은 해당 미디어 유형을 제외하고 CSS를 적용할 때 사용
  생략하고 아무것도 입력하지 않으면 해당 미디어 유형에만 CSS를 적용
• CSS를 적용할 미디어 유형을 설정
  

  미디어 유형	설    명
  all	모든 미디어 유형
  screen	스크린(컴퓨터, 스마트폰 등)
  tv	음성과 영상이 동시에 출력되는 TV
  aural	음성 합성 장치(주로 화면의 텍스트들을 소리로 출력해주는 장치)
  braille	점자 표시 장치
  handheld	패드(pad)처럼 손에 들고 다니는 장치
  projection	프로젝터
  tty	디스플레이 기능이 제한된 장치(픽셀 단위 사용 불가)
  print	인쇄 장치
  embossed	점자 프린터

미디어 쿼리의 조건

속    성	설    명
width, height	웹 문서의 너비와 높이를 설정하는 속성
	단말기크기와 뷰포트 크기를 설정할 때, width="device-width" 사용
min-width, min-height	웹 문서의 최소 너비와 최소 높이를 설정하는 속성
max-width, max-height	웹 문서의 최대 너비와 최대 높이를 설정하는 속성
device-width, device-height	단말기의 너비와 높이를 설정하는 속성 [단말기 해상도와 브라우저 너비가 다름]
min-device-width, min-device-height	단말기의 최소 너비와 최소 높이를 설정하는 속성
max-device-width, max-device-height	단말기의 최대 너비와 최대 높이를 설정하는 속성
orientation	세로*가로 방향에 따라 단말기에 나타나는 디자인을 다르게 설정하는 속성 속성 값에는 portrait[단말기 세로방향]와 landscape[단말기 가로방향]가 있음
aspect-ratio	화면 비율을 설정하는 속성 속성 값은 width 값/height 값으로 나타냄(ex. 16/9)
min-aspect-ratio	최소 화면 비율을 설정하는 속성
max-aspect-ratio	최대 화면 비율을 설정하는 속성
color	단말기에서 사용하는 색상 비트 수
min-color	단말기에서 사용하는 최소 색상 비트 수
max-color	단말기에서 사용하는 최대 색상 비트 수