CSS : 미디어쿼리 @media

미디어쿼리 @media

출력 장치의 여러 특징 가운데 일부를 참조하여 CSS 코드를 분기 처리함으로써 하나의 HTML 소스가 여러가지 뷰를 갖도록 구현할 수 있는 명세이다. 일반적으로 뷰포트 해상도에 따라 CSS 코드를 분기한다.

CSS시트내의 문법

@media미디어쿼리시작 (조건문A) 타입 (조건문B) {실행문} 문법 사이의 공백 필수

타입

▪ all : 디폴트. 모든 미디어 장치에 사용
▪ print : 프린터
▪ screen : 컴퓨터 스크린, 테블릿, 스마트 폰 등
▪ speech : 화면낭독기

조건문

▪ only : 미디어 쿼리를 지원하는 사용자 에이전트만 미디어 쿼리 구문을 해석하라는 명령. 생략 가능
▪ not : 뒤에 오는 모든 조건을 부정
▪ all : all 이면 모든 미디어가 이 구문을 해석
▪ and : ‘&&’ 연산을 수행하여 앞과 뒤의 조건을 모두 만족해야 한다는 것을 의미
▪ ,(콤마) : ‘||’ 연산을 수행. 나열된 조건 중에서 하나만 참이어도 {실행문} 해석

📌min-width 사용 (최소 ~ 부터 적용) / max-width 사용 (최대 ~ 까지 적용)

가로 해상도가 320Ppx이상인 모든 브라우저에서 실행
@media all and (min-width: 320px)

가로 해상도가 최대 320px일 때 적용
@media only screen and (max-width: 320px)

가로 해상도가 최소 321px, 최대 500px일 때 적용
@media (min-width: 321px) and (max-width: 500px)

가로 해상도가 최대 320px이 아닐때 적용
@media not (max-width: 320px)

👉🏻디바이스 분기 참고 사이트