유동 레이아웃

유동 레이아웃은 웹페이지의 레이아웃이 창 크기에 따라 조정되는 페이지 디자인 유형입니다. 이는 고정된 픽셀 너비 대신 백분율을 사용해 페이지 영역을 정의하는 방식으로 구현됩니다.

대부분의 웹페이지 레이아웃에는 열이 하나, 둘 또는 세 개 포함됩니다. 대부분의 사용자가 비슷한 화면 크기를 사용하던 웹 디자인 초기에는 웹 개발자가 열에 고정된 너비를 지정했습니다. 예를 들어 고정 레이아웃에는 너비가 180px, 600px, 180px인 세 개의 열로 구성된 너비 960px의 주요 콘텐츠 영역이 포함될 수 있습니다. 이 레이아웃은 1024x768 화면에서는 멋지게 보일 수 있지만 1920x1080 화면에서는 작아 보일 수 있으며, 800x600 화면에는 맞지 않습니다.

유동 레이아웃은 레이아웃의 각 영역을 백분율로 정의해 이 문제를 해결합니다. 예를 들어 웹 개발자는 960px의 콘텐츠 영역을 만드는 대신 화면의 80%를 채우는 레이아웃을 만들고, 세 개의 열이 각각 18%, 64%, 18%를 차지하도록 할 수 있습니다. 백분율을 사용하면 콘텐츠가 사용자의 컴퓨터 창에 맞게 확장되거나 축소될 수 있습니다. 고정 레이아웃과 유동 레이아웃을 만드는 데 사용되는 CSS는 다음과 같습니다.

예시에 사용된 CSS 클래스는 각각 페이지의 HTML에 있는 div에 할당할 수 있습니다. 이때 .left, .right, .middle 클래스는 .content 클래스 안에 포함됩니다. content 클래스는 테이블에 할당하고 나머지 클래스는 테이블 셀에 할당할 수도 있습니다. 고정 너비 .content 클래스에는 정의된 너비가 필요하지 않습니다. 포함된 div 또는 테이블 셀의 너비에 맞춰 자동으로 확장되기 때문입니다.

유동 레이아웃과 반응형 디자인 비교

"유동 레이아웃"과 "반응형 웹 디자인"이라는 용어는 때때로 같은 의미로 사용되지만, 둘은 서로 다른 개념입니다. 반응형 웹 디자인으로 만든 페이지에는 창의 너비 또는 페이지에 액세스하는 데 사용된 장치의 유형에 따라 서로 다른 스타일을 불러오는 CSS 미디어 쿼리가 포함됩니다. 반응형 웹 디자인에는 기본 유동 레이아웃보다 더 많은 CSS가 필요하며경우에 따라 (JavaScript도 필요), 페이지 레이아웃을 더 세밀하게 제어할 수 있습니다.