즐거운인생 :: Responsive Web Design Guidelines and Tutorials

Responsive Web Design Guidelines and Tutorials

개발관련/CSS 2011/11/06 22:44

[원문] http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/

현재 홈페이지를 가지고 있는 사람들은 자신만의 모바일 홈페이지를 만들고 싶어 했다.
그래서 아이폰, 안드로이드 폰에 대한 모바일 홈페이지를 만들어 이용했다.
그 뒤 아이패드, 갤럭시 탭과 같은 고 해상도 모바일 기기가 나오고 그 곳에서 기존 모바일 홈페이지를 보니 너무 단순하고 홈페이지에 많은 정보담지 않아 해상도에 맞는 모바일을 새로 만들기도 하는 헛된 수고가 들었다.

그러나 여기에서 문제가 그치지 않을 것이다.
앞으로 수 많은 다양한 해상도의 모바일 기기가 나올 것인데 거기에 맞게 새로 만들수 없는 것이다.

그래서 나온 방법이 Responsive Web Design 이다.
Responsive Web Design 은 주변 환경에 반응하는 웹 디자인 방법이다.

주변 환경에 반응적이라는 말 중에 주변 환경은 무엇일까?

그것은 바로 화면해상도, 플랫폼, 방향(가로 및 세로) 등의 환경과 사용자의 동작에 반응하는 웹 디자인이다.

반응적인 웹 디자인은 다음과 같은 사항들로 구성되어 있다.

Fluid Grids (유동적인 레이아웃)
Fluid Images (유동적인 이미지)
CSS media queries
위 3가지를 보완해주는 Scripts

Fluid Grids (유동적인 레이아웃)

[참고] : http://www.alistapart.com/articles/fluidgrids/

레이아웃을 특정 사이즈로 정하지 않고 (max-width, width:100% 로 지정) 상대적으로 변경하여 너비를 변경할 때 마다 유연하게 레이아웃이 변경되도록 구성한다.

특정 IE에서 max-width 등을 지원해주지 않는데 http://code.google.com/p/ie7-js/ 스크립트를 사용하면 지원가능하다.

[데모예제] : http://www.alistapart.com/d/fluidgrids/examples/grid/final.html

Fluid Images (유동적인 레이아웃)