반응형 웹 디자인(responsive web design, RWD)이란 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다.
디바이스의 디스플레이의 종류에 반응하여 그에 맞도록 적절하게 UI 요소들이 유기적으로 배치되도록 설계된다.
반응형 웹 디자인을 하기 위해서는 일반 웹 디자인과 다른 특별한 기법들이 사용된다.
이는 웹 디자인에 대한 높은 이해도와 새로운 레이아웃 등의 개념을 필요로 한다.
- 반응형 웹 디자인을 할 때 필수적인 기법들
미디어 쿼리
미디어 쿼리는 CSS2부터 시작되어 CSS3에서 본격적으로 쓰이기 시작한 웹 기법이다.
디바이스의 폭이나 높이 등의 정보를 가지고 스타일을 개별적으로 줄 수있다.
미디어 타입은 all, print, screen, speech등등으로 나뉜다.
너비 및 높이는 min- 이나 max- 으로 최대인지, 아니면 최소인지를 정한다.
그리고 CSS 입력은 말 그대로 CSS를 입력하는 것이다.
유동형 그리드
유동형 그리드(Fluid Grids)는 고정된 단위가 아니라 상황에 맞게 변할 수 있는 em이나 % 등의 단위를 사용하는 기법을 말한다.
즉 웹브라우저 창 크기를 늘이거나 줄이면 페이지를 구성하는 요소의 크기도 그에 맞게 변한다는 뜻이다.
미디어 쿼리와 같이 이용하면 특정 범위의 스크린에 따른 고정형 그리드/반응형 그리드의 구현도 가능하다.
반응형 레이아웃
반응형 웹 디자인의 결과물로 볼 수 있다. 여러가지 패턴이 있으며, 일부는 HTML, CSS만으로 구현이 불가능한 것들도 있다.
뷰포트 설정
뷰포트(viewport)란 모니터의 출력에 대한 화면 영역을 설정하는 것을 말한다.
뷰포트를 명시하지 않으면 반응형으로 웹디자인을 하더라도 PC 화면이 떠버리는 결과가 발생하게 된다.
2014년 기준으로 가장 많이 사용되는 뷰포트 명시법은 HTML의 <meta> 태그를 이용하는 방법인데, 이 방식은 Safari에서 처음 사용하여 크롬, 오페라, 파이어폭스 등으로 따라서 적용한 방식이다.
그러나 W3C에서 권장하는 방식은 CSS에서 직접 뷰포트를 명시하는 방식으로, 표준화가 완전히 되지 않아 IE10 이상과 오페라에서만 지원하고있다.
<meta> 태그를 이용한 방식과 다르게, CSS에서 뷰포트를 명시하게 되면 미디어 쿼리와 중첩하여 개발자에게 있어 보다 다양한 기법을 구현해낼 수 있다는 장점이 있다.
특징
- 하나의 코드 : 하나의 콘텐츠에 오직 하나의 HTML 소스만 있다. 특정 장치에 최적화된 여러가지의 HTML이 있으면 반응형이라고 부르지 않음. (CSS, JS 파일은 여러가지가 존재할 수 있다.)
- 하나의 URL : 특정 장치에 최적화된 페이지로 연결되는 별도의 URL(대부분 m.domain.com 같은 식이다)이 있으면 반응형이라고 부르지 않는다.
반응형 웹 디자인은 유연한 레이아웃에 대응하여 항상 최적의 화면을 제공함으로써 다양한 스크린 사이즈를 지닌 디바이스에 적응하게 된다.
그리고 반응형 웹이 일반 웹 디자인과 다른 큰 이유 중에 하나는 이 모든 기술이 하나의 소스로 구현 가능하다는 점이다.
보통 일반 웹 디자인의 경우에는 PC와 태블릿, 스마트폰의 브라우저 각각에 최적화시킨 소스를 개발하여 각 디바이스 별로 산출물이 생긴다.
나무위키 위키백과 반응형 웹디자인 참고
ko.m.wikipedia.org/wiki/%EB%B0%98%EC%9D%91%ED%98%95_%EC%9B%B9_%EB%94%94%EC%9E%90%EC%9D%B8
반응형 웹 디자인 - 위키백과, 우리 모두의 백과사전
반응형 웹 디자인(responsive web design, RWD)이란 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을
ko.m.wikipedia.org