미디어 쿼리
CSS에서 레이아웃을 작성하기 위한 새로운 속성입니다.
미디어 쿼리(Media Queries)
미디어 쿼리는 화면 크기에 따른 각각의 속성 값을 지정하여, 여러가지 화면을 구성하는 기술입니다.
미디어 쿼리 사용 방법
- CSS 파일 내에 사용하는 방법
- link 요소에 사용하는 방법
- @import에 사용하는 방법
미디어쿼리 속성
| 종류 | 예시 |
|---|---|
| aspect-ratio | 화면의 가로 세로 비율(1/1)을 설정합니다. |
| device-aspect-ratio | 모니터 화면의 가로 세로 비율(16/9)을 설정합니다. |
| width | 브라우저 화면의 가로 크기를 설정합니다. |
| height | 브라우저 화면의 세로 크기를 설정합니다. |
| device-width | 모니터 화면의 가로 크기를 설정합니다. |
| device-height | 모니터 화면의 세로 크기를 설정합니다. |
| device-pixel-ratio | 화면의 픽셀 밀도값을 설정합니다. |
| resolution | 화면의 픽셀 밀도값을 설정합니다. |
| orientation | 디바이스의 가로(landscape), 세로(portrait)방향을 설정합니다. |
