미디어 쿼리와 뷰포트
Front-End/반응형 웹 2019. 5. 30. 22:19
-미디어 쿼리-
화면의 크기나 환경에 따라 웹 사이트를 변경하는 기술
-미디어 쿼리의 기본 문법-
| @media [only 또는 not] [미디어 유형] [and 또는, 콤마] (조건문) {실행문} |
미디어 쿼리 구문은 대, 소문자를 구별하지 않습니다.
| @media 미디어 쿼리 문법의 시작을 알리는 부분입니다. [only 또는 not] only 키워드는 미디어 쿼리를 지원하는 브라우저에서만 미디어 쿼리를 해석하게 해주는 키워드 입니다. not 키워드는 not 다음에 따라오는 조건을 부정하는 키워드 입니다. 예를 들어 'not tv' 일 경우 tv를 제외한 모든 미디어 유형에만 적용합니다. |
-미디어 유형-
미디어 쿼리는 미디어별로 적용할 CSS를 따로 작성하는 것이므로 @media 속성 다음에 미디어 유형을 알려줘야 합니다.
미디어 유형은 생량이 가능하며 생략 시에는 all 키워드처럼 작동합니다.
| 기기명 | 설명 |
| all | 모든 장치 |
| 인쇄 장치 | |
| screen | 컴퓨터 화면 장치 또는 스마트 기기의 화면 |
| tv | 영상과 음성이 동시에 출력되는 장치 |
| projection | 프로젝터 장치 |
| handheld | 손에 들고 다니는 소형 장치 |
| speech | 음성 출력 장치 |
| aural | 음성 합성 장치 (화면을 읽어 소리로 출력해 주는 장치) |
| embossed | 점자 인쇄 장치 (화면을 읽어 종이에 점자를 찍어내는 장치) |
| tty | 디스플레이 기능이 제한된 장치 |
| braille | 점자 표시 장치 |
| [and 또는,콤마] and는 앞뒤 조건이 모두 사실일 때 뒤에 따라오는 것을 해석하라는 의미입니다. ,콤마는 앞뒤 조건 중 하나만 사실이더라도 뒤에 따라오는 것을 해석하라는 의미입니다. and 또는 ,콤마 선언 역시 생략할 수 있습니다. @media A and B {실행문} @media A, B {실행문} |
|
(조건문)
(조건문)은 조건문이 사실일 때 뒤에 따라오는 것을 해석하라는 의미입니다.
(조건문)은 and나 콤마 기호를 이용하여 두 가지 이상 작성할 수 있으며 생략할 수 있습니다.
(조건문)에 들어올 수 있는 조건문은 다음 표를 참고 하세요.
@media (min-width:320px) {실행문} -> 가로 너비가 320px 이상일 때 실행문을 실행합니다.
@media (min-width:320px) and (max-width:768px) {실행문} => 가로 너비가 320px 이상이고 768px 이하 일 때 실행문을 실행합니다.
|
| 조건문 | 설명 | 조건값 | min/max 사용 여부 |
| width | 웹 페이지의 가로 너비값 | width 속성에서 사용할 수 있는 모든 속성값 | 사용함 |
| height | 웹 페이지의 세로 높잇값 | ||
| device-width | 기기의 가로 너빗값 | ||
| device-height | 기기의 세로 높잇값 | ||
| orientation | 기기의 화면 방향 | portrait (세로) landscape (가로) |
사용 안 함 |
| aspect-ratio | 화면 비율 | 브라우저 화면 비율 (1), 브라우저 종횡비 (16/9), 브라우저 해상도 (1280/720) |
사용함 |
| device-aspect-ratio | 단말기의 화면 비율 | 기기 화면 비율 (1), 기기 종횡비 (16/9), 기기 해상도 (640/320) |
|
| color | 기기의 비트 수 | 8 (bit 단위) | |
| color-index | 기기의 색상 수 | 128 (색상 수 단위) | |
| monochrome | 기기가 흑백일 때 픽셀당 비트 수 | 1 (bit 단위) | |
| resolution | 기기의 해상력 | 300dpi / dpcm | |
| scan | TV의 스캔 방식 | progressive / interlace | 사용 안 함 |
| grid | 기기의 그리드 / 비트맵 | 0 (비트맵 방식) / 1 (그리드 방식) |
| {실행문} {실행문} 은 앞의 조건들이 모두 사실일 때 실행되는 실행문 입니다. {실행문} 에는 일반적으로 사용하는 CSS 코드를 작성합니다. @media {실행문} |
미디어 쿼리 적용 - 링크 방식 -
미디어 쿼리를 적용하려면 CSS 파일 내에 미디어 쿼리를
작성해서 <link> </link> 태그로 CSS 파일을 연결하여 적용해야 합니다.
| <link rel = "stylesheet" href = "mediaqueries.css"> |
이 방식은 HTML 파일과 CSS 파일을 별도로 관리하므로 불러오는 속도도 빠르고 관리 면에서도 효율적 입니다.
미디어 쿼리를 적용할 수 있는 기타 방식들
링크 방식 2
| <link rel = "stylesheet" media = "all and (min-width:320px)" href = "style320px.css"> |
링크 방식 2sms <link> , </link> 태그에 직접 미디어의 종류와 조건문 등을 작성하고 적용할 CSS 파일을 연결하는 방식인데,
이 방식은 되도록 사용하지 않는 것이 좋다.
조건이 여러 개로 나눠지게 되면 그 만큼 CSS 파일의 개수도 늘어나게 되어 CSS 파일을 여러 번 불러와야 하므로 웹 사이트의 속도도 느려지기
때문입니다.
문서 내에 작성하는 방식
<head> <style> @media all and (min-width:320px) {실행문} </style> </head> <body> </body> |
문서 내에 작성하는 방식은 HTML 문서 내에 미디어 쿼리를 작성하는 방식인데, 이 방식은 피하는게 좋다.
그 이유는 CSS 코드를 문서 내에 작성하게 될 경우 문서의 용량이 커지고, 이렇게 커진 용량 때문에 속도가 느려져 웹 사이트를 방문하는
사용자가 웹 사이트를 빨리 볼 수 없기 때문입니다.
-미디어 쿼리 사용시 주의 사항-
띄어 쓰기 주의하기
예를 들어 논리 연산자 중 하나인 and 구문을 사용할 때 and 구문 뒤에는 항상 공백을 한 칸 띄워줘야 합니다.
만약 공백을 한 칸 띄어주지 않고 미디어 쿼리를 작성하면 정상적으로 작동하지 않습니다.
접두사인 min/max 사용 시 작성 순서 주의하기
미디어 쿼리를 사용할 때는 min/max 와 크기 조건문 (width) 을 사용해서 해상도별로 웹사이트를 다양하게 보여줄 수 있습니다.
그런데 min을 사용할 때는 반드시 크기가 작은 순서대로 작성해야 하고, max를 사용할 때는 반드시 크기가 큰 순서대로
작성해야 합니다.
min을 사용할 때 크기 (width)가 작은 순서대로 작성해야 하는 이유는 min은 최소 또는 그 이상이라는 뜻으로,
점차 커지는 것을 의미하기 때문에 반드시 작은 순서부터 큰 순서로 작성해야 합니다.
반대로 max는 최대 또는 그 이하라는 뜻으로, 점차 작아지는 것을 의미하기 때문에 max를 사용할 때는 반드시 큰 순서부터 작은
순서로 작성해야 합니다.
@media all and (min-width:320px) {실행문} @media all and (min-width:768px) {실행문} @media all and (min-width:1024px) {실행문} |
미디어 쿼리로 브라우저 크기 감지 시 주의하기
미디어 쿼리를 이용해서 크기를 감지할 때는 보이는 영역을 뜻하는 뷰포트 크기를 기준으로 감지한다.
| Inline 속성 Inline 속성이란, 쉽게 말해서 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치하려는 성향 입니다. 대표적인 Inline 속성을 가진 태그로는 <a> 태그가 있습니다. 상, 하단 외부 여백 속성을 정의해도 적용되지 않습니다. 인라인 요소의 상, 하 여백은 magin이 아니라 line-height 속성에 의해 발생합니다. 아래 예문을 보면 <a> 태그들이 줄을 넘기지 않고 한 줄에 연속해서 붙는 결과를 볼 수 있습니다.
Block 속성 Block 속성은 Inline 과 달리 한 줄에 나열되지 않고 그 자체로 한 줄을 완전히 차지합니다. 대표적인 블록 요소로 <p> 태그가 있습니다.
Inline와 Block의 합친 속성 inline-block 라는 속성은 인라인과 같이 한줄에 표현하면서도 margin, width, height 속성을 정의하면 표현해 줍니다. |
-미디어 쿼리 예제-
|
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<!-- meta 태그를 이용해서 화면의크기나 배율을 조절 -->
<title>Document</title>
<style>
*{margin:0; padding:0;}
}
</style>
</head>
<body>
<div id="wrap">
<div></div><div></div><div></div><div></div><div></div>
</div>
</body>
</html>
|
cs |
-뷰포트-
화면에서 실제 내용이 표시되는 영역으로, 데스크톱은 사용자가 설정한 해상도가 뷰포트 영역이 되고,
스마트 기기는 기본으로 설정되어 있는 값이 뷰포트 영역이 됩니다.
그런데 스마트 기기는 기본으로 설정되어 있는 뷰포트 영역으로 인해 미디어 쿼리가 정상적으로 작동하지 않는
문제가 발생할 수 있습니다.
이러한 문제를 방지하기 위해 뷰포트 메타 태그를 이용해서 화면의 크기나 배율을 조절해야 합니다.
반응형 웹을 제작할 때 사용하는 뷰포트의 기본 메타 태그
<meta name = "viewport" content = "width" = device - width, initial - scale = 1, minimum - scale =1, maximum - scale = 1, user - scalable = no "> |
-뷰포트 속성-
| 속성명 | 속성값 | 속성 설명 |
| width | device - width, 양수 | 뷰포트의 너비를 지정합니다. |
| height | device - height, 양수 | 뷰포트의 높이를 지정합니다. |
| initial - scale | 양수 | 뷰포트의 초기 배율을 지정합니다. 기본값은 1입니다. 1보다 작은 값을 사용하면 축소된 페이지를 표시하고, 1보다 큰 값을 사용하면 확대된 페이지를 표시 |
| user - scalable | yes, no | 뷰포트의 확대/축소 여부를 지정합니다. 기본값은 yes입니다. 반대로 no로 설정하면 사용자가 페이지를 확대 할 수 없습니다. |
| mininum - scale | 양수 | 뷰포트의 최소 축소 비율을 지정합니다. 기본값은 0.25 입니다. |
| maximum - scale | 양수 | 뷰포트의 최대 확대 비율을 지정합니다. 기본값은 5.0 입니다. |
스마트 기기의 뷰포트 영역 확인하기
http://dnsdk300.dothome.co.kr/viewport
아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
'Front-End > 반응형 웹' 카테고리의 다른 글
| 픽셀을 %로 바꾸기 - 가변그리드 (0) | 2019.05.29 |
|---|---|
| 웹 호스팅 설정 정보 (0) | 2019.05.28 |
| 반응형 웹 기본 개념 이해하기 (0) | 2019.05.27 |
| 반응형 웹 학습 일정 (0) | 2019.05.22 |