div를 이용한 웹 레이아웃 코드 General Web2008/01/09 14:41
최초작성일: 2006년 12월 27일
최종작성일: 2007년 11월 15일
W3C 문서의 에러인지 어떤지는 모르겠지만 W3C 문서를 그대로 따라했다가 레이아웃이 잡히지 않아서 고생 좀 했다. W3C문서와 다른 부분은 아래에 색상으로 표시를 했다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>A frame document with CSS 2.1</TITLE>
<STYLE type="text/css" media="screen">
BODY { height: 8.5in } /* Required for percentage heights below */
#header
{
position: fixed;
width: 100%;
height: 15%;
top: 0;
right: 0;
bottom: auto;
left: 0;
border: 1px solid;
}
#sidebar {
position: fixed;
float:left; //추가되야 부분
width: 10em;
height: auto;
top: 15%;
right: auto;
bottom: 100px;
left: 0;
border: 1px solid;
}
#main
{
position: fixed;
width: auto; // 삭제되야 할 부분
height: auto;
top: 15%;
right: 0;
bottom: 100px;
left: 10em;
border: 1px solid;
}
#footer {
position: fixed;
width: 100%;
height: 100px;
top: auto;
right: 0;
bottom: 0;
left: 0;
border: 1px solid;
}
</STYLE>
</HEAD>
<BODY>
<DIV id="header">상단</DIV>
<DIV id="sidebar">메뉴</DIV>
<DIV id="main">메인</DIV>
<DIV id="footer">하단</DIV>
</BODY>
</HTML>
'General Web' 카테고리의 다른 글
| 2. xml 문서의 생성과 CSS를 이용한 XML 문서 출력 (0) | 2008/04/11 |
|---|---|
| xml과 10가지 설계목표 (0) | 2008/04/11 |
| [RDF 입문서] 1. 소개 (0) | 2008/03/12 |
| RDFa Basics (0) | 2008/02/22 |
| RDF란? (0) | 2008/02/21 |
| div를 이용한 웹 레이아웃 코드 (0) | 2008/01/09 |
