[CSS] 반응형 웹의 미디어 쿼리 (Media Query)

미디어 쿼리 https://itnext.io/an-instructive-how-to-on-writing-css-media-queries-ab7c3c44b02e

미디어 쿼리에 대해 간략히 알아 보겠습니다.

반응형 웹(Responsible Web)

반응형 웹이란? 태블릿, 스마트 폰 등 다양한 모바일 기기들이 생겨 나면서 웹에서 보여지는 컨텐츠를 PC에서와 똑같이 모바일 기기에서도 보기 위한 방법이다. 즉 반응형 웹은 디바이즈 종류에 따라 웹페이지의 크기가 자동적으로 조정되어 어떠한 환경에서도 사용자가 편리하게 보는 웹을 말합니다. 

미디어 쿼리(Media Query)

반응형 웹에서 각각의 화면에 CSS를 적용하여 사용되어지는 것을 미디어 쿼리 이다. 화면의 사이즈를 인식해 서로 다른 CSS를 적용시켜준다. 화면의 사이즈에 따라 크게 PC, 태블릿, 스마트폰 3개로 구분하여 만든다.

• PC - 1024px 초과
• 태블릿 - 768px 이상, 1023px 이하
• 모바일 - 767px 이하

미디어 쿼리 문법

@media 연산자 미디어타입(조건문){
	...
    }

 

연산자 and | not | only | ,

미디어 쿼리에 연산자는 and, not, only, 쉼표가 있다.

 

- and 연산자: 여러 미디어 트징들을 하나로 결합

@media (min-width: 30em) and (orientation: landscape) { ... }

- 쉼표 , (or) 연산자: 쉼표로 분리된 각 쿼리는 각각 개별 미디어 쿼리이다.

- only 연산자: 미디어 쿼리를 지원하지 않는 브라우저가 주어진 스타일을 적용하는 것을 방지한다.(신형 브라우저에는 아무런 영향을 주지 않는다.)

 

- not 연산자: 전체 미디어 쿼리의 의미를 반전시킨다.

/*1*/ @media not all and (monochrome) { ... }

/*2*/ @media not (all and (monochrome)) { ... } O
/*3*/ @media (not all) and (monochrome) { ... } X

/*4*/ @media not screen and (color), print and (color) { ... }
/*5*/ @media (not (screen and (color))), print and (color) { ... }

1번째의 쿼리가 2번째로 처럼 전체 미디어를 반전 시키며 3번째 처럼은 안된다. 더 많은 쿼리를 사용해서 보면 4번을 5번 처럼 쉼표(or)로 나눠서 구분 되기 때문에 not 연산자의 영역도 쉼표에 맞춰 나눠진다.

 

미디어 타입 all | print | speech | screen

• all: 기본값, 모든 미디어 장치에 사용
• print: 프린터에 사용
• screen: 컴퓨터 스크린, 태블릿, 스마트폰 등
• speech: 페이지를 읽어주는 화면 낭독기

 

 

 

미디어 쿼리 실습

See the Pen GRjVXmb by intae92 (@intae92) on CodePen.

 

 

참고

aboooks.tistory.com/365

[css] 미디어 쿼리, @media query 이해하기

developer.mozilla.org/ko/docs/Web/Guide/CSS/Media_queries

미디어 쿼리 사용하기 - 웹 개발자 안내서 | MDN