여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. 미디어 쿼리
미디어 쿼리
3년전 작성
3년전 수정

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

미디어 쿼리

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

<link> 태그 이용하거나 <style>에서 @media 혹은 @import 사용하여 미디어 쿼리를 사용할 수 있다.

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

<link>와 @import는 미디어 유형에 따라 CSS를 어떤걸 이용하라고 설정할 수 있다.

미디어 유형
all
:
모든 장치
print
:
인쇄 결과물 / 출력 미리보기 화면.
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 이다.😢

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

참고

관련 포스트
미디어 쿼리 - 현재글

Mingg`s Diary
밍구
밍구
공부 목적 블로그