CSS 미디어쿼리

다양한 미디어 유형이나 장치에 따라 서로 다른 스타일 규칙을 적용할 수 있다.

media 미디어타입 and (미디어특성) {
    CSS 코드
}

미디어 타입

타입	의미	기본값
all	모든 미디어 타입에 적용	all
screen	컴퓨터 화면, 태블릿, 스마트폰 등
print	인쇄 전용

미디어 특성

특성	의미
width	뷰포트 가로 너비
max-width	뷰포트 최대 가로 너비(이하)
min-width	뷰포트 최소 가로 너비(이상)
height	뷰포트 세로 너비
max-height	뷰포트 최대 세로 너비(이하)
min-height	뷰포트 최대 세로 너비(이상)
orientation	뷰포트 방향(portrait, landscape)
기타	다른 특성들

Miead(Grid) options

종류	디바이스	단위(px)
Large Devices	Desktops	1024px 이상
Medium Devices	Desktops + Tablets	1024px 이하
Small evices	Tablets	992px 이하
Extra Small Devices	Phones	768px 이하

미디어쿼리 파일 관리

미디어쿼리는 파일을 분리하여 관리할 수 있다.

<link rel="stylesheet" media="미디어타입 and (미디어특성)" href="파일명">

---

REFERENCE
패스트 캠퍼스 온라인 강의 HTML & CSS _ 박영웅 강사님