미디어 쿼리 속성
반응형 웹 디자인에서 가장 기본적인 개념.
사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 적용.
- 형태 : @media [only|not] 미디어 유형 [and 조건] * [and 조건]
미디어 유형
| 종류 | 설명 |
|---|---|
| all | 모든 미디어 유형 |
| 인쇄 장치 | |
| screen | PC 스크린 + 스마트폰 스크린 |
| tv | 음성과 영상이 동시에 출력되는 TV |
| aural | 화면을 읽어 소리로 출력해 주는 장치 |
| braille | 점자 표시 장치 |
| handled | 패드 |
| projection | 프로젝터 |
| tty | 디스플레이 기능이 제한된 장치. 픽셀 단위를 사용할 수 없음 |
| embossed | 점자 프린터 |
조건
웹페이지의 너비와 높이
웹 문서 내용이 화면에 나타나는 영역을 뷰포트라고 하는데 뷰포트의 너비와 높이를 미디어 쿼리 조건으로 사용함.
| 종류 | 설명 |
|---|---|
| width, height | 뷰포트의 가로, 세로 길이 |
| min-width, min-height | 뷰포트의 최소 너비, 최소 높이 |
| max-width, max-height | 뷰포트의 최대 너비, 최대 높이 |
단말기의 너비와 높이
| 종류 | 설명 |
|---|---|
| device-width, device-height | 디바이스의 가로, 세로 길이 |
| min-device-width, min-device-height | 디바이스의 최소 너비, 최소 높이 |
| max-device-width, max-device-height | 디바이스의 최대 너비, 최대 높이 |
예시)
@media all and (min-device-width: 360px) and (min-device-height: 640px){
}
화면 회전
| 종류 | 설명 | 예시 |
|---|---|---|
| portrait | 단말기의 세로 모드 | orienntation: portrait |
| landscape | 단말기의 가로 모드 | orientation : landscape |
모바일 퍼스트(mobile first) 기법
- 다른 기기에 비해 제약 조건이 많은 모바일의 레이아웃을 기본으로 스타일링
중단점
- 기준이 되는 단말기에 따라 달라질 수 있음.
- 스마트폰의 경우 미디어 쿼리를 사용하지 않고, 기본 CSS 로 작성
- 태블릿의 경우 세로크기가 768px 이상, 가로크기 1024px 이상
- 데스크톱의 경우 1024px 이상
외부 CSS 파일 연결
link 를 이용할 때
< link rel=”stylesheet” media= “미디어쿼리조건” href=”css 파일경로” s>
import 를 이용할 때
@import url(“css/pc.css”) only screen and (min-width : 1024px)