디자인관련/Dreamweaver

훈련교사 남은정 2012. 3. 4. 17:43

 

div로 레이아웃 잡기

<!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=utf-8" /><title>div 태그</title><link href="css.css" rel="stylesheet" type="text/css" />

</head>

 

<body>

<div id="box">

  <div id="top">top</div>

  <div id="left">left</div>

  <div id="main">main</div>

  <div id="bottom">bottom</div>

</div>

</body>

</html>

 

 

index.html

@charset "utf-8"; /* CSS Document */

body {

 margin: 0px; <!-- 언제나 전체 body에는 margin 값을 0으로 세팅해준다-->

 font-size: 18px; color: #FFF;

}

 

#box {

 position: relative; height: auto; width: 500px; margin: auto;

<!-- 레이아웃을 싸고 있는 box의 margin을 auto로 주면 중앙정렬 효과-->

 background-color: #F90;

}

 

#top {

 background-color: #333; height: 50px; width: 500px; position: relative;

}

 

#left {

 background-color: #09C; float: left; height: 400px; width: 100px; position: relative;

}

 

#main {

 background-color: #3C0; float: left; height: 400px; width: 400px; position: relative;

}

 

#bottom {

 background-color: #C0F; height: 50px; width: 500px; position: relative; clear: both;

<!-- 상단의 흐름을 한번 끊어주기 위해 clear를 해준다.. -.-;;?? -->

 float: left; <!-- 새로운 흐름을 지정해줘야 깨지지 않는다-->

}

 

 

css.css

 

 

레이아웃은 class가 아닌 id로 잡는다.