[PoiemaWeb] 반응형 레이아웃

1. Responsive Web Design 개요

  1.1 viewport meta tag

• viewport란 웹페이지의 가시영역을 의미한다.
  모바일 브라우저는 세로 화면이고 윈도우 resize가 불가하며 화면 터치를 사용하는 등 데스크탑 브라우저와 구성이나 형태가 다르다.
• 모바일 화면은 데스크탑 화면보다 훨씬 작으므로 데스크탑용 웹페이지를 그대로 모바일에 출력하며 가독성이 현저히 나빠진다. 따라서  viewport를 이용하여 디바이스의 특성과 디바이스의 화면 크기 등을 고려하여 각종 디바이스 사용자에게 최적화된 웹페이지를 제공할 수 있다.
• mega tag는 브라우저 혹은 검색엔진최적화(SEO)를 위해 검색엔진에게 메타데이터를 전달하기 위해 사용된다.
  viewport meta tag는 브라우저의 화면 설정과 관련된 정보를 제공한다.
• meta tag는 px단위를 사용하며 단위 표현은 생략한다. 복수개의 프로퍼티를 사용할 때 쉼표로 구분한다.
• 일반적으로viewport mega tag는 모바일 디바이스에서만 적용된다.

프로퍼티	Description	사용 예
width	viewport 너비(px). 기본값: 980px	width=240
		width=device-width
height	viewport 높이(px)	height=800
		width=device-height
initial-scale	viewport초기 배율	initial-scale=1.0
user-scale	확대 축소 가능 여부	user-scale=no
maximum-scale	viewport 최대 배율	maximum-scale=2.0
minimum-scale	viewport 최소 배율	minimum-scale=1.0

위 예제는 가로폭을 디바이스의 가로폭에 맞추고 초기화면 배율을 100%로 설정하는 것을 의미한다.

 

  1.2 @media

• 이것은 서로 다른 미디어 타입(print, screen...)에 따라 각각의 styles을 지정하는 것을 가능하게 한다.
• 반응형 웹디자인에 사용되는 핵심 기술은 @media 이다.
• @media를 사용하여 미디어 별로style을 지정하는 것을 Media Query라 한다.
  디바이스를 지정하는 것뿐만 아니라 디바이스의 크기나 비율까지 구분할 수 있다.

• 아래의 표는 Media Query의 표현식에서 사용할 수 있는 프로퍼티이다.

프로퍼티	Description
width	viewport 너비(px)
height	viewport 높이(px)
device-width	디바이스의 물리적 너비(px)
device-height	디바이스의 물리적 높이(px)
orientation	디바이스 방향 (가로 방향: landscape, 세로방향: portrait)
device-aspect-ratio	디바이스의 물리적 width/height 비율
color	디바이스에서 표현 가능한 최대 색상 비트수
monochrome	흑백 디바이스의 픽셀 당 비트수
resolution	디바이스 해상도

• orientation을 제외한 모든 프로퍼티는 min/max 접두사를 사용할 수 있다.
• 일반적으로 반응형 웹 디자인은 viewport너비(width프로퍼티)를 기준으로 한다.