반응형 웹을 구현하는 다양한 기법들

유동형 그리드

콘텐츠의 폭을 %로 지정 (기기 가로사이즈에 따라 컬럼의 크기가 상대적으로 변화)

 

 

 

 

유동형 레이아웃 

기기 사이즈에 따라 특정 부분이 사라지거나 합쳐지며 구조를 변경하는 기법

다양한 패턴이 존재한다. (Mostly fluid, Column drop, Layout shifter, Tiny tweaks, Off canvas...)

 

1) Mostly fluid

- 주로 유동형그리드로 구성됨

- 대형 및 중형에서 동일한 크기 유지하되, 모바일에서는 수직으로 쌓으며 콘텐츠 재배치

 

 

2) Column drop

가로 사이즈가 좁아짐에 따라 콘텐츠들을 수직으로 쌓아나가는 기법

 

 

 

3) Layout shifter

- 여러 화면 너비에 여러 개의 break point가 존재

- 반응성이 가장 뛰어나지만 유지 관리하기가 훨씬 복잡

- 전체 콘텐츠 레이아웃뿐만 아니라 요소 내의 변경도 포함

 

 

 

4) Tiny tweaks

- 글꼴 및 이미지 크기 미세 변경, 콘텐츠 미세 이동

- 원페이지 웹사이트, 텍스트가 많은 문서 등 단일 레이아웃에 추천

- 예시 http://gingerwhale.com/

 

5) Off canvas

- 사이즈가 작아지면 사용빈도가 낮은 콘텐츠를 화면 밖에 배치하여 클릭했을 때만 보여줌 (필터, 메뉴, 탐색 등)

- 예시 https://store.google.com/?hl=ko

 

 

 

 

반응형 이미지

화면 사이즈에 따라 다른 이미지를 렌더링하면 여러 버전의 이미지를 보여줄 수 있고,

실수로 이미지가 삐져나오거나 잘리는 현상 방지 가능

(요새 자주 들르는 프라이탁 사이트에서도 화면 크기에 따라 다른 이미지를 렌더링하고 있다)