웹페이지를 만들면 주로 CSS로 레이아웃을 하기 때문에 포토샵으로 만든 이미지는 잘 사용하지 않습니다. 그래도 특수한 경우 작은 이미지를 사용해서 상하로 반복될 수 있는 이미지를 삽입하면 원하는 효과를 얻을 수 있습니다. 이번 글에서는 제 블로그의 방문자님이 궁금해 하는 내용으로 오랫만에 HTML/CSS에 관한 글을 올려봅니다. 우선 이 글의 제목을 보면 금방 이해가 힘들므로 그림을 보면서 무슨 의미인지 알아보겠습니다.
간단한 구조의 웹사이트 레이아웃입니다. 현재 상황을 보면 컨텐트와 사이드바 사이에 선이 그려져 있습니다. 두 곳의 배경 색상도 다르죠. 대부분의 경우 위와같은 레이아웃을 만들려면 두 개의 요소의 높이가 같아야합니다. 하지만 두개의 요소의 내용이 항상 같을 수는 없죠. 컨텐트 영역의 내용이 많으면 상하로 늘어나고 사이드바와 높이가 달라서 사이드바 영역의 배경이 다르게 나오게 됩니다. 위 상태에서 실제 사이드바의 높이가 어떤지 요소검사를 해보겠습니다.
요소검사를 해보니 사이드바의 높이가 200픽셀입니다. 하지만 컨텐트 영역과 같은 높이로 착각이 드는 것은 사이드바의 배경으로 포토샵으로 만든 이미지를 사용했기 때문입니다. 실제로는 사이드바의 배경은 투명이고 컨텐트와 사이드바 영역을 감싸고 있는 컨테이너의 배경이미지인 것입니다.
이번에는 사이드바의 높이를 400픽셀로 늘렸습니다. 그런데도 컨텐트 영역의 높이가 사이드바와 같습니다. 이렇게 항상 두 영역의 높이가 같도록 나타나게 하는 방법이 이번 글에서 알아볼 내용입니다. 위그림에서 사용된 코드는 아래와 같습니다.
|
편의상 CSS는 임베드 방식으로 작성했습니다.
우선 body는 중앙배치를 하기 위해 width:960px; margin:20px auto;로 설정해서 폭을 960픽셀로 했습니다. 배경은 옅은 회색이고요. 컨텐트 영역과 사이드바의 영역은 좌우로 배치하기 위해 폭을 660과 300으로 했습니다. 좌우로 배치하기 위해 float:left;를 사용했습니다. 헤더와 푸터는 형식적으로 배치한 것이고 중요한 것은 컨테이너 영역입니다.
<div class="clear"></div>를 사용한 것은 요소가 float 되고 있으면 뜨게 되므로 아래에 있는 요소가 위로 올라와서 자리를 차지하는 것을 방지합니다. CSS에서 clear:both;가 작용을 하죠.
그러면 이제 .container 에 대한 설명만 남았습니다.
|
우선 배경색상을 흰색으로 하고 이미지를 삽입했습니다. 이 이미지는 폭이 사이드바의 폭과 같은 300픽셀이고 높이는 2픽셀입니다. 1픽셀로 해도 됩니다. 이 작은 높이의 이미지가 상하로 반복돼서 사이드바의 배경을 만들고 있습니다. 바로 repeat-y 때문이죠. 이것은 y축을 기준으로 반복하라는 의미입니다. 바로 다음에 나오는 것이 헷갈리는 배경이미지의 위치 값입니다.
현재 .container는 사이드바와 컨텐트 영역을 감싸고 있는데 폭이 960픽셀이고 배경이미지를 우측 상단에 배치하려면 top right을 사용합니다. 그 위치에서 상하로 반복되는 것이죠. 중앙을 기준으로 반복시키려면 top center으로 입력하면 됩니다.
만일 사이드바를 좌측으로 하고 싶다면 top left로 하면 되지만 위 그림을 보면 배경이미지만 바뀌었죠. 그래서 실제 HTML의 코드도 위치를 바꿔줘야합니다.
|
사이드바는 이미 float:left;되고 있으므로 컨텐트만 float:left;시켜주면 됩니다. 그러면 아래 그림처럼 나옵니다.
이처럼 CSS를 이용하면 사이드바와 컨텐트의 위치도 자유롭게 변경할 수 있습니다.
사용 코드와 이미지-->
layout-test.zip
