<HTML+CSS>유동형 레이아웃이란 ?

그리드 시스템

-웹 사이트의 레이아웃을 정할 때 자주 사용하는 기준이 그리드시스템입니다.

꼭 사용 할 필요 없지만, 사이트 전체의 디자인이나 일관성을 유지하기에는 그리드 시스템ㅇ이 편리하다.

화면을 몇 개의 칼럼으로 나누어 요소들을 배치하는 것으로, 필요할 때마다 칼럼들을 묶어 배치할 수 있다. 이러한 장점 때문에 대부분 사이트에서 사용하는 방법입니다.

주로 960픽셀의 12칼럼 그리드를 사용한다..

 

유동형 레이아웃

-사이트를 제작할 때 가장 접근하기 쉬운 것이 픽셀 단위이다.

ex)아이폰의3Gs 브라우저는 320*480 갤탭7인치=600*800 등 모두 픽셀 단위.

이렇게 픽셀 크기로 너비를 지정해서 레이아웃을 만들었다면, 다양한 크기의 브라우저로 그 사이트에 접속했을 경우 지정한 픽셀 크기대로만 표시된다.

단점

이렇게 픽셀이 지정되어 있으면 모니터보다 화면이 작은 스마트폰은 글자를 확인하기 어렵다.

 

그럼 어떻게 ???

따라서, 단점을 극복하기위해 미디어 쿼리를 이용하는 것이다. 이 경우도 CSS를 각각 지정,

하지만 이 방법은 생각보다 까다롭다.

 

 

해결

어떤 기기에서도 동일한 레이아웃을 가지면서 기기 특성에 맞게 웹 문서가 표현될 수 있으려면 문서 안의 각 요소의 너비를 픽셀 값과 같은 고정 폭이 아니라 백분율과 같은 가변폭으로 지정하면 된다.

->이렇게 사이트 레이아웃을 백분율로 지정하는 것을 ‘유동형 레이아웃’이라 한다.

 

-유동형이란, 너비 값이 정해져 있지 않음. 브라우저 너비 값이 바뀌어도 웹 요쇼의 너비 값도 함께 바뀜.