미디어 쿼리

✏️ 미디어 쿼리

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

구성 요소
" @media 미디어타입 and 조건{스타일 선언} "

스크린의 최소 너비가 800px이면(800px 이상이 되면) box 클래스인 div요소의 배경색이 orange가 된다.

주요 사용되는 조건

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