[CSS] 뷰포트란? 미디어 쿼리란? - 반응형 웹 | 화면 크기 제어

웹페이지의 화면 크기를 제어하는 기술 2가지에 대해 알아보겠다.

 

1. 미디어 쿼리

현재 브라우저가 실행된 디바이스의 종류를 감지하여 환경에 따라 웹사이트를 변경한다.

기기의 종류, 해상도, 비트 수, 가로, 세로 여부 등을 확인할 수 있다.

 

CSS파일 내에 작성한뒤에 HTML에서 <link>태그로 CSS파일을 불러온다.

 

미디어 쿼리 기본 문법은 아래와 같다.

@media [only 또는 not] [미디어 유형] [and 또는 ,콤마] (조건문) {실행문}

(1) 미디어 유형

: all - (모든 장치) , tv , screen, print 등..

(2) 조건문

: widht , height, aspect-ratio(화면 비율) 등..

(3) 실행문

: 앞의 미디어유형,조건문들이 모두 참일때 실행되는 실행문이다.

실행문에는 일반적으로 사용되는 CSS 코드를 적으면 된다.

 

//1번째----------------------------
@media all and (min-width:320px){
#block{
width:30%;
backgroud: pink;
}
}

//2번째----------------------------
@media all and (min-width:1024px){
#block{
width:100%;
backgroud: yellow;
}
}

//3번째----------------------------
@media tv {
#block{
backgroud: black;
}
}

예시 코드는 위와 같다.

1번째코드는 최소 320px 이상이면 배경색이 분홍색에 너비가 브라우저 전체의 30%로만 보이게 된다.

2번째코드는 최소 1024px 이상이면 노란배경색에 브라우저 전체 기준 100%로 꽉차게 보인다.

3번째코드는 해당 웹페이지를 실행한 기기가 TV일 경우에 동작하며 배경색이 검정색으로 나온다.

 

 

2. 뷰포트 (viewport)

: 화면에서 실제 보이는 영역을 의미한다.

데스크톱은 사용자가 설정한 해상도가 뷰포트 영역이 되고, 스마트 기기는 기본으로 설정되어 있는 값이 뷰포트 영역이다.

단, 스마트 기기는 기본으로 설정되어 있는 뷰포트 영역으로 인해 미디어 쿼리가 정상적으로 동작하지 않기도 한다.

(ex. 스마트폰으로 홈페이지 들어갔는데 디폴트화면이 모바일이 아닌 PC버전으로 뜨는경우...)

이런 문제를 방지하려고 나온 기술이 뷰포트이다.

 

아래와 같이 뷰포트 메타 태그를 통해 화면 크기/배율을 조절한다.

<meta name="viewport" content="width=device-width, intial-scale=1, minimum-scale=0.5, maximum-scale=2,user-scalable=no">

content에 있는 내용이 옵션 값들이다.

- width : 뷰포트의 너비

- initial-scale : 초기 배율값

- minimum-scale : 최소 축소비율값 (사용자가 화면에서 터치로 아무리 줄여도 이 이상의 비율로는 줄여지지 않게함)

- maximum-scale : 최대 확대비율값 

- user-scalable : 확대/축소 가능여부 (no이면 사용자는 화면에서 확대/축소가 불가능하다.)

*minimum-scale,maximum-scale값이 1로 설정한 경우 user-scalable 를 yes로해도 확대/축소가 불가능하다.

 

(+) <meta> 메타 태그가 아닌

CSS파일에서 @viewport 를 만들어서 적용하는 방식으로도 가능하다.

 

 

출처: Do it! 반응형 웹 페이지 만들기