1. Responsive Web Design 개요

문제점
- 사용자가 어떤 디바이스로 웹사이트를 방문할지 알 수 없다.
- 따라서 layout은 방문자의 화면 해상도를 고려하여야 하고, 가독성을 신경써야 한다.
  - 예를들어서 모바일 기기에서 글자의 크기가 너무 작아지면 안된다.
해결책
- 기기 종류별로 웹사이트를 별도 구축하기(PC, 태블릿, 모바일 등)
  
  ⇒ One Source Multi Use 관점에서 올바른 해결책이 아니다.
- 반응형 웹디자인(Responsive Web Design) 적용하기
  - 화면 해상도에 따라 가로폭이나 배치를 변경하여 가독성을 높이는 것.
  - 하나의 웹사이트를 구축하여 다양한 디바이스의 화면 해상도에 최적화된 웹사이트를 제공하는 것.
  - HTML5/CSS3/Javascript만으로 네이티브 앱과 차이를 느낄 수 없는 앱을 만들 수 있다. 다음은 최근 관심을 끌고 있는 Web App Framework이다.
    - ionic
    - Electron
    - PhoneGap
    - Sencha Touch

아래부터는 반응형 웹 디자인 적용 방법을 알아볼 것이다.

1.1 viewport meta tag

웹페이지의 가시영역을 의미한다.
디바이스에 따라 차이점이 있다. 예를들어…
- 모바일 브라우저는
  - 주화면이 세로 방향이고
  - 윈도우 resize가 불가하며
  - 화면 터치를 사용하며
  - 데스크탑 화면보다 훨씬 작다.
따라서 viewport를 이용하여 디바이스의 특성과 디바이스의 화면 크기 등을 고려한 웹디자인을 한다면 각종 디바이스 사용자에게 최적화된 웹페이지를 제공할 수 있다.
viewport meta tag는 브라우저의 화면 설정과 관련된 정보를 (브라우저에게?)제공한다.
- meta tag에서는 px단위를 사용하며, 단위는 생략한다. 복수개의 프로퍼티를 사용할때는 쉼표(,)로 구분한다.
일반적으로 viewport meta tag는 모바일 디바이스에서만 적용된다.

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

위 예제는 (반응형 웹 디자인을 할때도) 가장 일반적인 viewport 설정이라고 한다. 가로폭을 디바이스의 가로폭에 맞추고, 초기 화면 배율을 100%로 설정하는 것을 의미한다.

Untitled