티스토리 뷰

미디어 쿼리 (Media Queries) 란?



미디어 쿼리란 반응형 웹을 구현하기 위해 필요한 기술 중에 하나로,

컴퓨터나 기기에게 '너는 어떤 종류의 미디어니?' 또는 '미디어의  화면 크기는 어느 정도나 되니?' 라고

미디어에게 질문하고 감지하여 웹사이트를 변경하는 기술이다.


기기의 종류 뿐만이 아니라 해상도, 비트 수, 가로/세로 여부 등 세밀한 부분까지 감지가 가능하여 유용하다.







미디어 쿼리의 기본 용법



미디어 쿼리 작성을 할 때는 기본적인 순서와 규칙을 따라야 한다. 

다음과 같은 구조가 기본이다.






  • @media 
    미디어 쿼리 문법의 시작을 선언하는 부분이다.


  •  조건문 
    조건문에서는 뒤따라 올 실행문을 실행시킬 조건을 명시해준다.
    미디어의 유형이나 속성 등을 적어준다.
    어떤 종류가 있는지는 이따 자세히 알아보도록 한다.
    미디어 유형이 아닌 조건문은 ( 괄호 ) 안에 넣어 주어야 한다.

    중복되는 조건은 and나 ,로 나열시켜주어야 하는데,
    and는 앞뒤 조건이 모두 사실일 때 뒤에 따라오는 실행문을 실행시키라는 의미고,
    ,(콤마)는 앞뒤 조건 중 하나만 사실이더라도 실행문을 실행시키라는 OR의 의미이다.


  • 실행문
    실행문은 미디어 유형이나 해상도가 조건과 일치할 때 실행되는 CSS이다.



대소문자를 구분하지는 않지만 띄어쓰기는 반드시 주의해야한다.

특히, 논리 연산자 중 하나인 and 구문 뒤에 항상 공백을 한 칸 띄어줘야한다.






예시 구문


예시 구문을 보면 문법에 대해 이해하기가 좀더 쉬울 것 같다.



예시 1.

모든 미디어 기기 중 브라우저 가로 길이가 320px 이상이면 다음을 실행하라.  

@media all and (min-width: 320px) { }



예시 2.

가로 너비가 320px 이상이면서 768px 이하일 때 실행문을 실행하라.

@media (min-width:320px) and (max-width:768px) {  }



예시 3.

컴퓨터 화면 장치 또는 스마트 기기의 화면 중

기기의 가로 너빗값이 640px 이하이면서 단말기의 화면 비율이 9/16이거나,

기기의 가로 너빗값이 640px 이하이면서 단말기의 화면 비율이 16/9인 경우에 다음을 실행하라.

@media screen and (max-device-width:640px) and (device-aspect-ratio:9/16), screen and (max-device-width:640px) and (device-aspect-ratio:16/9){ }


(*유의사항* : 콤마(,) 연산자가 OR의 역할을 하지만, 콤마 앞뒤로 분리된 조건들은 서로 공유하지 않기 때문에

같은 조건이라도 반복적으로 값을 작성해줘야 한다. (참고 페이지 : naradesign) ) 








실행문을 실행 여부를 판단할 때,

어떤 미디어 유형과 조건문을 실행 조건으로 사용할 수 있을까?



위에서 간단히 미디어 쿼리의 문법과 예시를 살펴봤는데,

이제 내가 원하는대로 미디어 쿼리를 사용하기 위해서 조건판별을 위한 옵션이 어떤 것이 있는지 자세히 알아보자.





1) only | not


미디어 유형 조건 앞에 오는 only나 not에 대해 알아보자.

not은 뒤에 오는 모든 조건을 부정하는 연산을 하는 것이고,

only는 미디어 쿼리를 지원하는 사용자 에이전트만 미디어 쿼리 구문을 해석하라는 명령이다.


이 only나 not이 오는 자리에 아무 것도 입력하지 않으면

기본값은 only로 처리가 되므로 일반적으로 생략하는 편이다.






2) 미디어 유형


미디어 유형의 종류를 설정하면, 미디어 쿼리를 해석해야할 대상 미디어를 선언해주는 것이다.

미디어 유형에는 11가지의 분류가 있다.

이 중에서 자주 쓰이는 것은 all, print, screen이 있다.

all 키워드는 모든 미디어가 이 미디어 쿼리를 해석해야함을 의미한다.

all은 생략이 가능하고 생략시 기본값이 all이다.


 기기명

설명 

 all 

모든 장치 

 print 

인쇄 장치 

 screen 

컴퓨터 화면 장치 또는 스마트 기기의 화면 

 tv 

영상과 음성이 동시에 출력되는 장치 

 projection 

프로젝터 장치 

 handheld 

손에 들고 다니는 소형 장치 

 speech 

음성 출력 장치 

 aural 

음성 합성 장치 (화면을 읽어 소리로 출력해 주는 장치) 

 embossed 

점자 인쇄 장치 (화면을 읽어 종이에 점자를 찍어내는 장치) 

 tty 

디스플레이 기능이 제한된 장치 

 braille 

점자 표시 장치 





3) (조건문)


미디어 쿼리의 조건문은 프로그래밍 언어와 같이 =, >, < 등의 연산자를 사용하지 않는다.

연산을 하기 위해 min-이나 max-를 붙여서 최대값, 최소값을 판단한다.

괄호 안에 넣는 조건문은 and나 콤마를 이용하여 두 가지 이상 작성할 수 있으며 생략도 가능하다.

(조건문)에 들어올 수 있는 조건문은 다음 표를 참고하자.



 조건문

설명 

조건값 

min/max 사용 여부 

width 

 웹페이지의 가로 너빗값 

 width 속성에서

 사용할 수 있는 

 모든 속성값 

 사용함 

height

 웹페이지의 세로 높잇값 

device-width 

 기기의 가로 너빗값 

 (단말기의 물리적인 가로 길이)

device-height 

 기기의 세로 높잇값 

 (단말기의 물리적인 세로 길이)

orientation 

 기기의 화면 방향 

 (width와 height를 구하여

 width 값이 길면 landscape로,

 height 값이 길면 portrait로 판단)

 portrait (세로 방향) 

 사용 안 함

 landscape (가로 방향) 

aspect-ratio 

 화면 비율 

 (width / height)

 브라우저 화면 비율(1) 

 사용함 

 브라우저 종횡비(16/9) 

 기기 해상도(640/320) 

device-aspect-ratio

 단말기의 물리적인 화면 비율

 기기의 화면 비율(1) 

 기기 종횡비(16/9) 

 기기 해상도(640/320) 

color 

 기기의 비트 수  

 8(bit 단위) 

 자연수를 쓰지만 2의 지수를 뜻함

 (1을 쓰면 2, 2를 쓰면 4, 3을 쓰면 8)

color-index 

 기기의 색상 수 

 (단말기에서 사용하는 최대 색상수)

 128(색상 수 단위) 

monochrome 

 기기가 흑백일 대 픽셀당 비트 수

 (흑백 컬러만을 사용하는 단말기의

 흰색과 검은색 사이의 단계 판단) 

 1(bit 단위) 

resolution 

 기기의 해상력

 (기기가 지원하는 해상도를 판단

 resolution은 아이폰3,4 같이

 화면의 크기는 같지만 해상도가

 다른 경우를 감지할 때 필요)

 300dpi (dpi : 인치당 도트 수)

 dpcm (dpcm : cm당 도트 수)

scan 

 TV의 스캔 방식 

 progressive/interlace 

 사용 안 함

grid 

 기기의 그리드/비트맵

 0(비트맵 방식)/1(그리드 방식) 








반응형 웹사이트를 위한 CSS 미디어 쿼리 예시


구글링을 해보면 반응형 웹사이트 구현을 위한 미디어 쿼리 예시들이 정말 많이 나와 있다.

크게 3가지 정도로 나눈 것부터, 각각의 모바일 폰과 가로보기, 세로보기를 각각 나눈 것까지 매우 다양하다.

사이트의 디테일을 최고로 올리고 싶다면 각 기기별로 대응할 수 있게끔 자세하게 미디어 쿼리를 짜면 될 것 같다.

원하는대로 스타일이 지정되기 위해서 min이나 max등 앞의 접두어에 따라 미디어 쿼리를 넣는 순서를 유의해야한다.


구글링해서 나온 몇 가지 미디어 쿼리 예시를 소개한다.



1. 해상도 구획을 크게 3분류로 나누어 스타일 지정하기 

@이지스퍼블리싱, 반응형 웹디자인



지금 공부하고 있는 반응형 웹디자인 책에서는 비교적 간단한 형태인,

3가지 범위로 나눈 미디어 쿼리를 적용하고 있다.

@media all and (min-width:320px)

    /* 스타일 지정 부분*/
}

@media all and (min-width:768px){ 

    /* 스타일 지정 부분*/
}

@media all and (min-width:1024px){ 

    /* 스타일 지정 부분*/
}






2. 스마트폰 / 태블릿 / 랩탑 / 데스크탑 나누어 지정하기

@naradesign


naradesign 블로그에서 예시로 제공되는 템플릿이다.

All, Mobile, Tablet, Desktop으로 기기별로 분류되어있다.


/* All Device */ /* 모든 해상도를 위한 공통 코드를 작성한다. 모든 해상도에서 코드가 실행됨.*/



/* Mobile Device */ /* 768px 미만 해상도의 모바일 기기를 위한 코드를 작성한다.

모든 해상도에서 코드가 실행된다.

미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않는다. */



/* Tablet & Desktop Device */ @media all and (min-width:768px) { /* 사용자 해상도가 768px 이상일 코드가 실행됨.

태블릿과 데스크탑의 공통 코드를 작성한다. */
}


/* Tablet Device */ @media all and (min-width:768px) and (max-width:1024px) {

/* 사용자 해상도가 768px 이상이고 1024px 이하일 코드가 실행됨.

아이패드 또는 비교적 작은 해상도의 랩탑이나 데스크톱에 대응하는 코드를 작성한다. */ }


/* Desktop Device */

@media all and (min-width:1025px) {

/* 사용자 해상도가 1025px 이상일 때 이 코드가 실행됨.

1025px 이상의 이상의 랩탑 또는 데스크탑에 대응하는 코드를 작성한다. */

}






3. 스마트폰 / 태블릿 / 랩탑 / 데스크탑 

+ 가로 보기 | 세로 보기 나누어 지정하기

@onlinedesignteacher.com




위의 그림과 같이 일반적으로 기기들이 위치하는 해상도 구간을 좀더 세분화하여 미디어 쿼리를 지정하는 방법이다.


/*Responsive Styles*/



/* Smartphones (portrait) ---------------- */

@media only screen 

and (max-width : 320px)

{

/* Add Your CSS Styling Here */

}


/* Smartphones (landscape) ---------------- */

@media only screen 

and (min-width : 321px)

and (max-width : 767px)

{

/* Add Your CSS Styling Here */

}


/* Tablets (portrait) -------------------- */

@media only screen 

and (min-device-width : 768px) 

and (max-device-width : 1024px) 

and (orientation : portrait)

{

/* Add Your CSS Styling Here */

}



/* Tablets (landscape) ------------------- */

@media only screen 

and (min-device-width : 768px) 

and (max-device-width : 1024px) 

and (orientation : landscape)

{   

/* Add Your CSS Styling Here */

}


/* Old Desktops and laptops ------------------ */

@media only screen 

and (min-width : 1025px) 

{

/* Add Your CSS Styling Here */

}


/* Desktops ------------------ */

@media only screen 

and (min-width : 1201px) 

{

/* Add Your CSS Styling Here */

}





기타


이 외에 더 디테일하게 지정하고 싶다면 미디어 쿼리 스니펫(Media Query Snippets)이나

CSS-TRICKS의 Media Queries for Standard Devices 등을 참고해보자.

이 외에도 구글에서 media query code template 이라고 검색을 하면 많은 검색 결과가 나온다.


아래의 그림은 참고하기 위해 만든 모바일 기기별 해상도이다.









미디어 쿼리의 브라우저별 호환성



Can I Use 사이트에서 살펴본 CSS3 미디어 쿼리의 호환성은 다음과 같다.

 



IE6~8에서 미디어 쿼리를 지원하려면 어떻게 해야할까?




IE에서 미디어 쿼리 사용하기

: 자바스크립트 라이브러리 활용



다음 두 자바스크립트 라이브러리를 통해 가능하다.

이 두 자바스크립트 라이브러리들은 미디어 쿼리를 모방하여

IE6~8에서 미디어 쿼리가 동작하는 것처럼 보이게 해준다.



  • respond.js
    : 빠르고 가볍다. 단, 미디어 쿼리 구문 중에 min-width와 max-width만 지원이 가능하다.
    즉, width, device-width, device-height, orientation, aspect-ratio 등은 지원하지 않는다는 이야기다.
    또한, @import나 <link media = "screen and ..." >와 같이 <link> 태그 안에 속성으로 미디어를 설정하는 것을 지원하지 않는다.

    직접 삽입을 하려면 이곳에서 받아 디렉토리 경로를 적어주면 되고,
    다운받지 않고 사용하기 위해서는 다음 구문을 </body> 바로 위에 삽입해야한다.
    (</body> 직전에 삽입해야 하는 이유는, 좀 더 페이지 로딩 속도를 빠르게 하기 위해서임)

    *참고로, 이 respond.min.js는 로컬에서 실행이 안되는 경우가 있는 것 같으니,
    테스트할 때는 로컬이 아니라 실 서버 환경에서 테스트
    해보자.

    <!--[if lt IE 9]>
    <script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->



  • css.mediaqueries.js
    이 라이브러리 또한 페이지 로딩 속도를 위해 </body> 태그 전에 삽입해주는 것이 좋다.
    그리고 역시, @import로 불러온 스타일시트는 작동하지 않으며,
    <link media = "screen and ..." >와 같이 <link> 태그 안에 속성으로 미디어를 설정하는 것을 지원하지 않는다.
    발생한 이슈는 이곳에서 확인할 수 있다.







IE에서 미디어 쿼리 사용하기

: IE에서는 반응형 웹 포기하기



하지만 모바일에서도 작동하는 미디어쿼리로

IE6~8에서 반응형 웹을 지원하기 위해 위의 자바스크립트 라이브러리를 사용하는 것보다는,

IE8 이하에서 접속했을 때 반응형 스타일 시트가 아닌, 고정폭의 스타일 시트로 따로 연결해주는 것이

좀더 간단하며 접근성이 좋은(accessible) 해결책이라고 한다.


데스크탑에서는 반응형이 되지 않아도 가독성이 크게 떨어지지 않기 때문이다.




예시는 다음과 같다.

<link rel="stylesheet" type="text/css" media="all" href="style.css"/>

<!--[if lt IE 9]>

<link rel="stylesheet" type="text/css" media="all" href="style-ie.css"/>

<![endif]-->





참고 사이트


댓글