<CSS> 미디어 쿼리

- 미디어 쿼리란?

다양한 모바일 기기가 늘어나면서 각 기기에 따른 화면 구성의 중요성이 커진지 꽤 오래되었다. 미디어 쿼리(Media Queries)는 바로 이러한 다양한 조건에 따라 CSS 스타일을 사용할 수 있도록 해주는 기능이다. 

 

미디어 쿼리의 기본 구문은 다음과 같다.

@media [only | not] 미디어 유형 [and 조건] * [and 조건]

미디어 쿼리는 적용할 미디어의 유형을 지정해야 하며, 적용 시 충족시키고자 하는 조건이 있다면 and 연산자와 함께 작성하면 된다.

 

 

- 미디어 쿼리의 연산자

미디어 쿼리에서 사용가능한 연산자는 다음과 같은 것들이 있다.

*and : 조건을 계속 추가할 수 있도록 함

*,(쉼표) : 동일한 스타일 유형을 사용할 미디어의 유형 및 조건이 있어 추가하려는 경우 사용함

*only : 미디어 쿼리를 지원하는 웹 브라우저에서만 조건을 인식하도록 함

*not : not 다음에 지정하는 미디어 유형은 제외함

 

 

- 미디어 쿼리 유형의 종류

미디어 쿼리는 미디어별로 적용할 CSS를 따로 만들어주어야 한다. 따라서 먼저 미디어 유형부터 정해주어야 한다. 미디어 유형의 종류로는 다음과 같은 것들이 있다.

*all : 모든 미디어 유형

*print : 인쇄 장치

*screen : 컴퓨터 스크린, 스마트폰 스크린

*tv : TV

*aural : 화면을 읽어 소리로 출력해주는 음성 합성 장치

*braille : 점자 표시 장치

*handheld : 패드와 같이 손으로 들고 다니는 장치

*projection : 프로젝터

 

이 중에서도 가장 많이 사용되는 것이 화면 크기에 따른 screen 유형이다. screen 유형을 사용할 때에는 다음과 같이 속성을 지정하여 사용한다.

*가로, 세로 값을 설정하는 속성(단말기는 'device' 단어를 추가함)

width, height : 웹 페이지의 가로 및 세로 길이

min-width, min-height : 최소 가로, 세로 길이

max-width, max-height : 최대 가로, 세로 길이

*스마트폰의나 태블릿의 경우 기기의 방향을 회전하여 볼 때는 orientation 속성을 사용한다. 값으로는 portrait(세로 방향), landscape(가로 방향)이 있다.

 

 

- 미디어 쿼리의 중단점

미디어 쿼리에는 중단점(break point)이라는 것이 있다. 이 중단점이라 함은 서로 다른 CSS 스타일을 적용할 때의 그 기준점이라 할 수 있다. 이 중단점에 따라 레이아웃이 달라지는 것이다. 보통 중단점은 모바일이 다른 기기에 비해 제약 조건이 많아 모바일을 가장 먼저 고려하여 작성한다.

 

 

- 미디어 쿼리의 실행

실제 웹 사이트에서 미디어 쿼리가 실행되는 것을 확인하려면 개발자 도구의 Toggle device toolbar를 통해 확인하면 된다. F12 키를 누르면 나타나는 창에서 최상단의 왼쪽편에서 두번째 버튼이다(크롬 브라우저 기준). 이로써 나타나는 상단의 막대바를 클릭해보면 뷰포트에 따라 웹사이트의 화면이 어떻게 달라지는지 확인할 수 있다. 이것이 바로 미디어 쿼리가 적용된 예인 것이다.

 

 

 

 

 

참고 : 도서 <Do it! HTML5+CSS3 웹 표준의 정석>