웹 페이지 레이아웃 은 두 가지 방법으로 수행 할 수 있습니다.
- 고정 너비 레이아웃 - 전체 페이지의 너비가 특정 숫자 값으로 설정된 레이아웃입니다.
- Liquid Layouts - 뷰어 브라우저의 넓이에 따라 전체 페이지 너비가 유연한 레이아웃입니다.
두 가지 레이아웃 방법을 모두 사용하는 데는 충분한 이유가 있지만 각 방법의 상대적 이점과 부족함을 모두 이해하지 못하면 웹 페이지에 사용할 용도를 결정할 수 없습니다.
고정 너비 레이아웃
고정 레이아웃은 웹 디자이너가 결정한 특정 크기로 시작하는 레이아웃입니다. 페이지를 보는 브라우저 창의 크기에 관계없이이 너비는 그대로 유지됩니다. 고정 너비 레이아웃을 사용하면 디자이너가 대부분의 상황에서 페이지 모양을 직접 제어 할 수 있습니다. 설계자는 레이아웃을 미세하게 조정하고 브라우저와 컴퓨터에서 일관되게 유지할 수 있으므로 인쇄 배경을 가진 설계자가 선호하는 경우가 많습니다.
액체 배치
Liquid 레이아웃은 현재 브라우저 윈도우 크기의 백분율을 기반으로 한 레이아웃입니다. 현재 시청자가 사이트를보고있을 때 브라우저 크기를 변경하더라도 창 크기에 따라 조정됩니다. 액체 너비 레이아웃을 사용하면 주어진 웹 브라우저 창이나 화면 해상도가 제공하는 공간을 매우 효율적으로 사용할 수 있습니다. 페이지를 보는 사람과 관계없이 크기와 상대적인 페이지 가중치가 일관되게 유지되므로 정보를 최대한 많이 차지하지 않는 디자이너가 선호하는 경우가 많습니다.
스테이크에서 무엇을 할 수 있습니까?
귀하의 웹 사이트 디자인 을 위해 선택한 방법은 귀하의 디자인 그 이상에 영향을 미칩니다. 선택에 따라 독자가 텍스트를 스캔하고 찾고있는 것을 찾거나 때로는 사이트를 사용하는 독자의 능력에 영향을 미칩니다. 또한 레이아웃 스타일은 브랜딩, 부동산 가용성 및 사이트의 미학을 통해 웹 사이트 마케팅에 대한 귀하의 노력에 영향을 미칩니다.
고정 너비 레이아웃의 이점
- 고정 폭 레이아웃을 사용하면 설계자는 누가 보든 페이지가 동일하게 보이도록 만들 수 있습니다.
- 이미지와 같은 고정 너비 요소는 전체 페이지의 너비에 해당 요소가 포함되므로 작은 모니터에서 텍스트를 압도하지 않습니다.
- 스캔 길이는 웹 브라우저의 크기와 상관없이 큰 텍스트 세그먼트의 영향을받지 않습니다.
Liquid Layouts의 장점
- 액체 폭 레이아웃은 사용 가능한 공간을 채우기 위해 확대 및 축소됩니다.
- 사용 가능한 모든 부동산이 사용되므로 디자이너는 더 큰 모니터에 더 많은 콘텐츠를 표시 할 수 있지만 더 작은 디스플레이에서는 여전히 유용합니다.
- Liquid 레이아웃은 상대적 너비의 일관성을 제공하므로 페이지가 더 큰 글꼴 크기와 같이 고객이 부과 한 제한에보다 동적으로 대응할 수 있습니다.
고정 너비 레이아웃에 대한 단점
- 고정 폭 레이아웃을 사용하면 작은 브라우저 창에서 가로 스크롤이 발생할 수 있습니다. 그리고 대부분의 사람들은 수평으로 스크롤하는 것을 좋아하지 않습니다.
- 또한 대형 모니터에서 많은 공백이 발생하여 사용하지 않은 공간이 많아지고 필요한 경우보다 수직으로 더 많은 스크롤이 발생할 수 있습니다.
- 고정 너비 레이아웃은 글꼴 크기에 대한 고객의 변경 사항을 잘 처리하지 못합니다. 글꼴 크기가 조금만 증가해도 괜찮 으면 좋겠지 만 크게 늘리면 레이아웃이 손상 될 수 있습니다.
Liquid Layouts의 단점
- 액체 레이아웃은 페이지의 다양한 요소의 너비에 대한 정확한 제어를 거의 허용하지 않습니다.
- 텍스트가 너무 넓어서 편안하게 스캔 할 수 없거나 작은 브라우저에서 너무 작아서 단어가 명확하게 표시 될 수 없습니다.
- 액체 레이아웃은 이미지와 같은 고정 너비 요소가 액체 열에 배치 될 때 문제가 발생할 수 있습니다. 열에 이미지 공간이 충분하지 않으면 일부 브라우저는 디자이너의 지시 사항을 무시하고 열 너비를 늘리고 다른 브라우저에서는 텍스트와 이미지가 겹쳐 정확한 비율을 얻게됩니다.
결론
가능한 많은 공간을 전달해야하는 많은 정보가있는 많은 사이트는 액체 레이아웃으로 잘 작동합니다. 이를 통해 대형 모니터가 제공하는 모든 부동산을 활용하면서 작은 디스플레이를 단락시키지 않아도됩니다.
모든 상황에서 페이지 모양을 정확하게 제어해야하는 사이트는 고정 너비 레이아웃을 사용하는 것이 좋습니다. 이렇게하면 어떤 크기의 모니터를 보더라도 웹 사이트의 브랜딩이 일관되고 명확 해집니다.
레이아웃 환경 설정
많은 사람들이 혼합 된 방식을 선호합니다. 그들은 큰 텍스트 블록에 대해 액체 레이아웃을 사용하는 것을 좋아하지 않습니다. 텍스트 레이아웃을 작은 모니터에서 읽을 수 없게하거나 큰 모니터에서 스캔 할 수 없게 만들 수 있습니다. 따라서 페이지의 기본 열을 고정 너비로 만들지 만 머리글, 바닥 글 및 측면 열을 더 융통성있게 만들어 나머지 영역을 차지하고 더 큰 브라우저의 용량을 잃지 않도록합니다.
일부 사이트는 스크립트를 사용하여 브라우저 창 크기를 결정한 다음 그에 따라 표시 요소를 변경합니다. 예를 들어, 매우 넓은 창에서 그러한 사이트를 열면 왼쪽에 링크가 추가로 표시되어 작은 모니터를 사용하는 고객에게 표시되지 않을 수 있습니다. 또한 광고 주위의 텍스트 배치는 브라우저 창이 얼마나 넓은 지에 달려 있습니다. 크기가 충분하면 사이트가 텍스트를 감싸고 그렇지 않으면 광고 아래에 기사 텍스트가 표시됩니다. 대부분의 사이트는이 수준의 복잡성을 필요로하지 않지만 작은 화면의 디스플레이에 영향을주지 않고 큰 화면을 활용할 수있는 방법을 보여줍니다.