본문 바로가기

Dev.FrontEnd/HTML_CSS

[HTML/CSS] 2. Responsive Web Design / 반응형 웹이란?

반응형 웹(Responsive Web)이란?
반응형 웹은 사용자의 특정 해상도를 가징하지 않는 것부터 출발한다.
모든 해상도를 커버할 수 있고, 의도에 따라 특정 해상도 범위에 제한적으로 적용할 수 있으며,
적절한 중단점(breakpoint)를 제공한다.

반응형 웹 개념
*모바일 퍼스트
PC보다 모바일 기기를 먼저 생각해서 디자인하고 프로그래밍 하는 기법이다.
모바일의 제약
1) 모바일 기기의 스크린 크기
2) 네트워크 속도 및 품질
3) 사용하는 모드

반응형 웹은 고 사양(고 해상도) 웹이 저 사양(저 해상도) 모바일 기기에서도 불편함없이 구현되는데 초점이 맞춰져 있다.
때문에 일반 웹이 모바일 웹으로 보여질 때 불필요한 요소들을 최소화시켜야 한다.
가장 대표적인 것으로 일반 웹 메뉴를 버튼 하나로 축소시켜두고 첫 화면부터 컨텐츠를 보여주는 것이다.



반응형 웹 설계하기
1. 가변폭 설정하기
반응형 웹의 첫번째 단계는 웹 문서의 너비를 가변폭으로 설정하는 것이다.
웹 문서의 폭을 가변폭으로 설정하면 모든 해상도에 대응할 수 있다.
웹 문서 너비를 가변폭으로 설정하는 방법은 두가지이다.
1) 모든 구성 요소의 너비를 아예 지정하지 않거나
2) 모든 구성 요소의 너비를 가변폭으로 지정하거나

2. 최소값/최대값 설정하기
모든 단말기(모바일, 태블릿, 데스크톱)의 해상도를 커버해야 한다면
320 ~ 1280 정도의 최소값과 최대값을 설정한다.

3. 컬럼 나누기
모바일 화면에서는 컬럼을 나누지 않는다.
네비게이션 영역을 가변폭으로 처리하게 되면, 좁은 화면에서 모든 문자열을 표시하지 못하고 줄바꿈이 될 것이다.

4. 하이브리드 레이아웃
모든 컬럼의 너비를 가변폭으로 설정하는 것이 일반적으로 적절하지 않다.
그래서 고정폭 컬럼과 가변폭 컬럼을 혼용하여 구현하는 하이브리드 레이아웃을 사용한다.

문서의 전체 너비와 본문 콘텐츠는 가변폭으로 설정하고
네비게이션 또는 사이드바 영역은 고정폭을 적용한다.

하지만 이 방법으로는 데스크톱과 태블릿을 커버할 수 있을진 몰라도 모바일까지 커버할 수는 없다.

5. 미디어 쿼리 설정
CSS3 미디어 쿼리는 화면 크기에 따라서 각기 다른 CSS를 적용할 수 있는 중단점( or 분기점)을 제공한다.
하지만 콘텐츠에 대한 커버가 이루어지지 못했다.

6. 가변폭 미디어 콘텐츠
본문 영역을 가변폭으로 처리했으면 포함하는 콘텐츠 역시 가변폭에 대응해야 한다
문자열은 가변폭을 가진 부모 요소의 너비에 따라 자동적으로 줄바꿈 처리가 되지만
이미지와 비디오 같은 미디어 콘텐츠는 기본적으로 고정폭을 지니고 있다.
때문에 너비를 다시 설정해주어야 한다.
본문 너비보다 작으면 문제가 되지 않지만
본문 너비보다 큰 너비의 이미지는 본문 너비를 초과하지 않도록 너비를 100%로 재설정하는 것이다.
img, video{ max-width:100%; height:auto; }
video{ min-width:100%; }

7. 고정폭 테이블
테이블이 골칫거리이다.
가장 간단한 방법은 테이블이 본문 폭을 넘칠 때는 가로로 스크롤을 할 수 있도록 처리하는 것이다.

8. 모바일 뷰 포트 설정
스마트 폰 기기(모바일)는 태블릿이나 데스크톱과는 달리 독자적인 뷰 포트 처리 방식을 갖고 있다.
태블릿과 데스크톱의 뷰 포트는 웹 문서의 너비와 무관하게 화면에 보이는 영역이 뷰 포트가 되고,
데스크톱은 웹 브라우저의 창 크기를 조절함으로써 사용자가 뷰 포트의 크기를 제어할 수도 있다.

하지만 스마트폰의 경우 단말의 스크린 사이즈와는 무관하게 웹 문서의 너비와 높이가 뷰 포트가 되고
스마트폰 스크린에 웹문서(뷰 포트)를 모두 출력하기 위해 스크린 사이즈가 큰 경우 자동으로 줌 아웃 처리를 한다.

이문제를 해결하기 위해 뷰 포트를 재설정하는 head 영역에 code를 삽입한다.
<meta name="viewport" content="width=device-width">
이 코드를 통해 뷰 포트를 문서가 아닌 스크린 영역으로 재설정한다.

9. 글꼴 크기를 반응형으로 제어
반응형 글꼴 크기의 비밀은 rem(root em)이라 부르는 단위에 있다.
rem이라는 단위를 적용하면 html요소와 글꼴 크기로부터 body부터 div, span의 글꼴 크기를 상대적으로 계산한다.

출처 : http://readme.skplanet.com/?p=9739


3. Responsive web 끝