미디어쿼리

@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) {}
<!-- min-width가 1000px 이하이거나(or) min-height가 800이하이면 실행 -->