미디어 쿼리

미디어 쿼리 사용하는 방법에 대해 알아보자.

미디어 쿼리

웹사이트의 모바일 버전, PC 버전 각기 다른 CSS를 적용하고 싶을 때 이용한다.

@media는 CSS 블록을 적용하여 미디어 유형에 맞을 때만 CSS 적용할 수 있게 할 수 있다.

미디어 유형

all

모든 장치

인쇄 결과물 / 출력 미리보기 화면.

screen

웹브라우져에서 보여주는 화면.

speech

음성 합성장치.

미디어 유형 지정

미디어 쿼리 사용할 때 미디어 유형 지정하는 방법에 대해 알아보자.

<link>

<link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">

<html> ☞ <head> 태그 안에 사용할 수 있다.

@media

@media screen and (min-width: 900px) { }

CSS 파일, <html> ☞ <head> ☞ <style> 태그 안에 사용할 수 있다.

@import

@import "common.css" screen;
@import url('landscape.css') screen and (orientation:landscape);

CSS 파일, <html> ☞ <head> ☞ <style> 태그 안에 사용할 수 있다.
미디어 유형 외에 미디어 특성도 같이 사용할 수 있다.

이 때 미디어 특정은 MDN Web Docs - 미디어 쿼리 참고하자.

분기점

가장 많이 사용되는 미디어 쿼리 분기점에 대해 알아보자.

기본 예시

데스크탑

태블릿

모바일

/* 데스크탑 (해상도 1024px)*/
@media all and (min-width:1024px)
{ ... }

/* 태블릿 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px)
{ ... }

/* 모바일 (해상도 280px ~ 767px) */
@media all and (min-width:280px) and (max-width:767px) { ... }

갤럭시 폴드 세로로 봤을 때 가로 뷰포트 사이즈가 280px 이다.😢

지금은 분기점을 더 많이 나눠서 사용하고있긴하지만, 이 정도로 설정해놓고 사용해도 충분하다.

참고

MDN Web Docs - 미디어 쿼리

CSS 미디어 쿼리 디바이스별 해상도 분기점