VII. 반응형 웹과 미디어 쿼리 - 2. 미디어 쿼리

미디어 쿼리는 반응형 웹 디자인에서 가장 기본적인 개념이다.

사이트에 접근하는 기기의 해상도에 따라 서로 다른 스타일 시트를 적용해 주는 것이다.

 

미디어 쿼리 알아보기

CSS모듈인 미디어 쿼리(media queries)는 사이트에 접속하는 장치에 따라 특정한 CSS  스타일을 사용하는 방법이다.

미티어 쿼리를 사용하면 접속하는 기기의 화면 크기에 따라 레이아웃이 달라진다.

예를 들어 웹 브라우저를 전체화면으로 열었을 때와 화면 절반만 차지하도록 열었을 때 레이아웃이 달라지는 사이트들이 있다. 

이렇게 사용자가 어떤 크기의 미디어를 사용하는가에 따라 사이트의 형태가 바뀌도록 CSS를 작성하는 방법을 미디어 쿼리라고 한다.

 

미디어 쿼리 구문

미디어 쿼리는 @media 속성을 사용해 특정 미디어에서 어떤 CSS를 적용할 것인지 지정해 준다.

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

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

only	미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않는다.
not	not 다음에 지정하는 미디어 유형을 제외한다. 예를 들어 not tv라고 지정하면 TV를 제외한 미디어 유형에만 적용한다.
and	조건을 여러개 연결해서 추가할 수 있다.

(조건이 같은 미디어 유형이 여러 개라면 쉼표로 구분해서 추가한다)

 

미디어 쿼리 구문은 <style>과 </style> 사이에 사용하며 대소 문자를 구별하지 않는다.

기본적으로 미디어 유형을 지정해야 하고, 필요할 경우에는 and 연산자로 조건을 적용한다.

예를 들어 다음 소스는 미디어 유형이 screen이면서 최소 너비가 768px이고 최대 너비는 1439px일 경우에 적용할 CSS를 정의하는 구문이다.

@media screen and (min-width: 768px) and (max-width: 1439px){
   ......
}

 

미디어 유형의 종류

미디어 쿼리는 미디어별로 적용할 CSS를 따로 작성하므로 @media 속성 다음에 미디어 유형을 알려 줘야 한다.

@media 속성의 미디어 유형은 다음 표와 같다.

종류	설명
all	모든 미디어 유형에서 사용할 CSS를 정의한다.
print	인쇄 장치에서 사용할 CSS를 정의한다.
screen	컴퓨터 스크린에서 사용할 CSS를 정의한다. 스마트폰의 스크린도 포함된다.
tv	음성과 영상이 동시에 출력되는 TV에서 사용할 CSS를 정의한다.
aural	음성 합성 장치(주로 화면을 읽어 소리로 출력해 주는 장치)에서 사용할 CSS를 정의한다
braille	점자 표시 장치에서 사용할 css를 정의한다.
handheld	패드처럼 손에 들고 다니는 장치를 위한 CSS를 정의한다.
projection	프로젝터를 위한 CSS를 정의한다.
tty	디스플레이 기능이 제한된 장치에 맞는 CSS를 정의한다. 이런 장치에서는 픽셀 단위를 사용할 수 없다.
embossed	점자 프린터에서 사용할 CSS를 정의한다.

예를 들어 화면용 스타일과 인쇄용 스타일을 따로 만든다면 다음과 같이 미디어 쿼리를 지정할 수 있다.

@media screen{ /*화면용 스타일 작성*/
}
@media print{ /*인쇄용 스타일 작성*/
}

 

웹 문서의 가로 너비와 세로 너비 속성

실제 웹 문서 내용이 화면에 나타나는 영역을 뷰포트라고 하는데, 뷰포트의 너비와 높이를 미디어의 쿼리의 조건으로 사용할 수 있다.

이때 높잇값은 미디어에 따라 달라지므로 주의해야 한다.

가로 너비와 세로 너비를 지정할 때 사용하는 속성은 다음 표와 같다.

종류	설명
width, height	웹 페이지의 가로 너비, 세로 높이를 지정한다.
min-width, min-height	웹페이지의 최소 너비, 최소 높이를 지정한다.
max-width, max-height	웹 페이지의 최대 너비, 최대 높이를 지정한다.

 

예를 들어 너비가 1440px 이상일 때 미디어 쿼리는 다음과 같이 정의한다.

@medai screen and (min-width: 1440px) { /*스타일*/
}

 

단말기의 가로 너비와 세로 높이 속성

이번에는 단말기에서 기본으로 제공하는 물리적인 가로 너비와 세로 높이의 크기를 체크해 보겠다.

단말기의 너비와 높이는 단말기 브라우저 창의 너비와 높이를 말한다.

이때 주의할 점은 대부분의 단말기 해상도와 실제 브라우저의 너비가 다르다는 것이다.

예를 들어 아이폰 단말기 자체의 해상도와 아이폰의 웹 브라우전인 사파리의 너비는 다르다.

단말기 너비나 높이를 고려해 미디어 쿼리를 작성해야 한다면 다음과 같은 속성을 사용한다.

종류	설명
device-width, device-height	단말기의 가로 너비, 세로 높이를 지정한다.
min-device-width, min-device-height	단말기의 최소 너비, 최소 높이를 지정한다.
max-device-width, max-device-height	단말기의 최대 너비, 최대 높이를 지정한다.

 

예를 들어 iPhone X일 경우에 미디어 쿼리는 다음과 같이 작성할 수 있다.

@media screen and (min-device-width: 375px) and (min-device-height: 812px){
}

 

화면 회전 속성

스마트폰이나 태블릿에서는 화면을 돌릴 수 있다.

미디어 쿼리에서 orientation 속성을 사용하면 기기의 방향을 확인할 수 있고, 그에 따라서 웹 사이트의 레이아웃을 바꿀 수 있다.

orientation 속성값으로는 portrait와 landscape가 있다. 전자가 세로모드, 후자가 가로모드이다. 기본값은 가로모드이다.

예를 들어 iPhone X를 가로로 돌릴 경우에 미디어 쿼리는 다음과 같디 지정할 수 있다.

@media screen and (min-device-width: 812px) and (orientation: landscape) {
}

이 외에도 화면 비율이나 단말기 화면 비율, 색상당 비트 수 같은 여러 가지 미디어 쿼리 조건이 있다.

 

미디어 쿼리의 중단점

미디어 쿼리를 작성할 때 화면 크기에 따라 서로 다른 CSS를 적용할 분기점을 중단점(break point)라고 한다.

이 중단점을 어떻게 지정하느냐에 따라 CSS가 달라지고 화면 레이아웃이 바뀌는데, 대부분 기기의 화면 크기를 기준으로 한다.

하지만 시중에 나온 모든 기기를 반영할 수는 없으므로 모바일과 태블릿, 데스크톱 정도로만 구분하는 것이 좋다.

 

그리고 처리 속도나 화면 크기 등에서 다른 기기보다 모바일의 제약 조건이 더 많으므로 모바일의 레이아웃을 기본으로 하여 css를 만든다.(모바일용 CSS는 태블깃과 데스크톱에도 기본으로 적용된다.)

 

그러고 나서 사양이 좀 더 좋고 화면이 큰 태블릿과 데스크톱에 맞춰 더 많은 기능과 스타일을 추가한다.

이렇게 모바일을 먼저 고려하여 미디어 쿼리를 작성하는 것을 모바일 퍼스트(mobile first) 기법이라고 한다.

 

미디어 쿼리를 작성할 때 주어진 조건에 따라 여러 중단점을 만들 수 있지만 크게 다음과 같이 모바일, 태블릿, 데스크톱으로 구분한다. 물론 이 또한 상황에 맞게 달라질 수 있다.

스마트폰	모바일 페이지는 미디어 쿼리를 사용하지 않고 기본 CSS로 작성한다. 만일 스마트폰의 방향까지 고려해서 제작한다면 min-width의 가로와 세로를 각각 portrait 320px, landscape 480px로 지정한다.
태블릿	세로 크기가 768px 이상이면 태블릿으로 지정한다. 가로 크기는 데스크톱과 똑같이 1024px 이상으로 지정한다.
데스크톱	화면 크기가 1024px 이상이면 데스크톱으로 설정한다.

 

특정한 기기에 맞는 미디어 쿼리를 작성하고 싶다면 기기의 뷰포트 크깃값을 알아야 한다.

http://yesviz.com/devices.php 에 접속하면 이러한 정보를 열람할 수 있다.

 

미디어 쿼리 적용하기

미디어 쿼리가 어떻게 구성되는지 알았으니 이제 웹 문서에 적용해 보겠다.

적용하는 방법은 크게 외부 CSS 파일로 연결하는 방법과 웹 문서에 직접 정의하는 방법이 있다.

 

외부 CSS파일 연결하기

외부 CSS파일을 따로 저장해서 웹 문서에 연결하는 방법을 알아보겠다.

이 방법은 각 조건별로 CSS파일을 따로 저장한 뒤 <link> 태그나 @import 문을 사용해서 연결한다.

먼저 외부 CSS파일을 연결할 때 가장 많이 사용하는 <link> 태그를 알아보겠다.

<link> 태그는 <head>와 </head> 태그 사이에 넣는다.

다음 기본형의 의미는 미디어 쿼리 조건이 맞다면 지정한 CSS파일을 가져와서 적용하라는 것이다. 속성의 순서는 상관 없다.

<link rel="stylesheet" media="미디어 쿼리 조건" href="css 파일 경로">

예를 들어 인쇄용 CSS를 정의한 css\print.css 파일을 만들어 놓았다면 다음과 같은 코드를 작성하여 웹 문서와 연결하면 된다.

<link rel="stylesheet" media="print" href="css/print.css">

 

외부 CSS파일을 연결하는 또 다른 방법으로 <link> 태그 대신 @import 문을 사용할 수 있다.

@import 문은 CSS를 정의하는 <style>과 </style>태그 사이에서 다음과 같이 사용한다.

@import url(css 파일 경로) 미디어 쿼리 조건

예를 들어 태블릿용 CSS를 정의한 css\tablet.css 파일을 만들고, 너빗값이 321px 이상이면서 768px 이하일 때에 미디어 쿼리를 적용하려면 다음과 같이 지정할 수 있다.

@import url("css\tablet.css") only screen and (min-width: 321px) and (max-width: 68px);

 

참고: link 태그를 사용하는 방법과 @import를 사용하는 방법은 CSS파일이 적을 때에는 속도나 처리 면에서 차이가 없으나, CSS파일이 많아질 경우 link태그를 사용하는 것이 안정적이고 빠르다.

 

웹 문서에 직접 정의하기

이번에는 외부 CSS파일을 만들지 않고 웹 문서에서 미디어 쿼리를 직접 지정하는 방법을 알아보겠다.

웹 문서에 미디어 쿼리를 직접 정의하는 방법은 다음 두가지이다.

 

첫 번째 방법은 <style> 태그 안에서 media 속성을 사용하여 조건을 지정하고, 그 조건에 맞는 스타일 규칙을 정의하는 것이다.

예를 들어 다음은 media 속성을 사용해 화면 너비가 320px 이하일 때 배경색을 주황색으로 바꾸는 미디어 쿼리이다.

<style media="screen and (max-width: 320px)">
	body {
    	background-color: orange;
    }
</style>

 

두 번째 방법은 스타일을 선언할 때 @media문을 사용해 각 조건별로 스타일을 지정해놓고 스타일을 선택해서 적용하는 것이다. @media문을 사용하는 기본형은 다음과 같다.

<style>
	@media <조건> {
    	<스타일 규칙>
    }
</style>

예를 들어 @media 문을 사용해 화면 너비가 320px 이하일 경우 배경색을 주황색으로 바꾸는 미디어 쿼리는 다음과 같이 사용한다.

<style>
	@media screen and (max-width : 320px) {
		body {
        	background-color: orange;
        }
    }
</style>

 

첫 번째 방법은 <style> 태그 안에서 하나의 조건을 지정하지만, 두 번째 방법은 <style> 태그 안에 여러개으 ㅣ조건에 따른 스타일을 모두 나열해 놓고 그중에서 선택해서 사용한다.