CSS Responsive Web Design(반응형 레이아웃)

앞에서 살펴본 layout 에는 사실 몇가지 문제가 숨겨져 있다.

그 문제를 해결할 열쇠는 바로 Responsive Web Design이다.

먼저 어떤 문제가 있는지 알아본다.

화면폭을 좁히면 아래 그림과 같이 화면이 망가지는데 이것는 HTML 요소에 고정폭을 지정하여 가로 스크롤을 발생시키지 않으면 해결이 어렵다.

 

그리고 모바일과 같이 작은 해상도의 디바이스에서 접근했을 때 화면이 너무 작아져 가시성에 문제가 발생한다.

1. Responsive Web Design 개요

사용자가 어떤 디바이스로 웹사이트를 방문할 지 알 수 없다.

layout은 방문자의 화면 해상도를 고려하여야 한다. 가로폭이 너무 큰 layout을 작성하면 작은 해상도 모니터로 방문하였을 때 가로 스크롤이 생겨서 사용이 불편할 수도 있다.

또한 스마트폰이나 태블릿 등 모바일 기기는 화면이 작기 때문에 가독성에 더욱 신경써야 한다. 보통 웹사이트가 축소되어 가로 스크롤 없이 콘텐츠를 볼 수 있으나 글자가 너무 작아지기 때문이다. 데스크탑용, 테블릿용, 모바일용 웹사이트를 별도 구축할 수도 있지만 One Source Multi Use의 관점에서 올바른 해결책은 아니다.

이러한 문제를 해결하는 방법 중의 하나가 반응형 웹디자인(Responsive Web Design)이다.

화면 해상도에 따라 가로폭이나 배치를 변경하여 가독성을 높이는 것이다.

즉, 하나의 웹사이트를 구축하여 다양한 디바이스의 화면 해상도에 최적화된 웹사이트를 제공하는 것이다.

 

1.1 viewport meta tag

viewport란 웹페이지의 가시영역을 의미한다. viewport는 디바이스에 따라 차이가 있다. 예를 들어 모바일 브라우저는 주화면이 세로 화면이고 윈도우 resize가 불가하며 화면 터치를 사용하는 등 데스크탑 브라우저와 구성이나 형태가 다르다. 또한 모바일의 화면은 데스크탑 화면보다 훨씬 작으므로 데스크탑용 웹페이지를 그대로 모바일에 출력하면 가독성이 현저히 나빠진다.

따라서 viewport를 이용하여 디바이스의 특성과 디바이스의 화면 크기 등을 고려하여 각종 디바이스 사용자에게 최적화된 웹페이지를 제공할 수 있다.

 

meta tag는 브라우저 혹은 검색엔진최적화(SEO)를 위해 검색엔진에게 메타데이터를 전달하기 위해 사용된다.

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

일반적으로 viewport meta tag는 모바일 디바이스에서만 적용된다.

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

위 예제는 가장 일반적인 viewport 설정이다.

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

 

 

1.2 @media

이것은 서로 다른 미디어 타입(print, screen…)에 따라 각각의 styles을 지정하는 것을 가능하게 한다. 다음은 일반 화면(screen)과 인쇄장치 별로 서로 다른 style을 지정하는 예이다.

@media screen {
  * { color: red; }
}
@media print {
  * { color: blue; }
}

반응형 웹디자인에 사용되는 핵심 기술은 @media이다.

@media을 사용하여 미디어 별로 style을 지정하는 것을 Media Query라 한다. 디바이스를 지정하는 것뿐만 아니라 디바이스의 크기나 비율까지 구분할 수 있다.

다음은 Media Query의 문법이다.

@media not|only mediatype and (expressions) {
  CSS-Code;
}

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

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

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 접두사를 사용할 수 있다.

W3C > Media Queries > Media features

일반적으로 반응형 웹 디자인은 viewport 너비(width 프로퍼티)를 기준으로 한다.

viewport의 width 프로퍼티를 이용하여 viewport 너비에 따라 반응하는 범위(breakpoint)를 지정할 수 있다.

/* 801px ~ */
* { color: black; }
/* ~ 800px */
@media screen and (max-width: 800px) {
  * { color: blue; }
}
/* ~ 480px */
@media screen and (max-width: 480px) {
  * { color: red; }
}