Tip&Tech

제목반응형 홈페이지의 3가지 핵심 기법2019-04-03 22:49
카테고리홈페이지

1.반응형 홈페이지의 3가지 핵심 기법

?

① Fluid Grid (Fluid Layout, Flexible Layout, Flexible Grid )

Fluid Grid는 가변성이 있는 그리드(레이아웃)를 이용해 해상도에 최적화시키는 기법의 하나로 가장 쉬운 예로 창 크기를 줄이면 그 부분의 영역이 줄면서 콘텐츠 역시 상황에 맞게 변하게 됩니다. 기본적으로 퍼센트로 레이아웃이나 영역을 잡는다면 문제없이 유동적으로 변화할 것입니다. 쉽게 생각해서 width 값을 퍼센트로 제작해 브라우저의 크기에 따라 레이아웃의 비율이 변경되는 방법으로, 퍼센트의 가변 폭에 따라 내용도 함께 움직입니다.

② Flexible Images

기존에는 이미지를 사용할 때 width, height의 값을 px 등의 고정값으로 설정했지만, 고정값을 넣는 방법이 아닌 퍼센트 개념으로 다가가는 기법으로 이미지가 들어가는 영역의 width 값이 자동으로 계산되어 이미지 크기가 비율대로 조절되는 기법입니다.

Flexible Images 기법을 이용하면 영역 크기에 맞게 이미지의 크기가 변합니다.

③ Media Queries

출력 장치의 해상도, 스캔 방식, 인쇄 여부, 디바이스가 세로인지 가로인지에 따라 작업자가 설정할 수 있습니다. 결국은 어떻게 출력이 되는지에 따라 CSS 처리를 다르게 해서 다양한 상황에 최적화할 수 있는 기법입니다.


Scroll to top