좌측엔 사이드바가 있고 우측엔 세로 100%짜리 본문 영역이 있는 2단으로 된, 전체적으로는 가운데 정렬이고 영역 사이에 구분선이 있는 블로그 스킨을 만들려면 어떻게 하는 게 좋을까요?

조건은 제목과 같고 정리하면 아래와 같습니다.

  • div 사용 (table 은 사용하지 않음)
  • 총 2단 - 좌측엔 사이드바, 우측엔 컨텐츠 영역
  • 레이아웃은 화면 가운데 정렬함
  • 두 단 사이에는 구분선이 존재하는데 화면 꼭대기에서부터 끝까지 구분선이 지어짐

가장 간단한 방법으로 구현을 해보죠. 핵심을 정리하면 다음과 같겠죠.

  1. 문서형은 xhtml, strict 로 정의한다.
  2. 두 div을 height:100%; 를 준다.
    1. html, body 에도 height:100%; 를 준다.
    1. 사실 div에는 min-height:100%; 를 준다.
  3. 두 div 을 position:relative; margin:0 auto; 인 div 로 감싼다.
  4. 두 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 로 레이어링을 해버리는 거죠.

나름 편리한 방법이라 할 수 있습니다. :)

댓글을 달아 주세요

여기 Skins And Bones 에서 처음 적는 잡담이군요.

꾸준히 스킨도 만들고 포스팅도 할 계획으로 블로그를 만들었으나 갑자기, 예정도 없이, 꾸준히 바빠진 관계로 포스팅을 못하고 있습니다. 스킨에는 손도 못대고 있고요.

그래도 처음엔 짬짬히 노력해서 만들 수 있을 줄 알았는데, 흠흠…

좀 더 기술적으로 시간을 배분하여 (^^) 스킨 만들기를 이어가야겠다는 다짐을 스스로 해봅니다. 아자아자~!

댓글을 달아 주세요

  1. 민노씨 2007.05.04 17:58

    꾸준히 바빠지셨군요. : )
    짬나시면 역시나 걸작 스킨 기대합니다.

    기운내시구요.

  2. 2007.05.07 19:06

    새로운 스킨에 목말라요.. ㅋ
    자주 시간날때마다 들오곤 하지만..
    요새 넘 바쁘신지..
    스킨이 나올 기미가 안보인다는.. ^^;

  3. 유마 2007.05.30 22:36

    태터툴즈가 텍스트큐브로 바뀌면서 알파버전이 나오고 있는데요.
    현재 제가 사용 중인 써머즈님 스킨에서는 에러가 발생합니다.
    그러니까, 팀블로그가 기본으로 탑재되어서 필명이 뜨는데, 제목 상에 필명을 표시 했을 경우에 날짜 표시 하는 스크립트가 오류를 띄웁니다.

    그 이외 스킨에서 바뀌는 부분이 좀 있는 것 같은데, 제가 능력이 부족하여 그것까지 어떻게 할 수가 없습니다.

    언넝 돌아오시어 더 멋진 스킨을 내려주시면 감사하겠습니다!

  4. 얼음공주 2007.08.21 14:49

    블로그 구경잘 하였습니다. 블로그에 필요한 동영상, boom4u.net 도 구경 오세요~~

사용자 삽입 이미지

구글 덕분에, 그리고 새로운 시대의 웹 환경에 따라 다시 화두가 된 검색. 관련된 이야기는 많이 있을 수 있지만, 기본적인 것들에 대해 쉽게 예를 드는 선에서 정리했다.
TAG 검색

댓글을 달아 주세요