css

CSS - 미디어쿼리

2월 27, 2019
미디어쿼리는 반응형 웹사이트를 만드는데 있어 중요한 요소 중 하나입니다.

안드로이드나 테블릿, 아이폰 등 기기에 따라 HTML 문서 내용을 변경하지 않고도 여러 디바이스에 맞는 페이지를 만들 수 있습니다.

기본적인 형식은 다음과 같습니다.

@media [not | only] 미디어 타입 and (속성: 값) and (속성: 값) ...

/* 기기 화면이 최소 320px 이고 900px 이하이면 실행하라. */
@media screen and (min-width: 320px) and (max-width: 900px) {
  body { background: #111; }
}




미디어쿼리를 지원하지 않는 브라우저

시작하기 전에 미디어쿼리를 지원하지 않는 낮은 버전의 브라우저를 위해 아래 코드를 <head> ~ </head> 사이에 넣어 주세요. 익스플로어 9 이하 버전은 미디어쿼리를 지원하지 않습니다.

https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js

<!doctype html>
<html>
 <head>
 <!--[if lt IE 9]>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
 <![endif]-->
 </head>

 <body> ... </body>
</html>

주의할 부분은 미디어 타입에 all 이나 and 를 생략하면 작동하지 않습니다.




미디어쿼리 지정

미디어쿼리를 지정하는 방법에는 몇 가지 있습니다.

<link> 요소에 미디어쿼리를 사용하려면 media 속성을 이용하세요.

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

<link rel="stylesheet" media="print" href="style.css">

@import 해서 사용할 경우 다음처럼 정의하세요.

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

<style> 에 사용할 경우 다음과 같이 하세요.

<style>
@media screen and (max-width: 500px) {
  body { background: yellow; }
}
</style>




논리 연산자

미디어쿼리는 논리 연산자를 지원합니다.

설 명
and 여러 미디어 타입을 하나로 합침
not 미디어 타입 조건이 거짓일 때 스타일을 적용
only 미디어쿼리를 지원하지 않는 브라우저이면 해당 스타일을 무시
콤마(,) 미디어 타입 조건 중 하나라도 일치하면 스타일을 적용
논리 연산자 or 처럼 동작합니다.

미디어쿼리 타입 앞에 논리 연산자 NOT 이나 ONLY 가 올 수 있습니다.

@media only screen and (max-width: 500px) { }

<link rel="stylesheet" media="only screen and (color)"
    href="style.css" />

미디어쿼리 타입 앞에 not 이 왔으니 컬러를 지원하지 않는 환경이라면 실행하라는 의미가 되겠네요.

@media not screen and (color) { 내용 }

만약 미디어쿼리를 지원하지 않는 낡은 브라우저라면 해당 스타일이 적용되지 않도록 앞에 only를 붙여 주세요.

미디어쿼리 타입을 지원하는 브라우저는 only 를 무시하고 스타일을 적용합니다.

@media only screen and (min-width: 320px) 
    and (max-width: 900px) { 내용 }

여러 개의 미디어쿼리에 대해 동일한 스타일을 한꺼번에 적용하려면 콤마를 적어 주세요.

@media screen and (max-width: 320px), print and (color) { 내용 }




미디어쿼리 타입

미디어쿼리에는 다음이 올 수 있습니다.

타 입 설 명
all 모든 기기 장치. 기본값
aural 음성 신디사이저 (또는 speech 라고 부름)
스크린 리더나, 음성 브라우저와 같은 화면 낭독기
brille 점자 리더 장치
embossed 점자 프린터 페이지
handheld 휴대용 전화기, PDA 장치
화면 크기와 대역폭이 한정되어 있는 장치
print 인쇄물, 인쇄 미리보기에서 보여지는 화면.
projection 프로젝터로 보여주는 프레젠테이션
screen PC, 테블릿, 스마트폰 같은 장치
tty 텔레타이프, 컴퓨터 터미널, 글자 폭이 한정되어 표시되는 미디어 장치
tv 영상과 음성이 출력(TV 등)되는 장치
단, 낮은 해상도와 제한된 스크롤 기능을 갖는 장치

컬러 환경의 기기라면 스타일을 적용합니다.

@media screen and (color) { 내용 }

모든 기기의 화면이 900px이고, 컬러이면 적용합니다.

@media all and (max-width: 900px) and (color) { 내용 }




미디어쿼리 속성

미디어쿼리 속성은 다음과 같습니다.

속 성 설 명
width 창의 너비
min- 이나 max- 접두어 사용 가능함.
height 창의 높이
min- 이나 max- 접두어 사용 가능함.
device-width 스크린이나 브라우저의 실제 전체 너비
min- 이나 max- 접두어 사용 가능함.
device-height 스크린이나 브라우저의 실제 전체 높이
min- 이나 max- 접두어 사용 가능함.
orientation viewport 의 방향을 지정.
장치를 기울일 때 방향이 변경되는 장치의 경우 방향이 변경되었을 때 지정.
  • portrait: 세로 방향으로 화면전한이 되었을 때
  • Landscape: 가로 방향으로 화면전환이 되었을 때
aspect-ratio 창의 가로세로비율.
<수평방향> / <수직방향>의 픽셀 수의 비율
min- 이나 max- 접두어 사용 가능함.
device-aspect-ratio 스크린이나 브라우저의 실제 가로세로 비율.
<수평방향> / <수직방향> 으로 지정.
min- 이나 max- 접두어 사용 가능함.
color 컬러 기기라면 픽셀을 표시하는데 사용하는 비트 수. (0은 흑백)
min- 이나 max- 접두어 사용 가능함.
color-index 기기가 사용하는 색상 수.
min- 이나 max- 접두어 사용 가능함.
monochrome 흑백 기기라면 해당 명암의 비트 수.
모노크롬이 아니라면 값은 0이 대입됨. (0 은 컬러)
min- 이나 max- 접두어 사용 가능함.
resolution 해상도.
해상도의 단위는 dpi | dpcm | dppx 로 지정
min- 이나 max- 접두어 사용 가능함.


color 속성

흑백이 아닌 모든 기기라면 스타일을 적용합니다.

@media all and (color) { 내용 }

최소 4비트 이상인 장치라면 스타일을 적용합니다.

@media all and (min-color: 4) { 내용 }


color-index 속성

최소 256 색상을 지원하는 장치라면 스타일을 적용합니다.

@media all and (min-color-index: 256) { 내용 }


aspect-ratio 속성

화면 비율이 1:1, 즉 직사각형 비율이면 스타일을 적용합니다. <수평>/<수직>정수입니다.

@media screen and (min-aspect-ratio: 1/1) { 내용 }


resolution 속성

300dpi 이상의 해상도라면 스타일을 적용합니다.

@media screen and (min-resolution: 300dpi) { 내용 }

이와 관련된 자세한 사항을 더 알고 싶다면 MDN 문서를 참고할 수 있습니다.




브레이크 포인트

미디어 쿼리를 사용할 때 주의할 점은 브레이크 포인트의 수와 레이아웃 패턴일 것입니다.

어느 일정한 화면 크기가 되면 레이아웃을 바꿀 수 있게 만들어야 하고, 이 레이아웃이 바뀌는 화면 크기의 기준점을 브레이크 포인트라 합니다.

브레이크 포인트 설정 크기를 어떻게 정해야 하며, 몇 개의 브레이크 포인트를 사용할 것인가를 결정할 필요가 있습니다.

가장 일반적인 브레이크 포인트의 수는 2~3개 정도가 됩니다. 스마트폰, PC, 그리고 테블릿 정도가 되겠네요.

지금은 기기 종류가 많고 종류마다 크기가 각기 달라서 모든 종류의 기기의 크기에 맞게 브레이크 포인트를 줄 수 없습니다.

따라서 크게 2~3개 정도로 나누어 관리하는 게 유리합니다.

스마트폰의 최소 브레이크 포인트는 480px 나 640px, 768px, PC의 경우 최대 브레이크 포인트는 940px, 960px, 978px, 1024px 정도입니다.

미디어 쿼리를 사용해 레이아웃을 사용할 경우 다음의 방식으로 구성하면 됩니다.

@media screen and (max-width: 940px) {
  내용
}

@media screen and (max-width: 640px) {
  내용
}

@media screen and (max-width: 480px) {
 내용
}

위 예제처럼 큰 브레이크 포인트를 먼저 기술하고, 작은 브레이크 포인트를 나중에 기술하면 먼저 씌어진 문법이 나중에 씌어진 문법에 덮어쓰기 때문에 순차적으로 스타일이 적용됩니다.




예제

@viewport {
    width: auto;
}

@media screen and (min-width: 400px) {
    div { color: red; }
}

@media screen and (max-width: 400px) {
    div { color: green; }
}

@viewport {
    width: 397px;
}

@media screen and (width: 397px) {
    @viewport {
        width: 500px;
    }
}

@media screen and (width: 397px) {
    div { color: green; }
}

Tag:

0 Comments

0 댓글