실제 프로젝트를 위해 일반적인 열 레이아웃을 가정하고 있습니다. 하지만 이 프로젝트를 실시간으로 컬러로 보여드리기 전에 열 레이아웃을 직접 구현하는 방법을 구체적으로 보여드리고자 합니다. 여기서는 2열 및 3열 레이아웃에 초점을 맞출 것인데, 이는 여전히 대부분의 웹사이트의 기본을 형성하고 있기 때문입니다.
2열 레이아웃은 웹 디자인에서 가장 고전적인 레이아웃입니다. 탐색은 일반적으로 왼쪽 창 영역에 표시되고 실제 콘텐츠는 오른쪽 열에서 볼 수 있습니다. 그런데 이 동작은 블로그와 관련하여 다소 변경되었습니다. 많은 블로그에서 탐색 또는 광고는 오른쪽에 표시되고 실제 콘텐츠는 왼쪽에 표시됩니다.
이러한 애플리케이션은 CSS에서 비교적 쉽게 구현할 수 있습니다. 사실 두 열은 가장 간단한 레이아웃 형태입니다.
다음 예제에서는 절대 백분율 값을 사용하는 두 열 레이아웃을 보여드리겠습니다.
전체 예제는 다음과 같습니다:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.ko</title> <스타일> #nav { 위치: 절대; 왼쪽: 0; 여백: 0; 너비: 20%; 배경색: #66CCCC; } #main { 여백: 0; 여백-왼쪽: 20%; 너비: 80%; background-color:#6666CC; } </style> </head> <body> <div id="header">절대 위치가 있는 레이아웃</div> <div id="nav">내비게이션</div> <div id="main">여기는 콘텐츠 영역</div> <div id="footer">여기는 저작권 정보가 있는 곳입니다.</div> </body> </ HTML>이것이 브라우저에서 보이는 모습입니다:
왼쪽 열을 오른쪽으로 쉽게 이동할 수 있습니다. 다음 지침에 따라 조정하세요:
- nav의 경우 왼쪽: 0을 오른쪽: 0으로 변경합니다.
- main의 경우 여백 왼쪽을 여백 오른쪽으로 변경하기만 하면 됩니다.
변경 사항을 저장하면 원하는 결과를 볼 수 있습니다.
하지만 절대 위치에 따라 표시되는 레이아웃에는 한 가지 문제가 있습니다. 왼쪽 열의 콘텐츠가 더 많아지면 바닥글 영역을 넘어가게 됩니다.
이는 절대적으로 배치된 요소에 대해 "여유 공간이 유지"되지 않기 때문입니다. 왼쪽 열의 콘텐츠보다 긴 콘텐츠를 메인 영역에 삽입하면 이 문제를 피할 수 있습니다.
따라서 메인 영역이 실제로 왼쪽(또는 오른쪽) 열보다 높다고 확신하는 경우에만 이 레이아웃 양식을 사용해야 합니다.
플로트가 있는 두 열 레이아웃
이전 예제에서 발생한 바닥글 영역이 겹치는 문제는 float 속성을 사용하여 해결할 수 있습니다. 수정된 구문은 다음과 같습니다:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.ko</title> <style> #nav { float: 왼쪽; margin: 0; width: 20%; background-color:#66CCCC; border: 0; } #main { margin: 0; float: 왼쪽; border: 0; background-color:#6666CCCC; width: 80%; } #footer { clear: both; } </style> </head> <body> <div id="header">절대 위치가 있는 레이아웃</div> <div id="nav">내비게이션 영역</div> <div id="main">여기는 콘텐츠 영역</div> <div id="footer">여기는 저작권 정보가 있는 곳입니다.</div> </body> </ HTML>여기서는 두 열에 각각 float 속성을 부여했습니다. 결과적으로 열은 이제 서로 나란히 정렬됩니다.
왼쪽 열에는 너비가 20%로 할당되었습니다. float를 사용하여 배치된 요소는 실제로 항상 너비 사양을 기대한다는 사실에 특히 주의하세요.
실제 콘텐츠 영역에는 너비가 80%로 지정됩니다. 이 영역도 float: 왼쪽으로 배치됩니다. 따라서 이 영역은 왼쪽 열 옆에 표시됩니다.
바닥글 영역이 실제로 항상 아래쪽 창 영역, 즉 열 아래에 표시되도록 다음 구문을 사용합니다:
#바닥글 { clear: both; }
이 변형에 대해 별도의 클래스를 정의할 수 있는 가능성을 이미 지적한 바 있습니다.
플로트가 있는 3열
3열 레이아웃은 웹 디자인에서 널리 사용되는 변형이기도 합니다. 일반적인 레이아웃은 다음과 같습니다:
- 왼쪽 열에는 탐색이 포함됩니다.
- 가운데 열에는 실제 콘텐츠가 포함됩니다.
- 추가 정보 또는 광고는 오른쪽에 표시됩니다.
아래에서 유연한 3열 레이아웃이 생성된 예시를 확인할 수 있습니다. 곧 알게 되겠지만 구문은 위에 표시된 두 열 예제와 매우 유사합니다. 그러나 이제 오른쪽으로 된 추가 div 영역이 있으며, 이는 궁극적으로 창의 오른쪽 열을 나타냅니다.
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.ko</title> <스타일> #main, #right { 여백: 0; 테두리: 0; 패딩:0; } #nav { float: 왼쪽; 여백: 0; 너비: 20%; 배경색:#66CCCC; 테두리: 0; } #main { 여백: 0; float: 왼쪽; 테두리: 0; 배경색:#6666CCCC; 폭: 60%; } #right { float: 오른쪽; 폭: 20%; background-color:#6699FF; } #footer { clear: both; } </style> </head> <body> <div id="header">절대 위치가 있는 레이아웃</div> <div id="nav">내비게이션을 위한 영역</div> <div id="main">여기는 콘텐츠 영역입니다</div> <div id="right">여기는 오른쪽 열입니다</div> <div id="footer">여기는 저작권 정보가 있는 곳입니다.</div> </body> </ HTML>
새 영역에는 너비가 20%로 할당되었습니다. 따라서 레이아웃은 다음과 같습니다:
- 왼쪽 및 오른쪽 열은 각각 사용 가능한 표시 영역의 20%를 차지합니다.
- 가운데 열의 너비는 60퍼센트입니다.
표시된 구문으로 인해 실제로는 오른쪽 영역이 오른쪽에 표시됩니다.
그러나 이 구문은 이 점에서 유연합니다. 메인 영역을 다음과 같이 조정할 수도 있습니다:
#메인 { 여백: 0; float: 오른쪽; 테두리: 0; 배경색: #6666CC; 너비: 60%; }
여기서 float는 오른쪽으로 설정되었습니다. 이렇게 하면 오른쪽 영역이 왼쪽으로 이동합니다.
이 튜토리얼에서는 플로트를 기반으로 기본 레이아웃을 정의하는 것이 얼마나 쉬운지 살펴보았습니다. 이제 이 지식은 웹사이트 구축의 기초가 됩니다. 다음 튜토리얼에서는 기본 구조부터 시작하여 단계별로 웹사이트를 만들 것입니다.
