컴퓨터/웹언어/팁
기본 레이아웃 ; 2단 왼쪽고정
Clark Joseph Kent
2010. 1. 19. 23:19
■ 2단 구성 : 서브페이지에 많이 쓰이는 기본 레이아웃. float 사용.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>기본 레이아웃 만들기</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="top">Top</div>
<div id="left">Left</div>
<div id="content">Main Contents</div>
<div id="foot">bottom</div>
</div>
</body>
</html>
* {margin: 0; padding: 0; border: 0; }
body {font-family: 돋움; font-size: 100%; color: #333333; }
/* 레이아웃 */
#wrapper {width: 800px; border: 1px solid #333333; }
#top {width: 800px; height: 100px; background-color: #d9d9d9; }
#left {float: left; width: 200px; height: 500px; background-color: #b7b7b7; }
#content {float: right; width: 600px; height: 500px; background-color: #eeeeee; }
#foot {clear: both; width: 800px; height: 100px; background-color: #d9d9d9; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>기본 레이아웃 만들기</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="top">Top</div>
<div id="left">Left</div>
<div id="content">Main Contents</div>
<div id="foot">bottom</div>
</div>
</body>
</html>
* {margin: 0; padding: 0; border: 0; }
body {font-family: 돋움; font-size: 100%; color: #333333; }
/* 레이아웃 */
#wrapper {width: 800px; border: 1px solid #333333; }
#top {width: 800px; height: 100px; background-color: #d9d9d9; }
#left {float: left; width: 200px; height: 500px; background-color: #b7b7b7; }
#content {float: right; width: 600px; height: 500px; background-color: #eeeeee; }
#foot {clear: both; width: 800px; height: 100px; background-color: #d9d9d9; }
:: Div (=division)
:: 레이아웃에 사용되는 두가지 속성 position vs. float position ; 위치를 지정하는 원하는 위치에 엘리먼트를 배치하는 속성. static : 기본값 relative : static과 같지만 offset(top,right,bottom,left)을 지정할 수 있고, 하위 엘리먼트 offset의 기준점이 된다. absolute : 화면상에서 다른 컨텐츠의 위치에 영향을 미치지 않고 위치 지정이 가능. 보통 레이어라고 불리우는 것. - 임의 위치에 고정시킬때... {position: float ; 대상 엘리먼트를 띄워서 현재의 위치에서 좌측이나 우측에 배치하는 속성. left : 엘리먼트를 좌측으로 배치함. right : 엘리먼트를 우측으로 배치함. none : float시키지 않음. - float이 끝난 위치 바로 다음에 오는 엘리먼트에서는 clear 시켜준다. {clear: both; } :: (*) 공용선택자 ; 모든 엘리먼트를 선택한다. 페이지 내의 모든 <h1> <h2> <p> <form> <blockquote> 등의 브라우져 기본 마진과 패딩을 갖고 있는 엘리먼트들의 여백이 없어진다. |
[출처] 기본 레이아웃 ; 2단 왼쪽고정 |작성자 후드씨