미디어 쿼리란?
미디어 쿼리(Media Queries)는 CSS3모듈 중 하나로 사이트에 접속하는 장치에 따라 특정한 CSS스타일을 사용하도록 해 줍니다. 미디어 쿼리를 사용하면 접속하는 기기의 화면 크기에 따라 레이아웃이 달라집니다.
미디어 쿼리 구문
미디어 쿼리의 기본적인 구문은 다음과 같습니다.
| 기본형 |
| @media [only | not] 미디어 유형 [and 조건] * [and 조건] @media screen and (min-width:200px) and (max-width:360px) { ...... } |
미디어 쿼리 구문에서 사용할 수 있는 연산자는 다음과 같습니다.
| 연산자 | 설명 |
| and | 앞의 소스처럼 조건을 계속 추가할 수 있습니다. |
| ,(쉼표) | 동일한 스타일 유형을 사용할 미디어의 유형과 조건이 있다면 쉼표를 사용해 추가합니다. |
| only | 미디어 쿼리를 지원하는 웹 브라우저에서만 조건을 인식하게 합니다. 이 키워드를 사용하면 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않습니다. IE에서는 미디어 쿼리를 제대로 인식하지 못하기 때문에 only 키워드를 사용하더라도 큰 의미가 없습니다. |
| not | not 다음에 지정하는 미디어 유형을 제외합니다. 예를 들어 'not tv'라고 지정한다면 TV를 제외한 미디어 유형에만 적용합니다. |
미디어 유형의 종류
미디어 쿼리는 미디어별로 적용할 CSS를 따로 작성하기 때문에 @media속성 다음에 미디어 유형을 알려주어야 합니다.
미디어 유형에 들어갈 수 있는 것은 다음과 같습니다.
| 미디어 유형 | 사용 가능한 미디어 |
| all | 모든 미디어 유형 |
| 인쇄 장치 | |
| screen | 컴퓨터 스크린(스마트폰 스크린 포함) |
| tv | 음성과 영상이 동시 출력되는 TV |
| aural | 음성 합성 장치(주로 화면을 읽어 소리로 출력해 주는 장치) |
| braille | 점자 표시 장치 |
| handheld | 패드(pad)처럼 손에 들고 다니는 장치 |
| projection | 프로젝터 |
| tty | 디스플레이 기능이 제한된 장치(픽셀(px) 단위를 사용할 수 없음) |
| embossed | 점자 프린터 |
미디어 쿼리의 조건
미디어 쿼리에서 사용하는 조건에는 주로 화면 크기와 관련된 것들이 많고 특정 조건에 따라 적용할 CSS를 다르게 정의하므로 조건을 어떻게 체크할 것 인지가 중요합니다.
웹 문서의 가로 너비와 세로 높이
실제 웹 문서의 내용이 화면에 보이는 영역을 '뷰포트'라고 하는데 뷰포트의 너비와 높이를 미디어 쿼리의 조건으로 사용할 수 있습니다. 이때 height(높이)값은 미디어에 따라 달라지기 때문에 주의해야 합니다.
| 가로, 세로 값 설정하는 속성 | 설명 |
| width, height | 웹 페이지의 가로 너비, 세로 높이 |
| min-width, min-height | 최소 너비, 최소 높이 |
| max-width, max-height | 최대 너비, 최대 높이 |
미디어 쿼리를 이용하면 max-width 값(브라우저 창의 최대 너비 값)에 따라 문서의 배경 이미지가 달라지도록 미디어 쿼리 구문을 구성할 수 있습니다.
단말기의 가로 너비와 세로 높이
| 단말기의 가로, 세로 값을 설정하는 속성 | 설명 |
| device-width, device-height | 단말기의 가로 너비, 세로 높이 |
| min-device-width, min-device-height | 단말기의 최소 너비, 최소 높이 |
| max-device-width, max-device-height | 단말기의 최대 너비, 최대 높이 |
@media all and (min-device-width:320px) and (min-device-height: 480px) {
......
}단말기 크기와 뷰포트 크기를 하나로 통일해 사용하기 위해 뷰포트를 지정할 때 width="device-width"로 높고 사용합니다.
화면 회전
미디어 쿼리를 작성할 경우, orientation속성을 사용하면 화면 방향을 체크할 수 있습니다. orientation속성은 portrait값과 landscape 값을 사용할 수 있는데 풍경화처럼 가로(width 값)가 넓으면 landscape이고 초상화처럼 세로(height 값)가 길면 portrait입니다.
| 속성 | 설명 |
| orientation: portrait | 단말기 세로 방향 |
| orientation: landscape | 단말기 가로 방향 |
화면 비율, 단말기의 물리적 화면 비율
화면 비율은 뷰포트, 즉 단말기 브라우저 화면의 너비 값(width)을 높이 값(height)으로 나눈것으로 숫자 값이나 게산식을 사용할 수 있습니다. 사용할 수 있는 속성은 다음과 같습니다.
| 속성 | 설명 |
| aspect-ratio | 화면 비율(width값/ height 값) |
| min-aspect-ratio | 최소 화면 비율 |
| max-aspect-ratio | 최대 화면 비율 |
반면, 단말기 화면 비율은 단말기의 너비 값(device-width)과 높이 값(device-height)을 이용해 계산합니다. 사용할 수 있는 속성은 다음과 같습니다.
| 속성 | 설명 |
| device-aspect-ratio | 단말기 화면 비율(width 값/ height 값) |
| min-device-aspect-ratio | 단말기 최소 화면 비율 |
| max-device-aspect-ratio | 단말기 최대 화면 비율 |
색상당 비트 수
단말기에서 사용하는 최대 색상 비트 수를 미디어 쿼리 조건으로 사용할 수도 있습니다. color:1이면 최대 2가지 색상을 나타낼 수 있고 color:3이면 8가지를 표현할 수 있습니다.(비트수) 컬러 색상을 지원하지 않는다면 color:0으로 지정합니다.
| 속성 값 | 설명 |
| color | 비트 수 |
| min-color | 최소 비트 수 |
| max-color | 최대 비트 수 |
여기서 미디어 쿼리의 조건에 대한 설명을 볼 수 있다.
https://www.w3.org/TR/css3-mediaqueries/
Media Queries
HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types. For example, a document may use sans-serif fonts when displayed on a screen and serif fonts when printed. ‘screen’ and ‘print’ are two media types tha
www.w3.org
미디어 쿼리 중단점 만들기
미디어 쿼리를 작성할 때 서로 다른 CSS를 적용할 화면 크기를 중단점(break point)이라고 합니다. 이 중단점을 어떻게 지정하는가에 따라 CSS가 달라지고 화면 레이아웃이 바뀌는데 대부분 기기의 화면 크기를 기준으로 합니다.
하지만 시중의 모든 기기들을 반영할 수는 없기 때문에 모바일 기기와 태블릿, 데스크톱정도로만 구분하는 것이 좋습니다. 그리고 처리 속도나 화면 크기 등에서 다른 기기보다 모바일 기기의 제약 조건이 더 많기 때문에 모바일 기기의 레이아웃을 기본으로해서 CSS를 만듭니다.
CSS 프레임워크인 부트스트랩(Bootstrap)과 쇼핑몰 개발 플랫폼인 마젠토(Magento)에서는 다음과 같은 중단점을 사용합니다.
| 아주 작은 화면 | 작은 화면 | 중간 화면 | 큰 화면 | 아주 큰 화면 | |
| 부트스트랩 | 576px 미만 | 576px 이상 | 768px 이상 | 992px 이상 | 1200px 이상 |
| 마젠토 | 640px 미만 | 640px 이상 | 768px 이상 | 1024px 이상 | 1440px 이상 |
미디어 쿼리 적용하기
외부 CSS파일 연결하기
외부 스타일시트 파일로 따로 저장한 후 웹 문서에 연결해보겠습니다.
<link>태그 사용하기
| 기본형 | 설명 |
| <link rel="stylesheet" medai="미디어 쿼리 조건" href="css 파일 경로"> <link rel="stylesheet" media="screen and (max-width:768px)" href="css/print.css"> |
지정한 css파일을 가져와 적용 |
@import구문 사용하기
| 기본형 | 설명 |
| @import url(css 파일 경로) 미디어 쿼리 조건 | 외부 CSS파일 연결 |
<link>태그와 @import 구문
<link>태그와 @import 구문 모두 외부 CSS 파일을 가져와 사용하는 방법이기 때문에 CSS 파일이 1~2개 밖에 없다면 속도나 처리 면에서 큰 차이가 없습니다. 하지만 실제로 사이트를 만들다 보면 CSS 파일이 상당히 많아지는데 이럴 경우, @import구문보다 <link>태그가 안정적이고 빠르기 때문에 <link>의 사용을 권장합니다.
웹 문서에서 직접 정의하기
| 기본형 | 설명 |
| <style media="미디어 쿼리 조건"> 스타일 규칙들 </style> |
<style>태그 안에서 media속성을 사용해 조건을 지정하고 그 조건에 맞는 스타일을 정의합니다. |
| <style media="screen and (max-width:320px)"> body { background-color: orange; } </style> |
|
| <style> @media 미디어 쿼리 조건{ 스타일 규칙들 } </style> |
스타일을 선언할 때 @media구문을 사용해 각 조건별로 스타일을 지정해놓고 선택적으로 스타일을 적용 |
| <style> @media screen and (max-width:320px) { body { background-color: orange; } } </style> |
실제 사이트에서 미디어 쿼리가 어떻게 사용되는지 확인하기 위해 네이버 개발자 센터(https://developers.naver.com/)로 접속한 후 ctrl + shift + i를 눌러 개발자 도구 창을 엽니다. 그리고 도구 창 왼쪽에 있는 Toggle device toolbar아이콘을 클릭하면 화면 위쪽에 막대가 나타날 것이고 만약 보이지 않는다면 more option아이콘을 누른 후 show media query메뉴를 선택하면 미디어 쿼리에서 지정한 조건을 시각적으로 보여줍니다.
미디어 쿼리를 사용해 웹 문서 만들기
반응형 웹 디자인은 화면 해상도에 따라 화면 요소들을 옮길 수 있어야 하므로 처음부터 레이아웃을 잘 구상하고 옮길 부분을 결정해야 합니다. 이때 주로 모바일 화면부터 시작해 태블릿과 PC화면 순서대로 구상하면 편합니다.