미디어 쿼리
미디어 쿼리는 웹 페이지에 접속하는 기기에 따라 다른 CSS 스타일을 적용하기 위해 사용합니다. 미디어 쿼리를 사용하게 되면 접속 기기의 화면 크기에 맞춘 레이아웃을 보여줍니다.
다음 세 장의 사진은 구글에 각기 다른 기기를 사용해서 접속한 모습인데요. 위에서 부터 PC, 태블릿, 스마트폰에서의 모습입니다.
같은 구글임에도 불구하고 다른 웹 페이지의 구성을 보여주죠?
화면이 작아질수록 상단 메뉴 사이 간격이 좁아짐을 볼 수 있습니다. 이처럼 기기마다 사이트의 모양이 바뀌도록 해주는 것이 미디어 쿼리입니다.
미디어 쿼리 사용하기
그러면 미디어 쿼리를 어떻게 사용하는지 알아보겠습니다.
미디어 쿼리는 @media 속성으로 지정할 수 있습니다.
@media [only|not] 미디어 and 조건 ... {}only와 not은 선택 옵션입니다. only는 미디어 쿼리가 지원되지 않는 브라우저에서 미디어 쿼리를 무시하도록 하는 키워드이고, not은 다음에 지정하는 미디어에 속성을 지정하지 않도록 제외하는 키워드입니다.
and는 추가적인 조건을 넣는데 사용되는 키워드입니다.
미디어
중간에 미디어를 지정한다고 했는데, 미디어는 미디어 쿼리를 작성하기 위해 미디어 종류를 알려주는 역할을 합니다. 왜냐하면 미디어 쿼리가 미디어에 따라 다른 스타일을 적용할 것이기 때문이죠!
미디어의 종류에는 다음과 같은 것들이 있습니다.
| 미디어 | 설명 |
|---|---|
| all | 모든 미디어 유형 |
| 인쇄 장치 | |
| screen | PC와 스마트폰의 화면(스크린) |
| tv | 음성과 영상이 동시 송출되는 tv |
| aural | 화면을 읽고 소리로 출력해주는 장치 |
| braille | 점자 표시 장치 |
| handheld | 태블릿(패드)같은 장치(handheld; 손에 드는 장치) |
| projection | 프로젝터 |
| tty | 디스플레이 기능이 제한된 장치. tty에서는 px 단위의 사용이 불가능 합니다. |
| embossed | 점자 프린터 |
미디어 쿼리의 조건
앞에서 미디어 쿼리를 알아볼 때 and로 연결하는 조건이 있었습니다. 이 조건에는 어떤 속성들이 들어갈 수 있는지도 알아보겠습니다.
웹 페이지의 width와 height
지난 시간에 반응형 웹 페이지를 소개하면서 뷰포트를 다뤘었는데요. 이 뷰포트의 width와 height를 조건으로 사용할 수 있습니다.
width와 height 조건에는 다음과 같은 속성들이 있습니다.
| 속성 | 설명 |
|---|---|
| width, height | 너비와 높이를 지정 |
| min-width, min-height | 최소 너비와 최소 높이를 지정 |
| max-width, min-height | 최대 높이와 최대 높이를 지정 |
실제로 사용은 다음과 같이합니다.
/*화면 너비가 최소 980px인 스크린에 스타일을 적용 */
@media screen and (minwidth: 980px) {}기기의 width와 height
이번에는 기기(단말기, device)의 width와 height입니다. 방금 전에 본 것은 웹 페이지의 너비와 높이였고요. 헷갈리시면 안됩니다.
왜 굳이 기기의 너비, 높이와 웹 페이지의 너비, 높이를 따로 조건을 두냐면 기기의 너비와 웹 페이지의 너비가 다른 경우가 많습니다. 그래서 기기의 너비와 높이를 고려해야하는 경우가 존재하기도 합니다.
속성에 device가 붙는다는 점을 제외하면 속성은 비슷합니다.
| 속성 | 설명 |
|---|---|
| device-width, device-height | 기기의 너비와 높이를 지정 |
| min-device-width, min-device-height | 기기의 최소 너비와 최소 높이를 지정 |
| max-device-width, min-device-height | 기기의 최대 높이와 최대 높이를 지정 |
화면 회전
스마트폰이나 태블릿을 사용하시면서 화면 회전 자주 하시나요? 저같은 경우 웹 브라우저를 볼 때 스마트폰은 무조건 세로로, 태블릿은 가로로 회전시켜서 사용하는 습관이 있습니다.
이처럼 기기의 방향에 따라서 width와 height가 달라집니다. 웹 페이지 또한 회전한 크기에 맞춰 페이지 레이아웃을 구성해야하므로, 화면의 회전을 감지하는 속성이 존재합니다.
| 속성 | 설명 |
|---|---|
| orientation | 단말기의 회전을 감지합니다. |
orientation은 가로/세로 모드를 감지하기 위하여 속성 값을 두 가지 지원합니다. 적용하고자 하는 화면의 가로모드 세로 모드에 따라 다음 속성값을 적용하시면 됩니다.
- portrait: 세로 모드
- landscape: 가로 모드
중단점
모든 화면에 일일히 지정할 수는 없으니 특정 범위를 적용해놓고 해당 범위에 따라서 다른 CSS를 적용하게 되는데, 이 범위에 기준이 되는 곳을 중단점(break point)라고 합니다.
중단점에 따라서 적용되는 CSS 스타일이 달라지게 됩니다. 중단점은 일반적으로 화면 크기를 기준으로 삼습니다. 그래서 스마트폰, 태블릿, 데스크탑으로 구분하는게 보통입니다.
모바일 퍼스트
모바일, 스마트폰 같은 경우 가장 좁은 화면 크기를 가지고 있기에 태블릿이나 데스크탑에 비해 웹 페이지를 구성할 때 더 많은 애로사항을 겪습니다.
그래서 모바일의 CSS 구성을 가장 먼저 하고 태블릿, 데스크탑의 크기와 사양에 맞춰서 추가적인 스타일을 넣게 됩니다. 이렇게 모바일의 스타일을 먼저 개발하는 방식을 모바일 퍼스트라고 합니다.
다시 중단점으로 돌아와서 스마트폰, 태블릿, PC 모두 화면크기가 제각각이지만, 일반적으로 다음과 같은 크기를 중단점으로 놓습니다.
스마트폰
스마트폰은 모바일 퍼스트 기법을 적용하면 미디어 쿼리 없이 기본 CSS 문서를 작성하게 됩니다. 만약 모바일 퍼스트 기법 없이 미디어 쿼리를 적용하고 싶다면 min-width의 세로를 portrait 320px, 가로를 landscape 480으로 지정합니다.
태블릿
태블릿은 세로가 768px 이상, 가로가 1024px이상인 경우 태블릿으로 지정합니다.
데스크탑
데스크탑은 화면 크기가 가로세로 1024px이상일 때 데스크탑으로 중단점을 지정합니다.
미디어 쿼리 적용
그럼 이제 미디어 쿼리를 어떻게 적용하는지 알아보겠습니다. 미디어 쿼리를 적용하는 방식은 직접 정의와 외부 파일 임포트 두 가지 방식이 있습니다.
직접 정의하기
직접 정의는 말그대로 미디어 쿼리를 선언하고 스타일을 적는 것을 의미합니다.
@media 미디어 {
/*
스타일을 여기에 작성
*/
}외부 파일 임포트
외부 파일 임포트는 외부에 미디어 쿼리용 css 파일을 따로 정의해서 임포트를 하는 방식입니다. 각 미디어 조건에 따라 다른 CSS파일을 정의하고 <link> 또는 @import를 이용해서 삽입합니다. 두 방식 중에서는 <link>태그를 사용한 것을 권장했는데요. 구체적인 내용은 두 방식을 비교한 포스트를 참조해주세요.
먼저, <link>태그를 사용한 미디어 쿼리 외부 파일 임포트입니다.
<link rel='stylesheet' media='미디어와 조건' href='파일 경로'>다음은 @import를 사용한 방식입니다.
@import url('파일경로') 미디어와 조건