09-미디어쿼리(fMedia Query)

1. 반응형 웹과 적응형 웹

과거에는 웹 페이지를 접속할 수 있는 방법이 컴퓨터에 설치된 웹 브라우저에서만 가능했지만, 현대에는 컴퓨터를 비롯해서 휴대폰, 태블릿, 네비게이션 등 다양한 기기를 사용해서 웹 페이지에 접근할 수 있게 되었습니다. 그래서 개발자들이 웹페이지를 만들 떄, 다양한 디바이스 환경에 맞춰 최적화된 웹 페이지를 사용자에게 보여줄 수 있도록 다양한 방법으로 웹 페이지를 제작해야 합니다.

대표적인 방법으로 크게 반응형 웹(responsive web)과 적응형 웹(adaptive web)이 있습니다.

반응형 웹(responsive web)
- 다양한 디바이스의 해상도에 반응하여 최적화된 웹 페이지를 보여주는 방법으로 제작한 웹페이지
- e.g. Apple 공식 홈페이지
적응형 웹(adaptive web)
- 디바이스의 종류별로 최적화된 웹 페이지를 보여줄 수 있도록 제작한 웹 페이지
- 반응형이 아니기 떄문에, 웹 페이지를 방문할 떄, 사용한 디바이스 종류별(device type)로 다르게
- 보이는 것이 반응형 웹과 구분되는 차이점
- e.g. Naver 포털 사이트 : 네이버의 포털 사이트는 컴퓨터, 휴대폰 등 접속기기에 따라 화면이 변경됨

2. 미디어쿼리(Media Query)

미디어쿼리(media query)는 단말기의 유형(출력물, 화면), 어떤 특성이나 수치(해상도, 뷰포트 기준)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다.

CSS @media @import 규칙을 사용해 특정 조건에 따라 스타일을 적용할 경우
<style>, <link>, <source> 기타 다양한 HTML 요소에 media 특성을 이용하여 선택할 경우
window.matchMedia(), MediaQueryList.addListener() JS 메서드를 사용해 미디어 상태를 확인할 경우

미디어 쿼리(media query)는 다음과 같은 문법을 가집니다.

1@media 미디어유형 and (조건) {
2  /* 📝 미디어 유형의 값 */
3  /* - all(모든 기기), print(인쇄형 기기) */
4  /* - screen(컴퓨터, 휴대폰, 테프릿 등 스크린 기기), speech(음성이 출력되는 기기) */
5  /* 📝 조건 = 어떤 상황에서 미디어쿼리가 적용되어야 하는 지 정의 */
6  /* min-width(화면의 최소 넓이), max-width(화면의 최대 넓이), orientation(화면 방향) */
7}

미디어쿼리에 대한 쿼리를 보겠습니다.

1<!doctype html>
2<html lang="ko">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>미디어쿼리</title>
8    <style>
9      /* 📝 min-width는 1번만 사용해야 하고, max-width는 여러 번 사용 가능 */
10      /* 모든 기기에서, 화면의 최소 넓이가 1140px 이상일 떄 */
11      @media all and (min-width: 1140px) {
12        h1 {
13          color: green;
14        }
15      }
16      /* 📝 max-width는 큰 것부터 먼저 작성하고, 그 뒤에 작은 것을 작성해야 함  */
17      /* CSS 적용 우선순위때문 */
18      /* 모든 기기에서, 화면의 최대 넓이가 1140px 이하일 떄 */
19      @media all and (max-width: 1139px) {
20        h1 {
21          color: blue;
22        }
23      }
24      /* 모든 기기에서, 화면의 최대 넓이가 640px 이하일 떄 */
25      @media all and (max-width: 640px) {
26        h1 {
27          color: pink;
28        }
29      }
30      /* 프린트 기기에서, 화면의 최소 넓이가 0px 이하일 떄 */
31      /* 웹 브라우저에서는 변화가 없고, 프린터에서만 변함 */
32      /* 📝 인쇄까지 고려하는 경우는 적어서, 보통 all, screen을 많이 사용 */
33      @media print and (min-width: 0px) {
34        h1 {
35          color: orange;
36        }
37      }
38    </style>
39  </head>
40  <body>
41    <h1>Media Query</h1>
42    <p>반응형 웹을 구현할 떄 필수로 사용해야 하는 CSS 속성</p>
43  </body>
44</html>

3. orientation 특정 방향만 미디어쿼리 적용

미디어 쿼리(media query)의 조건을 지정하는 방법 중 가장 많이 사용하는 법은 min-width와 max-width를 사용하는 것입니다. 다만, 이와 더불어 드물게 화면 방향에 대한 조건도 같이 사용하는 경우가 있습니다. 그럴 떄 사용하는 조건이 orientation입니다.

태블릿이나 휴대폰을 사용할 경우, 화면을 가로 또는 세로 방향으로 회전하여 화면을 사용합니다. orientation조건을 사용해 화면의 특정 방향에서만 미디어쿼리가 적용되도록 조건을 지정할 수 있습니다.

1<!doctype html>
2<html lang="ko">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>미디어쿼리</title>
8    <style>
9      /* orientation 값을 따로 지정하지 않은 경우, 모든 방향에 적용 */
10      /* orientation 값 : landscape(가로 방향), portrait(세로 방향) */
11      @media all and (max-width: 1139px) and (orientation: portrait) {
12        h1 {
13          color: orange;
14        }
15      }
16    </style>
17  </head>
18  <body>
19    <h1>Media Query</h1>
20    <p>반응형 웹을 구현할 떄 필수로 사용해야 하는 CSS 속성</p>
21  </body>
22</html>

4. 브레이크 포인트

반응형 웹은 결국 미디어 쿼리를 사용해서 특정 화면 조건에서 별도의 스타일을 적용하면서 만들 수 있습니다. 그러다보면 결국 “휴대폰, 태블릿, pc는 각각 화면의 넓이를 얼마를 기준으로 작업해야 하지?”와 같은 의문이 생기기 마련입니다.

미디어 쿼리에서는 특정 화면 넓이를 기준으로 미디어 쿼리를 나눌 때 사용하는 화면 넓이 기준을 “브레이크 포인트(break points)“라고 하는데, 일반적으로 사용되는 브레이크 포인트는 아래와 같습니다.

1/* Extra small devices (phones, 600px and down) */
2@media only screen and (max-width: 600px) {...}
3
4/* Small devices (portrait tablets and large phones, 600px and up) */
5@media only screen and (min-width: 600px) {...}
6
7/* Medium devices (landscape tablets, 768px and up) */
8@media only screen and (min-width: 768px) {...}
9
10/* Large devices (laptops/desktops, 992px and up) */
11@media only screen and (min-width: 992px) {...}
12
13/* Extra large devices (large laptops and desktops, 1200px and up) */
14@media only screen and (min-width: 1200px) {...}

단, 브레이크 포인트에는 절대적인 기준이 없기 때문에 본인이 작업하는 상황/환경에 따라서 충분히 달라질 수 있습니다.

320 ~ 480px : 모바일
481 ~ 768px : 태블릿
769 ~ 1024px : 노트북
1025 ~ 1200px : 데스크탑
1201px ~(이상) : 데스크탑 및 TV 등

5. 뷰포트(viewport)

뷰포트는 웹 페이지가 화면에 보여지는 영역을 의미합니다. PC는 브라우저에서 웹페이지가 보여지기 때문에 웹 브라우저의 크기가 뷰포트의 크기입니다. 그 외의 모바일 디바이스 기기에서는 모바일 디바이스 기기 화면 자체가 뷰포트가 됩니다.

모든 웹페이지는 가로의 크기가 980px로 뷰포트의 기준이 정해져 있습니다. 따라서 이러한 웹페이지의 뷰포트 기준 크기와 웹페이지에 접속할 때, 사용한 디바이스의 뷰포트가 정확히 일치해야만 최적화된 사이즈의 웹 페이지를 사용자에게 보여줄 수 있습니다.

웹 브라우저 같은 경우는 웹 브라우저의 크기가 변경될 때마다 웹 페이지의 뷰포트 기준이 웹 브라우저 크기에 맞춰서 재설정됩니다. 그래서 우리가 PC만 사용할 때는 뷰포트와 관련된 부분을 신경쓰지 않아도 됩니다. 하지만 PC를 제외한 나머지 디바이스에서는 문제가 되는데요.

위에서 언급한 것처럼 웹 페이지의 뷰포트는 가로의 크기가 980px이 기준이 되지만, 다른 디바이스에서는 디바이스마다 정해진 뷰포트의 크기가 있어서 웹 페이지의 기본적인 기준 크기인 980px과 일치하지 않는 경우가 많기 때문입니다.

그래서 항상 PC를 제외한 다른 디바이스에서도 최적화된 웹 페이지를 보여주기 위해 웹페이지의 기본 뷰포트 크기(980px)를 접속한 디바이스의 뷰포트 크기로 재설정해야 하는데요, 그럴 때 사용할 수 있는 태그가 뷰포트 관련 meta 태그입니다.

뷰포트는 HTML의 meta 태그를 사용해서 설정할 수 있습니다.

1<!-- px단위로 숫자를 작성하며 단위표시는 생략, e.g.) 300  -->
2<meta name="viewport" content="width:너비값" />
3
4<!-- 웹 페이지에 뷰포트가 디바이스의 뷰포트 크기와 일치하게 재설정 ⭐ -->
5<meta name="viewport" content="width=device-width" />
6
7<!-- 디바이스 높이 기준 -->
8<meta name="viewport" content="height=device-height" />
9
10<!-- 초기 화면 배율 설정 (100%) ⭐ -->
11<meta name="viewport" content="width=device-width, initial-scale=1.0" />
12
13<!-- 최소 / 최대 화면 배율 설정 -->
14<meta name="viewport" content="minimum-scale=1.0" />
15<meta name="viewport" content="maximum-scale=1.0" />
16
17<!-- 사용자의 크기 조절 막기 -->
18<meta name="viewport" content="user-scaleble=no" />

예시를 보겠습니다.

1<!doctype html>
2<html lang="ko">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <!-- viewport 관련 meta 태그 -->
7    <!-- content의 넓이가 접속한 기기에 일치하도록 해줌, 스마트폰 손가락으로 줌 배율을 1배율로 설정 -->
8    <!-- 이 태그가 없으면 휴대폰에서 웹브라우저 기준 크기 등으로 크기가 맞지 않음 -->
9    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
10    <title>미디어쿼리</title>
11    <style>
12      @media all and (max-width: 1139px) and (orientation: portrait) {
13        h1 {
14          color: orange;
15        }
16      }
17    </style>
18  </head>
19  <body>
20    <h1>Media Query</h1>
21    <p>반응형 웹을 구현할 떄 필수로 사용해야 하는 CSS 속성</p>
22  </body>
23</html>

08-Grid 레이아웃 10-CSS Coding Convention(관습)