CSS | 9. 미디어 쿼리

미디어 쿼리

반응형 웹사이트를 제작하기 위해 미디어 객체에 따라 다른 스타일을 적용되게 만드는 것

Media Types

@media mediaqueries { type } : 

screen — 화면을 출력하는 디스플레이가 있는 미디어는 다 여기에 속합니다.

print — 인쇄시 표현되는 웹 페이지 구성

all — screen, print를 포함한 모든 미디어에 표현되는 웹페이지 구성

Media Features

미디어 특성

width — 뷰포트의 너비. 브라우저 창의 너비
orientation — 세로모드인지 가로모드인지 구분

• portrait : 세로모드
• landscape : 가로모드

미디어 쿼리 구문

syntax

[a] : a가 나올 수도 나오지 않을 수도
a | b : a 또는 b 둘 중 하나 선택
a? : a가 0번 또는 1번만 나옴
a* : a가 0번 또는 계속 나올 수 있음

media_query_list : 여러 개의 미디어 쿼리로 이루어진 리스트. 쉼표로 구분합니다.

media_query 
A 형태 : 미디어 타입에 and 키워드로 미디어 표현식을 붙일 수 있고, 미디어 타잎 앞에 only, not 키워드
B 형태 : 미디어 타입없이 미디어 표현식이 and 키워드를 사용해서 계속 나올 수 있습니다.

expression (표현식) : 표현식은 괄호로 감싸야 합니다. 이름과 값은 : 기호로 연결합니다.

@media (max-width: 767px) {
    body { background-color: yellow; }
}
@media (min-width: 768px) and (max-width: 1024px) {
    body { background-color: pink; }
}
@media (min-width: 1025px) {
    body { background-color: red; }
}

미디어 해상도에 따른 배경색 

관련포스트

• CSS | 개념
• CSS | 폰트 텍스트 관련
• CSS | 선택자
• CSS | 조합자와 가상선택자
• CSS | 구체성과 상속
• CSS | 레이아웃
• CSS | 박스모델