[WEB DESIGN] 반응형 웹 디자인 패턴

 

유동형 패턴

- 모바일 화면을 제외한 대부분의 화면 사이트의 레이아웃을 그대로 유지하면서 브라우저 창 너비에 따라 콘텐트의 크기만 조절

- 아주 큰 화면에서는 콘텐츠 영역의 넓이를 일정하게 유지하기 위해 좌우여백을 남겨둠

- 모바일 화면에서는 콘텐츠가 수직으로 쌓여 표시

- 레이아웃이 똑같이 유지되면서 화면 안의 이미지나 동영상 등의 콘텐츠 크기가 달라짐

 

 

칼럼 드롭 패턴

- 여러 칼럼으로 구성된 레이아웃에서 흔히 사용하는 패턴

- 화면 넓이가 좁아지면 칼럼들이 아래로 떨어지도록 구성

- 모바일 기기 화면 크기가 되면 모든 칼럼이 하나씩 수직으로 배치

- 화면 넓이를 줄였을 때, 화면을 벗어나는 콘텐츠 칼럼이 라래로 옮겨지면서 레이아웃이 바뀜

 

 

레이아웃 이동 패턴

- 칼럼 드롭 패턴과 유사하게 화면 크기에 따라 칼럼을 드롭해 레이아웃을 재배치하는 형태

- 칼롬 순서에 크게 구애받지 않고 칼럼을 드롭함

- 접속하는 기기에 따라 다른 모습을 보여주기 때문에 방문자에게 색다른 경험을 줄 수 있음

 

 

살짝 수정 패턴

- 가장 간단한 형태

- 화면 넓이를 조절하면 레이아웃에는 변화 없이 글자 크기나 이미지 크기만 변함

 

 

캔버스 밖으로 패턴

- 일부 콘텐츠를 화면 밖에 감춰뒀다가 사용자가 필요로 할 때만 화면에 나타나도록 하는 패턴

- 내비게이션을 필요에 따라 표시하거나, 여러 항목들을 나열해 놓고 하나씩만 화면에 보여주고 나머지는 숨기는 방식