실제로 레이아웃을 구현하기 전에 몇 가지 기본 사항을 명확히 해야 합니다. 우선 레이아웃 유형을 결정해야 합니다. 원칙적으로 세 가지 옵션이 있습니다.
- 고정
- Flexible
- 탄력적
CSS에서는 고정 또는 유연한 치수의 레이아웃을 사용할 수 있습니다. 고정 레이아웃은 일반적으로 픽셀 단위의 치수로 작동합니다. 반면에 유연한 레이아웃은 백분율 값을 기반으로 합니다. 두 레이아웃 변형 모두 장단점이 있습니다.
고정 레이아웃은 일반적으로 그래픽을 사용하여 레이아웃을 만들 때 사용됩니다. (여기에도 CSS 배경 그래픽 사용으로 인한 예외가 있습니다). 레이아웃에 픽셀 단위로 완벽한 요소 배치가 필요한 경우 고정 레이아웃도 일반적으로 사용됩니다. 이러한 유형의 레이아웃에서는 적어도 레이아웃의 너비가 일반적으로 고정된 픽셀 수로 설정됩니다. 이 너비는 일반적으로 특정 화면 해상도를 목표로 합니다.
유연한 레이아웃에서는 상황이 다릅니다. 여기에는 고정 너비가 지정되지 않습니다. 레이아웃은 브라우저 창의 너비를 기준으로 합니다.
예를 들어 이러한 레이아웃에서는 너비가 백분율로 지정됩니다. 사용자가 브라우저 창의 크기를 조정하면 레이아웃의 크기도 변경됩니다.
최신 CSS 속성 덕분에 이제 또 다른 레이아웃 변형, 즉 소위 반응형 레이아웃도 있습니다. 여기에서는 예를 들어 데스크톱 컴퓨터와 스마트폰에서 완전히 다르게 보이도록 레이아웃이 변경됩니다. 예를 들어 여기 PSD-Tutorials.de에서는 이러한 레이아웃으로 작업했습니다. 데스크톱에서 "일반" 브라우저 창 크기로 페이지를 불러오면 다음 그림이 표시됩니다.
그러나 이제 창을 축소하면 웹사이트의 요소 배열이 실제로 변경됩니다.
반응형 레이아웃을 만드는 데 필요한 노력은 비교적 높습니다. 결국 방문자의 화면 크기를 파악하고 그에 적합한 레이아웃을 제시해야 합니다. 그리고 다양한 화면 크기에 적합한 레이아웃을 실제로 개발해야 합니다. 예를 들어 대형 모니터로 웹사이트에 접속하는 방문자에게는 3열 레이아웃이 표시됩니다. 반면에 다른 방문자가 스마트폰으로 웹사이트에 액세스하는 경우에는 단일 열 레이아웃이 표시됩니다.
변형의 장단점
레이아웃을 구현하기 전에 어떤 레이아웃 유형을 사용할지 생각해야 합니다. 고정 레이아웃의 장단점을 간략하게 설명해드리겠습니다.
- 디자인 템플릿은 확실히 여기서 구현하기 가장 쉽습니다.
- 표준 해상도를 고수하면 웹 사이트를 표시 할 때 거의 문제가 없습니다.
- 레이아웃이 이해하기 쉽습니다. (물론 웹 개발자로서 고객에게 레이아웃을 설명하려는 경우 이점이 있습니다).
그러나 고정 레이아웃에는 단점도 있습니다.
- 예를 들어 고정된 크기 때문에 유연성이 떨어지고 매우 작거나 큰 화면에 적합하지 않습니다. 많은 공간이 낭비되는 경우가 많습니다.
- 접근성 측면에서 특정 제한이 적용됩니다.
유연한 레이아웃에도 장단점이 있습니다. 첫째, 장점입니다.
- 레이아웃이 브라우저 창 크기에 맞게 자동으로 조정됩니다.
- 따라서 방문자는 웹사이트가 표시되는 방식에 많은 영향을 미칠 수 있습니다.
그러나 여기에는 단점도 있습니다.
- 개발자는 결과를 제어하기 어렵습니다. 따라서 레이아웃 사양은 제한된 범위에서만 구현할 수 있습니다.
- 페이지 콘텐츠를 광범위하게 사용자 정의해야 합니다.
- 큰 화면에서는 짧은 텍스트가 한 줄로만 표시되는 경우가 많기 때문에 "지저분하게" 표시될 수 있습니다. (CSS는 최소 너비와 같은 해당 속성을 제공합니다).
또 다른 레이아웃 형태는 고정 레이아웃과 유연한 레이아웃 사이의 중간 지점을 나타냅니다. 이를 소위 탄력적 레이아웃이라고 합니다. 주요 특징은 측정 단위인 렘입니다. (최근에는 렘도 점점 더 유행하고 있습니다. em과 달리 렘은 항상 em과 같은 상위 요소가 아닌 루트 요소를 지향합니다.)
이러한 레이아웃의 너비와 높이는 유연합니다. 페이지의 디자인은 브라우저 창의 크기에 비례하여 확장됩니다. 한편으로 이러한 형태의 디자인은 실제 구현에 있어 가장 복잡합니다. 이는 변화하는 브라우저 창에서 요소가 어떻게 작동할지 미리 정확히 알아야 하기 때문입니다. 탄력적 레이아웃은 주로 사진과 동영상이 많은 웹사이트에 사용됩니다.
탄력적 레이아웃의 장점
- 사용 가능한 공간이 최적으로 활용됩니다.
- 콘텐츠는 항상 가능한 한 비례적으로 크게 표시됩니다.
하지만 물론 탄력적 레이아웃에는 단점도 있습니다.
- 이러한 레이아웃의 디자인은 매우 복잡합니다.
- 구현 또한 간단하지 않습니다.
선택의 폭이 넓다
따라서 언급된 변형 중 어떤 것을 사용할지 결정해야 합니다. 아직 HTML/CSS 개발의 시작 단계에 있다면 고정 레이아웃으로 시작하는 것이 좋습니다. 반면에 이미 웹 개발 분야에 대한 고급 지식이 있다면 반응형 레이아웃으로 직접 작업해야 합니다. 최종적으로 웹사이트에 액세스하는 데 사용되는 최종 기기에 관계없이 올바른 방향으로 나아갈 수 있습니다.
