미디어쿼리
@media 조건문 {
CSS 속성
}
- 단말기 유형, 화면 해상도, 뷰포트 너비 등에 각각의 CSS를 적용 할 수 있게 해줌
조건문
유형
- all: 모든 장치
- print: 인쇄 결과물
- screen: 컴퓨터 스크린, 태블릿, 스마트폰 등
- speech: 음성장치
특성
괄호 내에 특성:값 형식으로 작성
@media (min-width: 1000px) {
body {
background-color: red;
}
}
- width: 스크롤바가 포함된 뷰포트 너비
- max-width: 뷰포트 최대 가로너비
- min-width: 뷰포트 최소 가로너비
- height: 뷰포트 높이
- max-height: 뷰포트 최대 높이
- min-height: 뷰포트 최소 높이
- orientation: 뷰포트 방향
- landscape: 장치가 가로 방향일 때
- portrait: 장치가 세로 방향일 때
논리 연산자
- and: 조건이 모두 참이면 실행
- not: 조건이 참이 아닐 시 실행
- only:
- 콤마(,): 다수의 조건을 하나로 묶고, or 연산자와 같이 하나라도 참이면 실행됨
@media screen and (min-width: 1000px), screen and (min-height: 800px) {}
