[CSS] 미디어 쿼리란?

 

 

0. 미디어 쿼리란?

 

• Media Query
• 반응형 웹을 디자인할 때, 접근하는 기기에 따라 다른 스타일을 적용해주어야 하는데, 이때 활용할 수 있는 스타일 시트
• 단말기의 유형 (출력물 vs 화면)과, 어떤 특성 혹은 수치(화면  해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 각각의 스타일을 설정할 때 유용
• 미디어 유형과 미디어 특성을 기반으로 동작

 

 

출처: https://www.solodev.com/blog/web-design/media-queries-and-mobile-css-best-practices.stml

 

 

 

 

 

1. 미디어쿼리 작성 방식

 

 

1.1 link 요소 사용

 

• <link> 요소에 사용하게 되면, 특성이 조건에 맞을 때, css 파일을 불러오게 됨
• media 속성의 "screen and (max-wodth: 768px)"의 의미
  : 미디어 타입 : screen / 화면의 최대 너비 : 768px로 지정 => 화면의 너비가 768px 이하 일 때 적용되는 것

 

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

 

 

 

 

1.2 @media 사용

 

• 스타일 시트 내에서 @media 사용
• 설정한 조건이 맞으면 { ... } 안의 스타일 적용

 

@media screen and (max-width: 768px) {
    /* 화면 너비가 768px 이하일 때 */
    body {
      background-color: skyblue;
    }
}

 

 

 

 

 

 

2. 미디어 유형

 

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

 

미디어 쿼리에 작성할 수 있는 미디어 유형은 이렇게 다양하게 존재하나, 대체적으로 all, screen, print 이 세 유형을  가장 많이 사용한다.

만약 미디어 유형을 생략하고 작성할 경우, 기본값인 all 이 적용된다.

 

 

 

 

 

 

3. 논리 연산자

 

연산자	설명
and	여러 조건이 모두 사실일 경우 적용
,	앞 뒤 조건 중 하나만  사실이더라도 스타일 적용
only	미디어 쿼리를 지원하는 웹 브라우저에서만 조건을 인식. ( 지원하지 않는 경우, 미디어 쿼리 실행 X )
not	not 다음에 지정하는 미디어 유형을 제외

 

 

/* 뷰 포트의 너비가 768px 이상이고 1024px 이하면 적용 */
@media all and (min-width: 768px) and (max-width: 1024px) { ... } 

/* 뷰 포트의 너비가 768px 이상이거나 또는 1024px 이면 적용 */
@media all and (width: 768px), (width: 1024px) { ... } 

/* 뷰 포트의 너비가 768px 이상이고 1024px 이하가 아니면 적용 */
@media not all and (min-width: 768px) and (max-width: 1024px) { ... }

 

이렇게  간단한 코드를 통해 미디어 쿼리의 조건에 사용할 수 있는 논리 연산자를 확인해 볼 수 있다.

 

 

 

 

 

 

4. 미디어 쿼리 조건

 

조건문	설명	조건값	min/max 사용 여부
width	웹페이지의 가로 너비	width 속성에서 사용할 수 있는 모든 속성 값	O
height	웹페이지의 세로 높이
Device-width	기기의 가로 너비
Device-height	기기의 세로 높이
orientation	기기의 화면 방향	Portrait (세로) Landscape (가로)	X
Aspect-ratio	화면 비율	브라우저 화면 비율 (1) 브라우저 종횡비 (16 / 9) 기기 해상도(640 / 320)	O
Device-aspect-ratio	단말기의 화면 비율	브라우저 화면 비율 (1) 브라우저 종횡비 (16 / 9) 기기 해상도(640 / 320)
color	기기의 비트 수	8 (bit 단위)
Color-index	기기의 색상 수	128 (색상 수 단위)
monochrome	기기가 흑백일 경우 픽셀당 비트 수	1 (bit 단위)
resolution	기기의 해상도	300dpi/dpcm
scan	TV의 스캔 방식	Progressive/interlace	X
grid	기기의 그리드 / 비트맵	0 (비트맵 방식) / 1(그리드 방식)

 

 

조건문은 조건문이 사실일 경우 스타일을 적용하기 위해 작성하는 조건들을 말한다.

앞서 소개한 논리 연산자인 and 혹은 , 기호를 사용해 두 가지 이상도 작성할 수 있으며, 경우에 따라 생략도 가능하다. 

 

 

 

 

 

5. 주의사항

 

1) 띄어쓰기

 

논리 연산자인  and 구문을 사용할 때, and 구문 뒤에는 항상 공백을 한 칸 띄워야 한다.

공백을 넣지 않고 미디어 쿼리 작성 시 정상적으로 작동하지 않는다.

 

@media all and (min-width:320px){실행문}
/* 띄어쓰기 o => O */

@media all and(min-width:320px){실행문}
/* 띄어쓰기 x => X */

 

 

 

2) min / max 작성 순서

 

min 사용시에는 반드시 크기(width)가 작은 순으로 작성

( min : 최소 혹은 그 이상 / 크기가 점차 커지는 것을 의미 ) 

 

max 사용시에는 반드시 크기(width)가 큰 순으로 작성

( max : 최대 혹은 그 이하 / 크기가 점차 작아지는 것을 의미 ) 

 

@media all and (min-width:320px){실행문}
@media all and (min-width:768px){실행문}
@media all and (min-width:1024px){실행문}

@media all and (max-width:1024px){실행문}
@media all and (max-width:768px){실행문}
@media all and (max-width:320px){실행문}