RWD 소개

From. 반응형 웹디자인(Responsive Web Design) . BJPublic

반응형 웹 디자인을 구성하는 기술

미디어 쿼리

미디어 쿼리(Media Queries)는 위도우 폭, 그림 해상도, 디바이스 대상 등의 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 CSS3의 신기능입니다. CSS2의 미디어 타입(Media Type)을 확장한 기능입니다. 반응형 웹 디자인에서는 미디어 쿼리를 이용해, 적용하는 스타일을 디바이스마다(화면 크기마다) 전환합니다.



플루이드 그리드

플루이드 그리드(Fluid Grid)란 페이지의 구성요소를 임의의 그리드에 맞춰 배치하는 [그리드 디자인]의 방법과 브라우저의 윈도우 크기에 따라 각 요소의 크기를 맞추는 [리퀴드 레이아웃]의 방법을 조합한 레이아웃 방법입니다. 반응형 웹 디자인에서 디자인 제작 초기에는 그리드 디자인에서 각 요소를 레이아웃해 레이아웃을 정한 단계에서 px(픽셀) 단위로 지정한 곳을 %단위로 변경합니다. 이러한 방법으로 여러 화면 크기에 맞는 페이즐 제작합니다.



플루이드 이미지

http://alistapart.com/article/fluid-images

플루이드 이미지(Fluid Image)는 브라우저의 윈도우 넓이(레이아웃의 크기)에 맞추어 그림의 크기를 확대 및 축소하는 방법입니다. 플루이드 그리드와 조합함으로써 이미지를 포함한 모든 요소를 화면 크기에 맞출 수 있습니다.





반응형 웹 디자인의 장점

1개의