Layout 2 - 고정 너비 레이아웃 VS 유동 레이아웃

From. HTML & CSS 웹사이트 개발과 디자인 기초 (존 두켓 / 에이콘 출판사)


고정 너비 레이아웃

고정 너비 레이아웃(fixed width layout) 디자인은 사용자가 브라우저 창의 크기를 늘리거나 줄이더라도 크기가 변경되지 않는다. 대체로 단위는 픽셀을 사용한다.

장점
◈ 픽셀 값을 사용하여 요소의 크기와 위치를 정확히 제어할 수 있다.
◈ 유동 레이아웃보다 항목의 모양이나 위치의 제어가 용이하다.
◈ 화면 크기와 상관 없이 텍스트 줄의 길이를 제어할 수 있다.
◈ 이미지의 크기는 페이지의 나머지 부분에서도 항상 동일하게 유지된다.
단점
◈ 페이지의 가장자리에 큰 여백이 생길 수 있다.
◈ 사용자가의 화면 해상도가 다지이너의 화면보다 더 높을 경우 페이지가 더 작아 보일 수 있으며 텍스트는 읽기 더 어려워질 수 있다.
◈ 사용자가 폰트 크기를 늘리면 텍스트가 할당된 영역에 맞지 않을 수 있다.
◈ 디자인을 데스트톱이나 노트북 컴퓨터와 유사한 크기나 해상도를 제공하는 기기에 최적화 돼 있다.
◈ 페이지는 동일한 콘텐츠에 대해 유동 레이아웃보다 세로 영역을 더 많이 차지한다.


유동 레이아웃

유동 레이아웃(liquid layout) 디자인은 사용자가 브라우저 창의 크기를 늘리거나 줄이면 커지거나 작아진다. 대체로 단위는 퍼센트를 사용한다.

장점
◈ 페이지는 전체 브라우저 창을 채우기 위해 확대된다. 따라서 큰 화면의 페이지 주위에 여백이 생기지 않는다.
◈ 사용자의 창이 작으면 사용자가 옆으로 스크롤하지 않아도 페이지에 맞게 축소된다.
◈ 페이지가 늘어날 수 있으므로 사용자는 디자이너의 의도보다 폰트 크기를 더 크게 설정할 수 있다.
단점
◈ 페이지의 섹션 너비를 제어하지 않으면 특정 요소 주위에 예기치 못한 여백이나 밀린 항목으로 인해 의도한 디자인과 많이 달라질 수 있다.
◈ 사용자의 창이 넓으면 텍스트의줄이 매우 길어져 가독성이 떨어질 수 있다.
◈ 사용자의 창이 좁으면 단어가 밀릴 수 있으며 일부 단어는 여러 줄에 걸쳐 나타날 수도 있다.
◈ 사용자가 창을 너무 작게 만들어 이미지 같은 고정 너비 항목이 표현하기에 너무 작은 박스에 있게 되면 이미지가 텍스트 영역을 침범할 수 있다.

유동 레이아웃은 브라우저의 전체 너비로 확대할 수 있으므로 결과적으로 텍스트의 줄이 길어져 가독성이 떨어질 수 있다. 따라서 유동 레이아웃은 페이지의 일부분만 확대하거나 축소시키도록 적용한다. 페이지의 나머지 부분은 최소나 최대 너비를 설정한다.