css_미디어 쿼리(media query)

미디어 쿼리(media query)

• 미디어 타입을 인식하고 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 모듈(기능)
  
  

미디어 쿼리의 구성 요소

• 미디어 타입
• 조건에 대한 쿼리(물음) : ex)화면 크기, 배율

@media 미디어 타입 and 조건에 대한 쿼리{
	미디어 타입 & 조건 모두 만족 시 덮어씌울 스타일 선언문
}

@media screen and (max-width: 800px){
=>스크린의 width가 800px 이하일 때(최대 너비 768px 이하일 때) 스타일 선언문 추가
}

### 미디어 타입과 쿼리 속성명과 정의 - min-width : 디스플레이 영역의 최소 너비 - max-width : 디스플레이 영역의 최대 너비 - min-height : 디스필레이 영역의 최소 높이 - max-height : 디스플레이 영역의 최대 높이

• orientation : portrait 또는 landscape 감지
• color : 기기의 색상 당 비트 수
• color-index : 출력 기기의 색상 테이블 수
• aspect-ratio : 디스필레이 영역의 너비와 높이의 비율