좌측엔 사이드바가 있고 우측엔 세로 100%짜리 본문 영역이 있는 2단으로 된, 전체적으로는 가운데 정렬이고 영역 사이에 구분선이 있는 블로그 스킨을 만들려면 어떻게 하는 게 좋을까요?
조건은 제목과 같고 정리하면 아래와 같습니다.
- div 사용 (table 은 사용하지 않음)
- 총 2단 - 좌측엔 사이드바, 우측엔 컨텐츠 영역
- 레이아웃은 화면 가운데 정렬함
- 두 단 사이에는 구분선이 존재하는데 화면 꼭대기에서부터 끝까지 구분선이 지어짐
가장 간단한 방법으로 구현을 해보죠. 핵심을 정리하면 다음과 같겠죠.
- 문서형은 xhtml, strict 로 정의한다.
- 두 div을 height:100%; 를 준다.
- html, body 에도 height:100%; 를 준다.
- 사실 div에는 min-height:100%; 를 준다.
- 두 div 을 position:relative; margin:0 auto; 인 div 로 감싼다.
- 두 div 을 z-index로 레이어링 한다.
이걸 그림으로 그려보면 다음과 같은 구조라 할 수 있겠죠?
z-index 는 레이어링을 하는 것이기 때문에 이를 3차원으로 생각하면 이렇게 볼 수도 있고요.
물론 #wrapper 는 레이어링을 한 건 아니지만, #leftArea 와 #rightArea 를 감싼 div 이니 위와 같이 생각해도 무방할 거예요
이걸 코드로 정리하면 아래와 같습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>div와 z-index를 서서 레이아웃 잡기</title>
<style type="text/css">
html, body {
margin:0;
height:100%;
}
#wrapper {
margin:0 auto;
position:relative;
width:600px;
height:100%;
}
#leftArea {
position:absolute;
top:0px;
left:0px;
width:100%;
min-height:100%;
background:#FFD149;
z-index:0;
}
#rightArea {
position:absolute;
top:0px;
left:0px;
width:400px;
min-height:100%;
margin-left:200px;
background:#3EBAEB;
z-index:1;
border-left:3px solid #000;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="leftArea">
사이드바<br/> 영역이니<br/> 보통은<br/> 메뉴가<br/> 들어가겠죠
</div>
<div id="rightArea">
여기는 본문 영역으로 많이 쓰고요
</div>
</div>
</body>
</html>
사실 가장 많이 쓰는 방법은 z-index 를 사용하지 않고 두 div 을 float:left; 로 붙이는 게 일반적이죠.
하지만, 그 방법은 ie 버그도 있고, #wrapper 의 사이즈를 제대로 맞추지 않으면 둘 중 하나가 아래로 내려가기도 하는 등 좀 귀찮은 면이 있어요. 그러느니 그냥 z-index 로 레이어링을 해버리는 거죠.
나름 편리한 방법이라 할 수 있습니다. :)
