728x90
반응형
1. 미디어쿼리란?
미디어쿼리는 CSS3 모듈중 하나로 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 해준다.
예를 들어, 다음 소스는 미디어 유형이 'screen' 이면서 최소 너비가 '200px'이고 최대 너비가 '360px'일 경우 적용할 CSS를 정의하는 구문입니다.
@media screen and (min-width:200px) and (max-width:360px) {
.....
}
앞의 소스에서 조건 사이에 넣은 and를 연산자라고 하는데, 미디어쿼리 구문에서 사용할 수 있는 연산자는 다음과 같습니다.
| 연산자 | 설명 |
| and | 조건을 계속 추가 가능 |
| , | 동일한 스타일 유형을 사용할 미디어의 유형과 조건이 있다면 쉼표을 이용해 추가 |
| only | 미디어 쿼리를 지원하는 웹브라우저에서만 조건을 인식 |
| not | not 다음에 지정하는 미디어 유형을 제외. 예를 들어 not tv라고 지정하면 TV를 제외한 미디어만 적용 |
2. 미디어 쿼리의 조건
| <style> body { background: url(images/bg0.jpg) no-repeat fixed; background-size: cover; } @media screen and (max-width:1024px) { body { background: url(images/bg1.jpg) no-repeat fixed; background-size: cover; } } @media screen and (max-width:768px) { body { background: url(images/bg2.jpg) no-repeat fixed; background-size: cover; } } @media screen and (max-width:320px) { body { background: url(images/bg3.jpg) no-repeat fixed; background-size: cover; } } </style> |
3. 화면 회전
미디어쿼리를 작성할 경우, orientation 속성을 사용하면 화면 방향을 체크할 수 있습니다.
orientation 속성은 portrait값과 landscape 값을 사용할 수 있는데, portrait가 단말기 세로방향을 의미합니다.
| <style> body { background-color: #eee; } @media screen and (orientation:landscape) { body { background-color: orange; } } @media screen and (orientation:portrait) { body { background-color: yellow; } } </style> |
728x90
반응형