XE 스쿨 레이아웃은 스쿨을 만들면서 첫번째로 만들어본 예제 레이아웃입니다. 모달 윈도우를 이용한 로그인, 3가지 색상의 헤더 배경을 사용할 수 있도록 작성 되었습니다.
#1
#bodyWrap은 컬러옵션에 따라 배경 이미지를 가로 방향으로 패턴 반복시키기 위해 만듭니다. CSS 문서를 각각 컬러값 마다 default.css 또는 blue.css 처럼 별도로 만들어 두고 layout.html에서 조건 구문을 활용하여 다르게 불러올 수도 있습니다. 하지만, 여기서는 CSS 문서를 간단히 작성하기 위해 #bodyWrap의 클래스(class)에서 옵션값을 받아 구분하려고 width:100% 속성을 주어 전체 내용을 감싸도록 하였습니다.
#2
푸터를 제외한 내용 모두를 감싸는 #fixedWrap을 만들고 1024px 모니터 환경을 고려하여 가로의 크기를 980px로 고정합니다. DIV 박스는 좌측정렬이 기본값입니다. 따라서 가운데로 정렬하기 위해서는 {margin:0 auto;} 속성을 주어야 합니다. 위, 아래방향은 0px이고 좌,우 방향은 auto 라는 뜻입니다.
#3
헤더와 콘텐츠 영역은 가로값이 고정된 #fixedWrap에 들어갑니다.
#header 영역은 가로와 세로의 크기가 고정되고 페이지마다 항상 같은 영역에 출력됨으로 큰 차이가 없습니다.
#contentWrap 영역은 콘텐츠 내용 전체를 감싸는 DIV 박스입니다. 또한 레이아웃 옵션 설정에서 메인과 서브 보기 형태를 지원하도록 #main_ 과 #sub_ 로 머릿글자를 붙여주고 조건 구문 안에 넣어 옵션에 따라 다르게 불러 사용합니다.
#4
#footerWrap은 푸터의 가로 방향의 라인을 그려주기 위해 #bodyWrap DIV 안에 위치하도록 합니다. #fixedWrap 과 같은 방법으로 가운데 정렬 시킵니다.
<div class="clear"></div> <!--// 단두대 버그 해결을 위한 구획 발동 -->
</div>
<!--@end-->
</div><!-- // fixedWrap end -->
<div id="footerWrap">
<div id="footer" class="site_width">
<p>푸터의 내용</p>
</div>
</div>
</div><!--// bodyWrap end -->
단두대 버그란?
DIV 박스 안에서 플롯(Float) 된(띄워진) DIV가 있는 경우 바깥 DIV 박스는 세로의 크기를 찾을 수 없어서 영역을 잃어버리게 됩니다. 때문에 하단의 다른 DIV 박스가 위로 밀고 올라오는 오류가 발생하는데 중세시대 유럽의 사형집행 방식과 같은 형태로 푸터영역이 위로 올라와 마치 내용 영역이 푸터에 의해 잘려 보이는 것과 같다고 해서 단두대 버그라고 부릅니다. 이러한 오류를 해결하기 위해서 clear:both 속성을 갖는 가상의 DIV 박스(가상 엘리먼트)를 만들어 줍니다.
이것과 더불어 CSS 문서에서도 플롯된 DIV의 부모 DIV에도 #sub_contentWrap:after {content:""; display:block; clear:both;} 과 같이 가상 엘리먼트 설정을 주어 오류를 해결합니다.
<div class="clear"></div>는 <div style="clear:both;"></div>의 형태로 인라인 형식으로 주어도 상관 없습니다. class="clear"는 CSS 문서에서 .clear {clear:both;} 라고 작성해 두고 사용했기 때문입니다. IE7 이하 버전을 위해 부모 DIV에 *zoom:1; 속성을 주어 해결합니다.
CSS :
/* DIV 정렬을 위해 필요할때 쓸 수 있도록 설정 */
.clear {clear: both;}
/* body 설정 */
body {
background-color:#F3F3F3;
font-family:굴림,돋움,Tahoma, Geneva, sans-serif;
}
/* 내용 전체를 감싸는 Div는 가로를 100%로 설정 */
#bodyWrap {width:100%;}
/* 색상 옵션에 따라 배경이미지를 변경 */
.bg_default {background:url(../images/bg_default.gif) repeat-x top center;}
.bg_blue {background:url(../images/bg_blue.gif) repeat-x top center;}
.bg_green {background:url(../images/bg_green.gif) repeat-x top center;}
/* 위의 구문은 내용 중에 float 된 DIV가 있는 경우 단두대 버그 해결을 위한 구획발동 CSS 구문 */
/* 사이드바 영역*/
#sidebar {
float:left;
width:200px;
display:inline;
padding:0 10px;
}
/* 콘텐츠 영역 */
#content {
float:right;
width:720px;
display:inline;
padding-right:20px;
overflow: hidden;
}
/* 푸터 설정 */
#footerWrap {
width:100%;
margin-top:20px;
background:url(../images/line.gif) repeat-x top center;
clear:both;
}
#footer {
position:relative;
height:100px;
padding-top:2px;
}
더블마진 버그란?
사이드바 DIV는 왼쪽으로 콘텐츠 DIV는 오른쪽으로 Float 시키고 각각 Float 된 방향과 같은 방향으로 margin 값을 주게 되면 익스플로러(IE)에서는 마진값의 두배만큼 멀어지는 오류가 있습니다. 위에서는 margin 을 사용하지 않았지만, 더블마진 버그를 해결하기 위해서는 Float 되는 DIV에는 각각 display:inline; 속성을 주게 되면 오류를 해결할 수 있습니다. 또한 Float 된 DIV 가 있으므로 단두대 버그를 해결하기 위한 처리방법도 병행해야 합니다. 예방차원에서 적용된 경우입니다.