[CSS] 미디어 쿼리(media query) 사용법 (반응형 웹)

웹 사이트에 접속할 수 있는 다양한 디바이스들이 있습니다. 그리고 디바이스마다 화면의 크기가 다르죠. 이렇게 다양한 크기를 가진 모든 디바이스를 모두 같은 UI로 웹 사이트를 표현한다면 굉장히 비효율적일 것입니다. 그래서 반응형 웹 디자인은 사이트에 접근하는 기기의 해상도에 따라 서로 다른 스타일을 적용해주어야 하며 이는 CSS의 미디어 쿼리를 활용해서 각각의 디바이스의 크기에 맞는 최적의 UI들을 따로 설정해 줄 수 있습니다.

 

 

 미디어 쿼리란? 

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

미디어 쿼리(Media Query)는 웹 개발에서 사용되는 CSS 기술로써 반응형 웹 디자인(Responsive Web Design)의 핵심 요소로 사용됩니다. 미디어 쿼리는 미디어 유형(media type)과 미디어 특성(media feature)을 기반으로 동작합니다. 미디어 유형은 장치의 종류를 나타내며, 예를 들어 스크린(screen), 프린터(printer), 스피커(speech) 등이 있습니다. 미디어 특성은 장치의 속성이나 상태를 기반으로 하며, 화면 너비, 장치 방향, 픽셀 밀도 등을 포함할 수 있습니다. 미디어 쿼리는 CSS의 @media 규칙을 사용하여 정의됩니다.

 

@media screen and (max-width: 768px) {
  /* 화면 너비가 768px 이하인 경우에만 적용되는 스타일 */
  body {
    background-color: blue;
  }
}

위의 예시는 화면 너비가 768px 이하인 스크린 장치에 대해서만 body 요소의 배경색을 블루(blue)로 설정합니다. 이렇게 미디어 쿼리를 사용하면 특정 화면 사이즈마다 다른 스타일을 적용할 수 있습니다. 

 

미디어 유형의 종류

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

미디어 유형에는 all(모든 매체), print(프린터 기기), screen(컴퓨터, 태블릿, 스마트폰 등), speech(스크린 리더) 등이 있습니다. 이 중 all, screen, print를 가장 많이 쓰이는데 생략이 가능해서 생략하셔도 됩니다. 생략할 경우 기본값은 all입니다.

 

미디어 쿼리 연산자

연산자 설명
and 앞의 소스처럼 조건을 계속 추가할 수 있습니다.
,(쉼표) 동일한 스타일 유형을 사용할 미디어의 유형과 조건이 있다면 쉼표를 이용하여 추가합니다.
only 미디어 쿼리를 지원하는 웹 브라우저에서만 조건을 인식하게 합니다. 이 키워드를 사용하면 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않습니다.
not not 다음에 지정하는 미디어 유형을 제외합니다. 예를 들어 'not tv'라고 지정한다면 TVz를 제외한 나머지 미디어 유형에만 적용됩니다.

미디어 쿼리 문법의 only | not에서는 거의 무조건 only를 쓰고 이는 생략이 가능해서 보통 생략해서 사용합니다. 생략할 경우 기본값은 only입니다. 그리고 and는 ‘AND’ 연산을 수행해 앞뒤 조건을 모두 만족해야 한다는 것을 의미합니다. 조건문은 두 가지 이상이 들어갈 수 있는데 and나 , (콤마)로 연결해 줍니다.

 

미디어 쿼리 조건

가로, 세로 값 속성 설명
width, height 웹 페이지의 가로 너비, 세로 높이
min-width, min-height 웹 페이지의 최소 너비, 최소 높이
max-width, max-height 웹 페이지의 최대 너비, 최대 높이
device-width, device-height 단말기의 가로 너비, 세로 높이
min-device-width, min-device-height 단말기의 최소 너비, 최소 높이
max-device-width, max-device-height 단말기의 최대 너비, 최대 높이
orientation : portrait 단말기 세로 방향
orientation : landscape 단말기 가로 방향
aspect-ratio 화면 비율(width 값 / height 값)
min-aspect-ratio 최소 화면 비율
max-aspect-ratio 최대 화면 비율
device-aspect-ratio 단말기 화면 비율(width 값 / height 값)
min-device-aspect-ratio 단말기 최소 화면 비율
max-device-aspect-ratio 단말기 최대 화면 비율
color 색상 비트 수
min-color 최소 색상 비트 수
max-color 최대 색상 비트 수

미디어 쿼리에 들어갈 수 있는 조건들은 다양합니다. 실제 웹 문서의 내용이 화면에 보이는 영역을 뷰포트라고 합니다. 뷰 포트의 너비와 높이를 미디어 쿼리의 조건으로 사용할 수 있습니다. 이때 height(높이) 값은 미디어에 따라 달라질 수 있기에 주의하셔야 합니다.

 

 미디어 쿼리 사용 예제 

See the Pen 미디어쿼리 예제 by wjdxo513 (@wjdxo513) on CodePen.

 

미디어 쿼리를 작성할 때 서로 다른 CSS를 적용할 화면의 크기를 중단점(breakpoints)이라고 합니다. 위의 예제에서는 800 초과, 569px, 381px, 380 이하로 중단점을 설정하였습니다. 제 블로그에서 가장 직관적으로 확인할 수 있는 크기라고 생각했기 때문입니다. 중단점이 세분화되어 있을수록 좋으나 시중의 모든 기기들을 반영하기에는 무리가 따르기 때문에 최소한 모바일, 태블릿, PC 이렇게 3가지로 구분해서 처리를 하는 경우가 많습니다. 각 디바이스의 스크린 표준 사이즈는 아래 이미지를 참고해주세요.

 

중단점 표준 크기

 

미디어 쿼리 사용 전략

최근에는 웹 사이트의 접속 디바이스가 모바일이 가장 많기도 하고 화면이 작은 모바일에서 제약 조건이 더 많기 때문에 모바일 UI를 우선시하고 점차 크기를 키워나가면서 UI를 구성합니다. 이렇게 모바일 화면을 우선으로 생각하여 min-width, 좁은 해상도부터 시작하는 것을 모바일 퍼스트(mobile first)라고 하며 반대로 컴퓨터 화면을 우선으로 생각할 때 max-width, 넓은 해상도부터 시작하는 것을 데스크톱 퍼스트(desktop first)라고 합니다. 

댓글

Designed by JB FACTORY