강인규 블로그

0%

미디어 쿼리 (Media Queries)

작성일 Edited on In , Disqus:

미디어 쿼리 (Media Queries) 란?

미디어 쿼리란 반응형 웹을 구현하기 위해 필요한 기술 중에 하나로, 컴퓨터나 기기에게 ‘너는 어떤 종류의 미디어니?’ 또는 ‘미디어의 화면 크기는 어느 정도나 되니?’ 라고 미디어에게 질문하고 감지하여 웹사이트를 변경하는 기술이다.

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

미디어 쿼리 작성

1
@media 조건문 {실행문}

1
2
3
4
5
6
7
8
9
10
11
<!-- CSS media query 링크로 연결할때 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- CSS 내부 삽입하기 -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>
1
2
/* 가로 너비가 320px 이상이면서 768px 이하일 때 */
@media (min-width:320px) and (max-width:768px) { ... }  // 320px <= screen <= 768px

모바일 우선

css파일
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@charset “utf-8”;

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

/* Phone 버전 */
768px 미만 해상도의 모바일 기기를 위한 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨. 미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않는다.

/* Tablet & Desktop 버전 */
@media only screen and (min-width:768px) {
사용자 해상도가 768px 이상일 때 이 코드가 실행됨. 테블릿과 데스크톱의 공통 코드를 작성한다.
}

/* Tablet 버전 */
@media only screen and (min-width:768px) and (max-width:1199px) {
사용자 해상도가 768px 이상이고 1024px 이하일 때 이 코드가 실행됨. 아이패드 또는 비교적 작은 해상도의 랩탑이나 데스크톱에 대응하는 코드를 작성한다.
}

/* Desktop 버전 */
@media only screen and (min-width:1200px) {
사용자 해상도가 1025px 이상일 때 이 코드가 실행됨. 1025px 이상의 랩탑 또는 데스크톱에 대응하는 코드를 작성한다.
}

각각의 해상도 사이즈 알기 : https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
기기별 쉽게 보기 : http://nmsdvid.com/snippets/

1
2
3
@media only screen and (orientation:portrait) { … } // 세로 모드. 뷰포트의 높이가 너비에 비해 상대적으로 크면 실행

@media only screen and (orientation:landscape) { … } // 가로 모드. 뷰포트의 너비가 높이에 비해 상대적으로 크면 실행

orientation

뷰포트의 너비와 높이 비율을 이용하여 세로 모드인지 가로 모드인지를 판단한다.

orientation: auto;
orientation: portrait; // 세로
orientation: landscape; // 가로

매개변수
min-width 쿼리에 정의된 값보다 큰 브라우저 너비에 적용되는 규칙.
max-width 쿼리에 정의된 값보다 작은 브라우저 너비에 적용되는 규칙.
min-height 쿼리에 정의된 값보다 큰 브라우저 높이에 적용되는 규칙.
max-height 쿼리에 정의된 값보다 작은 브라우저 높이에 적용되는 규칙.
orientation=portrait 높이가 너비보다 크거나 같은 브라우저에 적용되는 규칙.
orientation=landscape 너비가 높이보다 큰 브라우저에 적용되는 규칙.
html파일 Ex
1
2
3
4
<link rel="stylesheet" media="(max-width: 700px)" href="max-700px.css">
<link rel="stylesheet" media="(min-width: 700px)" href="min-700px.css">
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
css파일 Ex
1
2
3
@media (min-width: 700px) and (orientation: landscape) { ... } // 가로에 700px 같거나 크다

@media tv and (min-width: 700px) and (orientation: landscape) { ... } // tv 가로에 700px 같거나 크다

700px보다 넓거나, 디스플레이가 가로 방향인 경우에만 실행

기기명 설명
all 모든 장치
print 인쇄 장치
screen 컴퓨터 화면 장치 또는 스마트 기기의 화면
tv 영상과 음성이 동시에 출력되는 장치
projection 프로젝터 장치
handheld 손에 들고 다니는 소형 장치
speech 음성 출력 장치
aural 음성 합성 장치 (화면을 읽어 소리로 출력해 주는 장치)
embossed 점자 인쇄 장치 (화면을 읽어 종이에 점자를 찍어내는 장치)
tty 디스플레이 기능이 제한된 장치
braille 점자 표시 장치 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* Print 버전 */
@media print { ... }

/* Phone 가로 버전 */
@media only screen and (min-width: 320px) and (orientation : landscape) { ... }
/* Phone 세로 버전 */
@media only screen and (min-width: 320px) and (orientation : portrait) { ... }

/* Tablet 가로 버전 == Desktop */
@media only screen and (min-width: 768px) and (orientation : landscape) { ... }
/* Tablet 세로 버전 */
@media only screen and (min-width: 768px) and (orientation : portrait) { ... }

/* Desktop */
@media only screen and (min-width: 1200px) { ... }
}

최종

  • 모바일 스타일 (미디어 쿼리가 아님) - 모바일 우선
  • 태블릿 스타일 (최소 너비 : 768px)
  • 데스크톱 스타일 (최소 너비 : 1200px)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
@charset “utf-8”;

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

/* Print 버전 */
@media print { ... }

/* Mobile 버전 */
768px 미만 해상도의 모바일 기기를 위한 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨. 미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않는다.

/* Mobile 가로 버전 */
@media only screen and (min-width: 320px) and (orientation : landscape) { ... }

/* Tablet & Desktop Device */
@media only screen and (min-width:768px) {
사용자 해상도가 768px 이상일 때 이 코드가 실행됨. 테블릿과 데스크톱의 공통 코드를 작성한다.
}

/* Tablet 버전 */
@media only screen and (min-width:768px) and (max-width:1199px) {
사용자 해상도가 768px 이상이고 1024px 이하일 때 이 코드가 실행됨. 아이패드 또는 비교적 작은 해상도의 랩탑이나 데스크톱에 대응하는 코드를 작성한다.
}

/* Tablet 세로 버전 */
@media only screen and (min-width: 768px) and (orientation : portrait) {

}

/* Desktop 버전 */
@media only screen and (min-width:1200px) {
사용자 해상도가 1025px 이상일 때 이 코드가 실행됨. 1025px 이상의 랩탑 또는 데스크탑에 대응하는 코드를 작성한다.
}

미디어 쿼리 지원


Image source: Can I Use

Respond.js 소개
IE 6~8 버전에서 미디어쿼리를 해석할 수 있도록 만들어주는 자바스크립트 라이브러리이다.

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

마무리

급하게 정리한다고 막 적은것 같습니다. 미흡하고 부족한 것 투성이 입니다. 위의 내용은 제가 필요한 부분만 정리 한 것입니다.