CSS 반응형 웹 - 뷰포트 (viewport) 와 미디어쿼리 (mediaquary)

지나·2022년 3월 26일

반응형 웹 (resposible web)

웹 사이트의 내용을 그대로 유지하면서 다양한 디바이스, 창, 화면 크기에 맞게 렌더링 되는 것을 말한다.

현재 무수히 많은 기기들의 화면 크기는 기기마다 다르면서도 그 양이 방대하다. 매번 이 화면 크기에 맞춘 웹 사이트를 제작하는 것은 비효율적이기 때문에 화면 크기에 반응 하여 화면에 보이는 웹 요소들을 자동으로 보기 좋게, 일관성 있게 재배치하게 하는 것이 바로 반응형 웹 디자인이다.

즉, 디바이스별로 (화면 크기별로) 각각의 레이아웃이 달라지는 것을 말한다.

뷰포트 (viewport)

기본 해상도 1024X768 의 PC화면에는 수평으로 1024개의 픽셀이, 수직으로는 768개의 픽셀이 배치되어 있다. 즉, 이 PC화면은 786,432개의 픽셀로 이루어진 셈이다. 우리가 보통 사용하는 PC화면의 픽셀수를 손안에 들어오는 작은 디스플레이에 적용하게 되면 의도한대로 구현되지 않고, 가독성도 매우 떨어지게 된다.

이러한 문제를 해결하기 위해 생겨난 개념이 바로 뷰포트 (viewport) 이다.

뷰포트는 웹 페이지의 컨텐츠들을 모바일 브라우저로 출력하여 실제 사용자들에게 보여지는 영역을 말한다.

'뷰포트를 지정한다' 라는 말은 meta 태그를 활용하여 이 실제 보여지는 영역의 너비, 높이, 확대 또는 축소에 대한 값을 지정하여 웹 페이지가 모바일 브라우저에서 최적의 상태로 화면에 구현될 수 있도록 한다는 것을 의미한다.

📌 meta name="viewport"

<html>
	<head>
    	<meta name="viewport" content="속성:속성값">  <!--뷰포트를 지정하는 기본 문법-->
    </head>

뷰포트는 html 문서의 head 태그 내부에 meta 태그로 명시하여 지정한다.
meta 태그는 모바일 기기에서 실제 보여지는 뷰포트의 크기, 줌 레벨 등을 속성값을 이용하여 지정할 수 있다.
가장 보편적으로 사용되는 뷰포트의 메타태그는 아래와 같다.

<meta name="viewport" content="width=device-width, initial-scale=1">

📌 `width=속성값`

뷰포트의 너비를 지정한다.

기본값 은 980px 이다.
width=device-width : 웹 페이지의 너비를 디바이스 기기의 스크린 너비로 지정
크기값 : 웹 페이지의 너비를 명시된 크기값으로 지정

📌 `height=속성값`

뷰포트의 높이를 지정한다.

기본값 은 auto 이다.
height=device-height : 웹 페이지의 높이를 디바이스 기기의 스크린 높이로 지정
크기값 : 웹 페이지의 높이를 명시된 크기값으로 지정

📌 `user-scalable=속성값`

사용자의 확대/축소 가능 여부를 지정한다.

yes (기본값) : 사용자가 확대/축소 할 수 있게 한다.
no : 사용자가 확대/축소 할 수 없다.

📌 `initial-scale=속성값`

초기 확대/축소 값을 지정한다.

0~10 사이의 값 : 페이지 로딩 시, 확대 또는 축소 값을 지정한다.
initial-scale=1.0 (기본값) : 페이지 로딩 시, 확대 또는 축소가 되지 않은 본래의 크기를 사용한다.
값이 클수록 확대된 화면을 로딩한다.

📌 `minimum-scale=속성값`

축소율의 최소값을 지정한다.

0~10 사이의 값 : 줌 아웃시 화면을 얼마나 축소할 수 있게 할 건지를 지정한다.
minimum-scale=0.25 (기본값) : 본래 크기보다 25% 까지 축소 가능하다.
값이 1일 경우에는 축소가 되지 않는다.

📌 `maximum-scale=속성값`

확대율의 최대값을 지정한다.

0~10 사이의 값 : 줌 인시 화면을 얼마나 확대할 수 있게 할 건지를 지정한다.
maximum-scale=1.6 (기본값) : 본래 크기보다 160% 까지 확대 가능하다.
값이 1일 경우에는 확대가 되지 않는다.

미디어쿼리 (media query)

미디어쿼리란 각각 다른 디바이스의 화면 크기를 인식하여 서로 다른 CSS 스타일을 적용하는 것을 말한다.
보통은 스마트폰, 태블릿, PC화면 정도로 구분하여 인식한다.

해상도의 너비값이 320px 이상 768px 미만 : 스마트폰
해상도의 너비값이 768px 이상 1024px 미만 : 태블릿
해상도의 너비값이 1024px 이상 : PC화면

미디어쿼리를 적용하는 방식은 아래 3가지 방법이 있다.

html 문서의 의 head 태그에 link 속성을 이용하여 지정하기

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

CSS 스타일 문서 내에서 @media 태그로 지정하기

@media all and (min-width:768px) {
									속성: 속성값;}

CSS 스타일 문서 내에서 import 태그로 불러오기 (위 방식과 흡사)

@import ".../media.css";

미디어쿼리 구문 작성하기

<style>
	@media only/not 미디어유형 and/콤마 (속성:속성값) ... {
    												속성: 속성값;}
</style>

미디어쿼리 구문은 css 스타일 문서 또는 style 태그에 기술하며
화면 screen, 티비 tv, 프린터 print 와 같은 미디어 타입과 하나 이상의 속성으로 구성될 수 있다.

미디어 쿼리 구문 작성 시 유의할 점

📌 공통으로 적용할 CSS 스타일 문서를 작성 후 미디어쿼리를 따로 작성한다.
📌 min 속성 사용시에는 크기가 작은 순서대로, max 속성 사용시에는 크기가 큰 순서대로 작성한다.
📌 외부 링크를 불러오는 방식으로 사용할 수 있지만 css 파일이 많으면 로딩 속도가 느려진다.

또한 meta 태그에 뷰포트가 지정되어 있어야 미디어쿼리가 실행되니 꼭 기억하자!

📌 `only` / `not`

only : 미디어쿼리를 지원하지 않는 브라우저에서는 미디어쿼리를 실행하지 않는다.

not : 뒤에 오는 미디어유형을 제외시킨다.

ex) not tv : tv를 제외한 모든 미디어유형에 미디어쿼리를 실행한다.)

📌 미디어유형의 종류

미디어쿼리 구문에서 미디어유형을 생략할 시 기본값인 all 이 적용된다.

@media 미디어 유형	설명	참고
all	모든 장치
screen	컴퓨터 화면 또는 스마트기기의 화면
tv	영상과 음성이 함께 출력되는 장치
projection	프로젝터 장치
handler	손에 들고다니는 소형 장치
speech	음성 출력 장치
aural	음성 합성 장치	화면을 소리로 출력해주는 장치
embossed	점자 인쇄 장치	화면을 읽어 종이에 점자를 찍어내는 장치
tty	디스플레이 기능이 제한된 장치
braille	점자 표시 장치

📌 `and` / `콤마`

and : 그리고 , 앞뒤 조건이 모두 사실일 때 명시

콤마 : 또는 , 앞뒤 조건중 하나라도 사실일 때

미디어쿼리 조건문은 and 또는 콤마 를 이용하여 두가지 이상 조건을 작성할 수 있다.

미디어쿼리 속성

미디어 쿼리 구문을 작성하면서 디바이스에 대한 여러가지 속성과 속성값들을 적용시킬 수 있다.

속성	속성값	설명
width	px	웹페이지 뷰포트의 너비를 지정
height	px	웹페이지 뷰포트의 높이를 지정
device-width	px	디바이스의 너비를 지정
device-height	px	디바이스의 높이를 지정
orientation	landscape	디바이스의 화면을 가로 기준으로 지정
	portrait	디바이스의 화면을 세로 기준으로 지정
aspect-ratio	너비/높이	웹 페이지 뷰포트의 너비와 높이의 비율을 지정
device-aspect-ratio	너비/높이	디바이스의 너비와 높이의 비율을 지정
color	비트수	디바이스에서 표현 가능한 최대 색상 비트수를 지정
color-index	개수	매체에서 표현 가능한 색상의 개수를 지정
monochrome	비트수	흑백 디바이스의 픽셀당 비트수를 지정
resolution	dpi/dpcm	디바이스의 해상도를 지정

orientation 을 제외한 모든 속성은 min / max 접두사를 사용할 수 있다.

📌 min-width max-width

웹 페이지 뷰포트 영역에서의 최소너비와 최대너비 조건을 명시하는 속성이다.

min-width : 최소 너비값을 말하며, 이 값으로 명시된 너비값보다 큰 경우에 적용한다.
max-height : 최대 너비값을 말하며, 이 값으로 명시된 너비값보다 작은 경우에 적용한다.

📌 min-device-width

📌 max-device-width

디바이스 기기에서의 최소너비와 최대너비 조건을 명시하는 속성이다.

min-device-width : 최소 너비값을 말하며, 이 값으로 명시된 너비값보다 큰 기기에 적용한다.
max-device-width : 최대 너비값을 말하며, 이 값으로 명시된 너비값보다 작은 기기에 적용한다.

📌 orientation

디바이스의 화면 방향을 가로/세로 중 하나를 기준으로 하고, 조건을 명시하는 속성이다.

portrait : 디바이스의 화면이 세로인 경우에, 조건을 적용한다.
landscape : 디바이스의 화면이 가로인 경우에, 조건을 적용한다.

📌 aspect-ratio

웹 페이지 뷰포트의 너비와 높이에 대한 비율 조건을 명시하는 속성이다.

너비 슬래시 / 높이 순으로 작성한다.
(aspect-ratio:5/4) : 뷰포트 너비가 5, 높이가 4인 비율일 때 조건을 적용한다.
min max 접두사를 이용하여 비율의 최소, 최대를 지정할 수 있다.

📌 device-aspect-ratio

디바이스 화면 너비와 높이에 대한 비율 조건을 명시하는 속성이다.

너비 슬래시 / 높이 순으로 작성한다.
(device-aspect-ratio:5/4) : 디바이스의 화면 너비가 5, 높이가 4인 비율일 때 조건을 적용한다.
min max 접두사를 이용하여 비율의 최소, 최대를 지정할 수 있다.

이 외 나머지 속성들은 대표적으로 사용하지는 않으니 생략한다.

지나

이전 포스트

CSS 스타일 문서에서 사용하는 트랜지션 (transition) 과 애니메이션 (animation)

다음 포스트

CSS 반응형 웹 - 뷰포트 (viewport) 와 미디어쿼리 (mediaquary)

반응형 웹 (resposible web)

뷰포트 (viewport)

📌 meta name="viewport"

📌 width=속성값

📌 height=속성값

📌 user-scalable=속성값

📌 initial-scale=속성값

📌 minimum-scale=속성값

📌 maximum-scale=속성값