Media Query(미디어쿼리)의 모든 것 – 1. 기초

글쓴이 임 희제 날짜

part1. Media Query 기초

우리가 지금 읽고 있는 이 글은 모니터 또는 태블릿 등과 같은 미디어 매체를 통해 보여지고 있습니다.
이러한 미디어 매체는 크고 작은 기기 사이즈, 터치 입력 지원 또는 흑백 컬러 출력과 같은 여러 유형과 특성을 가지고 있습니다.
미디어 쿼리는 이처럼 미디어 매체의 다양한 유형과 특성을 확인하고, 특정 유형과 특성 조건에 대하여 원하는 스타일을 정의하는 방법을 제공합니다.

1. Media Query란?

미디어 유형 and (미디어 특성)

미디어 쿼리는 미디어 유형과 미디어 특성으로 구성되는 ‘참’ 또는 ‘거짓’의 값을 가지는 논리식입니다.
만약 미디어 유형이 screen이고, 미디어 특성이 width:768px일 경우

screen and (min-width:768px)

미디어 쿼리는 위와 같이 표현할 수 있으며, 미디어 유형이 screen이고, 너비가 768px 이상인 기기에서 ‘참’의 값을,
그렇지 않은 기기에선 ‘거짓’의 값을 가지게 됩니다.

 
미디어 쿼리를 작성할 때, 미디어 특성은 괄호로 감싸 표현하며 각 미디어 유형과 미디어 특성은 생략이 가능합니다.

screen // 미디어 특성이 생략된 경우
(min-width:768px) // 미디어 유형이 생략된 경우

미디어 유형과 미디어 특성을 모두 작성하고자 할 때는 and 키워드로 미디어 유형과 미디어 특성을 구분 지어줍니다.

screen and (min-width:768px)

또한, 연산자를 활용해 좀 더 복잡하고 다양한 미디어 쿼리를 작성할 수 있습니다.

1-1. Media Queries Level

미디어 쿼리는 1998년 CSS2에서 그 개념이 처음으로 정의되었으며,
그 개념을 계속 보완하고 확장시키며 미디어 쿼리 레벨 3를 시작으로, 미디어 쿼리 레벨 4를 거쳐 미디어 쿼리 레벨 5까지 정의되었습니다.

Media Queries Level 3

미디어 쿼리 레벨 3는 2012년에 W3C 권고안으로 지정되었으며,
너무 오래된 버전의 브라우저가 아닌 이상 모든 브라우저에서 활용이 가능합니다.

Media Queries Level 4

미디어 쿼리 레벨 4는 미디어 쿼리 레벨 3를 바탕으로 확장 및 보완되었으며, 2017년에 후보 권고안으로 지정되었습니다.
아직 후보 권고안 단계로 브라우저에 따라 기능 지원이 안될 수 있으며 미디어 쿼리 레벨 4에서 정의된 미디어 유형, 특성, 연산자 또는 문법을 사용하고자 할 땐, 타깃 브라우저를 지원하는지 먼저 확인해야 합니다.

Media Queries Level 5

미디어 쿼리 레벨 5는 미디어 쿼리 레벨 4를 바탕으로 확장 및 보완되었으며, 2020년에 처음으로 공개되었으며 아직 초안 단계에 머무르고 있습니다.
공개되지 얼마 되지 않아 브라우저 지원율이 높지 않으며 미디어 쿼리 레벨 5에서 정의된 미디어 유형, 특성, 연산자 또는 문법을 사용하고자 할 땐, 타깃 브라우저를 지원하는지 먼저 확인해야 합니다.

1-2. 미디어 유형

미디어 유형은 문서가 어떤 형태로 출력되는지를 의미하며 print, screen, all로 총 3가지의 유형이 있습니다.
print, screen, all 이외에도 tty, tv, projection, handheld, braille, embossed, aural, speech 등의 유형이 있었지만
미디어 쿼리 레벨 4에서 제거되어 사용하지 않습니다.

print

print는 인쇄 기기와 인쇄 미리 보기와 같은 인쇄된 디스플레이를 재현하기 위한 장치를 의미합니다.

위 예시는 인쇄 미리 보기에서 미디어 쿼리인 print가 참이 되어 box가 나타남을 확인할 수 있습니다.

screen

screen은 print가 아닌 모든 기기를 의미합니다.

위 예시에서는 인쇄 미리 보기에서 미디어 쿼리인 screen이 거짓이 되어 box가 사라짐을 확인할 수 있습니다.

all

all은 print 와 screen의 합집합, 즉 모든 기기를 의미합니다.
미디어 유형이 생략될 경우 미디어 유형은 all로 적용됩니다.

1-3. 미디어 특성

미디어 특성은 사용자 에이전트나 디바이스의 구체적 특징을 나타냅니다.

(특성 이름 : 값)

미디어 특성은 항상 괄호로 묶이며, 특성 이름과 콜론, 그리고 값으로 구성됩니다.
각 미디어 특성은 discrete 또는 range 타입으로 분류될 수 있습니다.

  • discrete : 값의 집합을 가지고 있습니다. [true, false]처럼 Boolean일 수도 있고, 특정 키워드의 집합 일 수도 있습니다.
    집합의 값들은 고유한 순서가 없으며, 어떤 값도 서로보다 작거나 크지 않습니다.
  • range : 범위에서 값을 가져옵니다. 값을 비교하여 어느 값이 더 작고 큰지 확인할 수 있으며, min/max 접두사를 붙일 수 있습니다.
    e.g.)
    • (min-width : 768px) : width가 768px 이상
    • (max-width : 1024px) : width가 1024px 이하
    • (min-width : 768px) and (max-width : 1024px) : width가 768px 이상 1024px 이하
    • 미디어 쿼리 레벨 4에서는 min/max 접두사를 붙이지 않고 부등호로도 값의 범위를 정의할 수 있습니다.
      (768px <= width <= 1024px)

아래 표로 Media Queries Level 3부터 Media Queries Level 5까지의 모든 미디어 특성을 정리해 보았습니다.

미디어 특성타입값미디어 쿼리 레벨
width, heightrange<length>레벨 3
aspect-ratiorange<ratio>레벨 3
orientationdiscrete[portrait, landscape]레벨 3
overflow-blockdiscrete[none, scroll, paged]레벨 4
overflow-inlinediscrete[none, scroll]레벨 4
horizontal-viewport-segmentsrange<integer>레벨 5
vertical-viewport-segmentsrange<integer>레벨 5
display-modediscrete[fullscreen, standalone, minimal-ui, browser]레벨 5
resolutionrange<resolution> 또는 infinite레벨 3
scandiscrete[interlace, progressive]레벨 3
griddiscrete<mq-boolean>레벨 3
updatediscrete[none, slow, fast]레벨 4
environment-blendingdiscrete[opaque, additive, subtractive]레벨 5
colorrange<integer>레벨 3
color-indexrange<integer>레벨 3
monochromerange<integer>레벨 3
color-gamutdiscrete[srgb, p3, rec2020]레벨 4
dynamic-rangediscrete[standard, high]레벨 5
nverted-colorsdiscrete[none, inverted]레벨 5
pointerdiscrete[none, coarse, fine]레벨 4
any-pointerdiscrete[none, coarse, fine]레벨 4
hoverdiscrete[none, hover]레벨 4
any-hoverdiscrete[none, hover]레벨 4
nav-controlsdiscrete[none, back]레벨 5
video-color-gamutdiscrete[srgb, p3, rec2020]레벨 5
video-dynamic-rangediscrete[standard, high]레벨 5
scriptingdiscrete[none, initial-only, enabled]레벨 5
prefers-reduced-motiondiscrete[no-preference, reduce]레벨 5
prefers-reduced-transparencydiscrete[no-preference, reduce]레벨 5
prefers-contrastdiscrete[no-preference, less, more, custom]레벨 5
forced-colorsdiscrete[none, active]레벨 5
prefers-color-schemediscrete[light, dark]레벨 5
prefers-reduced-datadiscrete[no-preference, reduce]레벨 5

<length> : 길이 값을 나타냅니다. px, vw, em, rem 등의 단위와 함께 사용됩니다. (ex: 768px)
<ratio> : 두 숫자 값의 비율을 나타냅니다. 두 비율을 ‘/’ 기호로 구분합니다. (ex: 16/9)
<integer> : 정숫값을 나타냅니다.
<resolution> : 해상도 값을 나타냅니다. dpi, dpcm, dppx, x 단위와 함께 사용됩니다.
<mq-boolean> : 0 또는 1의 값만을 가집니다.

1-4. 연산자

연산자를 활용하여 미디어 쿼리의 의미를 바꾸거나, 여러 미디어 쿼리 또는 미디어 특성을 결합할 수 있습니다.

Media Query의 결합 ” , “

두 개 이상의 미디어 쿼리를 콤마( , ) 기호를 사용해 결합할 수 있습니다.

screen and (min-width : 768px), screen and (orientation : portrait)

,를 통해 결합된 미디어 쿼리는 각 미디어 쿼리 중 하나라도 참일 경우 참의 값을 가지게 됩니다.

Media Query의 전체 부정 “not”

미디어 쿼리 앞에 not 키워드를 붙여 미디어 쿼리의 값을 부정할 수 있습니다.

not screen and (min-width : 768px)

not을 사용하면 미디어 쿼리가 참일 경우 거짓, 거짓일 경우 참의 값을 가지게 됩니다.
not을 사용하고자 할 땐 반드시 미디어 유형을 생략하지 않고 함께 작성해야 합니다.

레거시 환경에서 Media Query를 숨기는 “only”

미디어 쿼리의 개념은 HTML4에서 시작되었는데, 당시엔 미디어 유형만 정의되고 미디어 특성이라는 개념은 없었습니다.
이러한 레거시 환경에서 미디어 쿼리가 사용될 경우, 미디어 유형만 읽히게 되어 미디어 특성이 일치하지 않더라도
미디어 쿼리는 참이 되어 원하지 않는 스타일이 적용될 수 있습니다.

only screen and (min-width : 768px)

only를 미디어 쿼리 앞에 붙이면, 레거시 환경에선 only를 미디어 유형으로 인식하고 해당 쿼리는 거짓이 되어 스타일이 적용되지 않고, 온전히 미디어 쿼리가 지원되는 환경에서만 미디어 쿼리가 적용됩니다. only를 사용하고자 할 땐 반드시 미디어 유형을 생략하지 않고 함께 작성해야 합니다.

미디어 특성의 결합 “and”

미디어 유형과 미디어 특성을 구분 짓는 and와 혼동하지 않도록 주의해 주세요.

두 개 이상의 미디어 특성을 and 키워드를 사용해 결합할 수 있습니다.

screen and (min-width : 768px) and (orientation : portrait)

and를 통해 결합된 미디어 특성은 각 특성이 모두 참일 경우 참의 값을 가지게 됩니다.

미디어 특성의 결합 “or” (Media Queries Level 4)

두 개 이상의 미디어 특성을 or 키워드를 사용해 결합할 수 있습니다.

screen and (min-width : 768px) or (orientation : portrait)

or를 통해 결합된 미디어 특성은 각 특성 중 하나라도 참일 경우 참의 값을 가지게 됩니다.

미디어 특성의 부정 “not” (Media Queries Level 4)

미디어 쿼리를 전체 부정하는 not과 혼동하지 않도록 주의해 주세요.

각 미디어 특성을 not 키워드로 부정할 수 있습니다.

screen and (min-width : 768px) and not(orientation : portrait)

미디어 특성 앞에 not 키워드를 붙이면 해당 미디어 특성은 참일 경우 거짓, 거짓일 경우 참이 됩니다.

2. Media Query 적용하기

앞서 미디어 쿼리를 어떻게 작성하는지 알아보았다면, 이젠 어떻게 미디어 쿼리를 적용하는지 알아보겠습니다.
미디어 쿼리는 CSS와 HTML에서 다양하게 사용될 수 있습니다.

2-1. @media

@media는 CSS에서 활용되는 가장 보편적인 미디어 쿼리 사용법입니다. 미디어 쿼리 앞에 @media를 붙이고 중괄호 안에 CSS를 작성하면 미디어 쿼리가 참일 때 작성된 CSS가 적용됩니다.

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

위 예시는 화면의 크기가 줄어들면서 미디어 쿼리인 (max-width: 768px) 가 참이 됨에 따라 @media 괄호 안에 작성된 .box { display:block } 속성이 적용되어 box가 나타남을 확인할 수 있습니다.

2-2. @import

@import는 CSS에서 다른 파일로 작성된 CSS를 가져오기 위해 사용되며, 미디어 쿼리를 함께 사용하면 미디어 쿼리가 참일 때만, 가져온 CSS가 적용됩니다.

@import url(example.css) screen and (max-width: 768px);

하지만 @import로 CSS를 불러오는 것은 렌더링 속도를 늦춰 성능 저하 문제를 일으킬 수 있습니다. 실무에선 사용하지 않으며, 이러한 방법으로도 미디어 쿼리가 사용될 수 있다는 정도만 알고 넘어가시면 될 것 같습니다.

2-3 <link>

HTML에서 <link>는 CSS와 같이 외부 리소스를 불러오기 위해 사용이 되는데요, <link>의 media 속성에 미디어 쿼리를 사용할 수 있습니다.

<link rel="stylesheet" href="./test.css" media="screen and (max-width: 768px)" />

CSS를 불러오는 <link> 태그의 media 속성에 미디어 쿼리를 넣으면, 미디어 쿼리가 참일 때 작성된 CSS가 적용됩니다.

CSS 외에도 rel="preload" 속성과 함께 미디어 쿼리를 활용할 수 있습니다.

<link rel="preload" href="image.png" as="image">

preload는 웹폰트나 배경 이미지 파일과 같이 CSS에서 활용되는 리소스들을 미리 로드하기 위해 사용됩니다. 하지만 preload로 리소스를 미리 로드하면, 해당 리소스가 실제로 사용이 되지 않는 경우에도 리소스를 로드하게 됩니다.

아래 코드처럼 너비 375px 이하에서만 배경 이미지를 사용하고자 할 때,

@media screen and (max-width: 375px) {
  .box {
    background: url("./img/image.png");
    background-size: contain;
  }
}
너비 375px 이하너비 375px 초과

너비가 375px 보다 커 배경 이미지가 사용이 되지 않음에도 배경 이미지가 로드되었음을 확인할 수 있습니다.

이러한 경우, media 속성에 미디어 쿼리를 작성하면 미디어 쿼리가 참일 때만 해당 리소스가 로드 되도록 할 수 있습니다.

<link rel="preload" href="image.png" as="image" media="screen and (max-width: 375px)">
너비 375px 이하너비 375px 초과

<link>에 media="screen and (max-width: 375px)"를 추가함으로써 너비가 375px 보다 커 배경 이미지가 사용이 되지 않을 경우, 배경 이미지가 로드되지 않았음을 확인할 수 있습니다.

2-4 <style>

<style media="screen and (max-width: 768px)">

<style> 태그의 media 속성에 미디어 쿼리를 넣어 해당 미디어 쿼리가 참일 때 <style> 태그 안에 작성된 CSS가 적용됩니다. 실무에선 HTML에 <style> 태그로 CSS 코드를 같이 작성하는 경우가 드물기 때문에 이와 같은 방법은 잘 사용되지 않습니다.

지금까지 미디어 쿼리의 기초 개념을 설명드렸는데요, 이어서 실무에선 어떻게 활용되는지 Media Query 실전 적용에서 알아보겠습니다.

참조

카테고리: Research
태그:

0개의 댓글

답글 남기기

아바타 플레이스홀더

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

관련 글

Research

scrollbar-gutter 와 classic scrollbar 대응하기

아래 사진처럼 스크롤이 없는 페이지에서 스크롤이 발생하는 페이지로 이동 시, 생긴 스크롤로 인해 UI 위치가 변하는 이슈를 겪어본 적 있으신가요? 어떻게 보면 당연한 거 아닌가 싶기도 하지만, 꼼꼼한 디자이너님의 경우 위치가 변하지 않도록 수정해달라 요청이 더보기…

Research

Media Query(미디어쿼리)의 모든 것 – 3. 더 알아보기

Media Query 실전편과 이어집니다. 미디어 쿼리 실전편에 이어, 미디어 쿼리와 관련되어 있는 내용에 대한 설명을 작성하였습니다. 목차 1. SCSS를 활용한 Media Query 앞선 두 관련 글에서 CSS를 사용하여 미디어 쿼리를 작성 및 활용하는 방법에 대해 더보기…

Research

Media Query(미디어쿼리)의 모든 것 – 2. 실전 적용

part2. Media Query 실전 적용 Media Query 기초편과 이어집니다. 미디어 쿼리를 사용하면 실행 중인 기기나 조건에 따라 스타일을 다르게 지정할 수 있고,반응형 웹, 다크 모드와 같은 다채롭고 트렌디한 웹 구현이 가능해집니다.이렇게 활용도 높은 미디어 쿼리를 더보기…