좌측엔 사이드바가 있고 우측엔 세로 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 로 레이어링을 해버리는 거죠.

나름 편리한 방법이라 할 수 있습니다. :)
,
얼마 전에 [질문] div에서 float 시켰을 때 IE에서 문제가 생깁니다. 라는 글을 쓴 적이 있습니다. 요약하자면 float:left; 로 붙여놓은 div들 중 가장 마지막 div이 이상하게 표현된다는 것이었죠.

이상하게 표시되는 div

IE에서만 이런 일이 생깁니다. 어제 : 3 이라는 부분이 영역을 벗어나 반복되고 있습니다.


왜 이런 일이 생기는지는 아직 잘 모르겠지만 언제 발생하는지는 실험을 통해 알 수 있었습니다. 예를 들면 이런 소스가 있다고 하지요.

<div id="container">
   <div id="content"></div>
   <div id="sidebar1"></div>
   <div id="sidebar2"></div>
</div>

<style>
#container { width:1000px; margin:0px auto;}
#content    { width:600px; float:left;}
#sidebar1  { width:200px; float:left;}
#sidebar2  { width:200px; float:left;}
</style>

보시면 알겠지만 태터툴즈 스킨에서 기본적으로 사용하는 형태의 구조입니다. (사이드바가 1개있든 2개 있든 그건 관계없습니다.) 위와 같은 구조로 되어 있는 경우에 각각의 div에 내용으로 width를 꽉꽉 채워 넣으면 위와 같은 일이 발생합니다.

보통 제가 제작하는 태터툴즈 스킨의 컨텐츠 영역과 사이드바 영역은 빈 공간이 없이 촘촘하게 붙여두고 채워넣는 편인데요, 그럴 때마다 저런 일이 발생하더군요. 즉, #content와 #sidebar1, #sidebar2 등의 넓이의 합과 #container의 넓이가 같으면서 여타의 빈공간이 확보되지 않는 태터툴즈 스킨을 만들다 보면 발생했습니다.

실제로 그래서 Letter To You 1.1 때도 그렇고 Formal Boxes 1.1 때도 그렇고 여러 번 본의 아니게 table 태그를 사용했었습니다[각주:1].

해결책은? #container 영역을 조금 더 크게 잡으니 해결되더군요. 전체를 감싸는 #container의 width를 3px만 크게 잡아도 문제는 사라지더군요. 위의 예라면 #container { width:1003px; margin:0px auto;} 식으로 하면 되겠지요.

정확한 이유는 저도 잘 모릅니다. 무슨무슨 IE 버그라고 이미 유명한 버그인지도 모르겠어요. [각주:2] 태터툴즈의 스킨 시스템에서만 작동하는 건지도 모르죠. (물론 그럴 일은 희박하다고 보지만요.)

혹시 비슷한 문제 때문에 고민하는 분들은 이와 같은 방법을 시도해보세요. :)


추가

만박님께서 알려주셨습니다. ^^
만박 2007/02/13 20:28

E6의 Three-pixel text job bug하고 duplicate character bug라고 부른답니다. CSS 마스터전략 9장에 나와요 ^^
구글링 해보니 나옵니다. three-pixel text jogduplicate character bug.


추가 #2

PIE의 설명에 따르면 이 버그를 피하는 두 가지 방법이 있다고 합니다.

1. 제일 마지막에 float:left; 된 div에 margin-right:-3px; 을 하라.
2. 제가 위에서 이야기한 것과 같이 container 영역을 3px 크게 줘라.

  1. 물론 table 태그를 사용한다고 크게 잘못되었다는 건 아닙니다. 하지만, 보다 자유로운 디자인을 위해 그리고 디자인과 컨텐츠를 구분하는 코딩을 하려고 할 때 되도록이면 table 태그로 레이아웃을 잡는 일은 하지 않으려 한다는 것 뿐입니다. [본문으로]
  2. 비슷한 현상을 찾아 보려고 구글링 해봤는데 찾지는 못했습니다. 아시는 분들은 알려주세요. [본문으로]
,
이번에 Formal Boxes 1.1을 작업하다가 생긴 문제입니다. (사실은 그 이전에 Letter To You 1.1을 작업할 때도 같은 문제가 있었지요.)

왜 그 거창한 이유 있잖아요 - 시맨틱 & 디자인 뭐 그런 것들도 그런 거지만 단지 관리를 편하게 하기 위해 (^^) 본문 컨텐츠 영역과 사이드바를 div로 구성하고 css에 float:left; 해서 띄웠는데 유독 IE에서만 이상하게 보이는 에러가 생긴 겁니다.

IE에서 이상하게 보입니다.

IE에서 이상하게 보입니다.


어제 : 3 부분이 아래에 다시 반복되는 거 보이시죠? float:left 로 순서대로 붙여놓은 div들 중에서 제일 오른쪽에 붙인 div 의 마지막 문자열이 저런 식으로 넘치는 겁니다. 제가 특별히 뭘 잘 못 쓴 태그가 있나 싶어서 여러가지 테스트를 해봤는데 찾을 수 없었습니다.

아, 그리고 제가 확인한 바로는 IE에서만 저렇게 보이고요. 파이어폭스와 오페라에서는 저런 현상이 없었습니다.

혹시 비슷한 경험을 하신 분들 계시나요? 저게 해결되어야 앞으로도 좀 마음 편하게, 찜찜하지 않은 마음으로 작업을 할텐데 참 답답합니다;;;


추가

원인을 알았습니다. duplicate text bug 때문이라고 하는군요. 이 글을 읽어보세요.


,