미디어 쿼리(Media Query, @Media)
미디어 쿼리는 화면 해상도, 기기 방향 등의 조건으로 HTML 에 적용하는 스타일을 전환할 수 있는
CSS3 의 기능이다. 반응형 웹 디자인에서 보통 사용하며 기기 및 크기마다 적용할 스타일을
전환할 수 있다.
반응형 웹(Responsible Web)
웹 사이트 내용을 그대로 유지하면서 다양한 디바이스, 창, 화면 크기에 맞게 렌더링 되는걸 반응형 웹이라 한다.
예를 들어 스마트폰의 크기와 태블릿 크기는 달라 고정 크기로 해놓았을 경우 화면이 깨질수 있다.
이러한 문제로 인해 크기에 따라 화면 스타일을 적용하여 깨지지 않도록 할 수 있다.
즉, 디바이스마다 레이아웃 크기를 다르게 설정하기 위해 미디어 쿼리를 사용한다.
@media (min-width: 320px) {
display: flex;
font-size: 20px;
color: red;
}
@media (min-width: 320px) and (max-width: 769px) {
display: block;
font-size: 30px;
color: blue;
}
@media (min-width: 320px) { 실행문 }
가로 너비가 320px 이상일 경우 중괄호 안 실행문을 실행한다.
@media (min-width: 320px) and (max-width: 769px) { 실행문 }
가로 너비가 320px 이상이고 768px 이하일 경우 중괄호 안 실행문이 실행된다.
뷰포트(viewport)
단어 그대로 실제 보여지는 영역을 의미한다.
웹 페이지의 컨텐츠들을 모바일 브라우저로 출력하여 실제 사용자들의 화면에서 보여지는 영역을 의미한다.
뷰포트는 html 의 meta 태그를 통해 설정한다.
<html>
<head>
<meta name="viewport" content="속성1=속성값1, 속성2=속성값2">
</head>
</html>
meta 태그는 모바일 기기에서 실제로 보여지는 뷰포트의 크기, 줌 레벨 등의 속성값을 이용하여 설정할 수 있다.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
</html>
default 로 가장 많이 사용되는 뷰포트 설정은 위와 같다.
width=device-width
웹 페이지의 너비를 디바이스 기기 너비로 설정한다.
initial-scale=1
페이지 로딩 시 확대 또는 축소가 되지 않은 본래의 크기를 사용한다.(기본값=1.0)
0 ~ 10 사이의 값이 존재한다.
뷰포트 설정값 종류
width = device-width
기본값은 980px이다.
width=device-width 는 웹페이지의 너비를 접근한 디바이스 기기 너비로 설정한다.
height = device-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% 까지 축소 가능하다.
maximum-scale = 0 ~ 10 사이값
화면의 확대율을 설정하는 값이다.
기본값은 maximum-scale = 1.6 이며, 본래 크기보다 160% 까지 확대 가능하다.