media feature
미디어 쿼리가 적용될 미디어 조건을 적습니다. 사용할 수 있는 조건은 18가지인데, 실무에서 자주 사용하는 몇 가지만 추려 소개합니다.
표 7-9 미디어 조건 종류
|
조건 |
값 |
설명 |
|
min-width |
<화면 너비> |
미디어 쿼리가 적용될 최소 너비 |
|
max-width |
<화면 너비> |
미디어 쿼리가 적용될 최대 너비 |
|
orientation |
portrait |
세로 모드, 뷰포트의 세로 높이가 가로 너비보다 큰 경우 |
|
orientation |
landscape |
가로 모드, 뷰포트의 가로 너비가 세로 높이보다 큰 경우 |
TIP | 모든 조건 형식을 알고 싶다면 https://www.w3.org/TR/mediaqueries-4/#mq-features 페이지를 참고하세요.
다음과 같이 미디어 쿼리를 사용하면 어떤 조건에서 실행될까요?
@media only screen and (min-width:360px) and (max-width:720px){
/* CSS 코드 */
}
미디어 쿼리를 적용할 수 있는 기기(only)이면서 컴퓨터 화면 장치 또는 스마트 기기(screen)일 때 그리고(and) 뷰포트의 너비가 최소 360px(min-width)이고 최대 720px(max-width)이면 CSS 코드가 실행됩니다. 그리고 only와 미디어 타입은 생략할 수 있으므로 다음처럼 간단하게 적어도 됩니다.
@media (min-width:360px) and (max-width:720px){
/* CSS 코드 */
}