미디어 쿼리

CSS의 미디어 쿼리는 하나의 HTML 소스코드가 여러개의 디자인을 가지도록 함

일반적으로 반응형 웹 디자인 구현에 사용 함

문법 : @media not|only 미디어타입 and (미디어 특징) {
CSS 소스코드;
}

미디어 타입

현재 웹 사이트에 접속한 장치의 타입을 특정

all : 모든 장치의 타입에 적용

screen : 컴퓨터, 태블릿, 스마트폰 등에 적용

speech : 스크린 리더기에 적용

print : 프린터기에 적용

미디어 특징

해당 장치에서 적용될 구체적인 특징을 설정

min-height : 해상도의 높이 하한선을 설정

max-height : 해상도의 높이 상한선을 설정

min-width : 해상도의 너비 하한선을 설정

max-width : 해상도의 너비 상한선을 설정

min-device-width 출력장치 자체의 너비 하한선을 설정

min-color출력장치의 색상 구성요소당 비트의 수의 하한선을 설정

orientation 화면이 세로 가로 모드인지 설정

@media (min-width: 240px) {
    body {background-color: red;}
}

@media (min-width: 480px) {
    body {background-color: green;}
}

@media (min-width: 960px) {
    body {background-color: blue;}
}

/* 화면의 넓이에 따라서 배경 색이 변하는 것을 볼 수 있음  */

---