뷰포트와 미디어 쿼리에 관하여

미디어 쿼리는 접속하는 브라우저의 너비에 따라

사이트 레이아웃을 바꾸기 때문에 

반응형 웹 사이트를 제작하는 가장 기본적인 방법이다.

 

뷰포트(viewport)는 스마트 폰에서 

실제 콘텐츠가 표시되는 부분을 가리키는 말이다.

 

문서의 콘텐츠를 스마트폰 화면 너비에 맞춰 표시해야 한다.

이때 사용하는 것이 <meta>태그이며,

다음 소스가 가장 기본으로 사용하는 뷰포트 설정 소스다.

 

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

 

width=device-width: 문서 너비를 현재 기기의 너비에 맞춘다.

initial-scale=1: 문서를 불러와 화면에 표시할 때 기본 배율을 1로 지정한다.

 

<meta>태그에서 뷰포트를 설정하기 위한 속성

width

height

initial-scale

user-scalable

minimum-scale

maximum-scale

target-densityDpi

 

 

미디어 쿼리를 사용하기 위해서는

CSS <style>태그안에

다음과 같은 구문을 삽입해야 한다.

기본형식: @media [only | not] 미디어 유형 [and 조건]* [and 조건]

 

처리 속도나 화면 크기 등에서 

다른 기기보다 모바일 기기의 제약 조건이 더 많기 때문에

모바일 기기의 레이아웃을 기본으로 하여 CSS를 만듭니다.

 

중단점을 정할 때는 콘텐츠를 기준으로 하는 것이 좋습니다.

우선 작은 화면을 기준으로 콘텐츠를 제작하고 화면을 점점 늘려가다가

콘텐츠 배치를 다르게 해야 할 크기가 되면 중단점을 추가합니다.

 

 

<프런트엔드 웹 디자인 입문 중>