|
<?xml version="1.0" encoding="EUC-KR" ?>
<!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>
<style type="text/css">
div{
/* #RGB(Red Green Blue) :빛의 3원색 000000(검은색)~ffffff(하얀색) */
border: solid; thin #000;
}
/* id는 #, class는 . */
#header {
text-align: center;
}
.menu{
float: left; width: 200px;
}
.content {
float: left; width: 600px; min-height: 500px;
}
#footer {
/* float가 되어 있는 것을 clear 해준다.
양 옆에 아무도 못오게 해준다. */
clear: left;
}
#out {
width: 810px; margin-left: auto; margin-right: auto;
}
#pop{
width: 300px; height: 200px; background-color: yellow;
position: fixed; left: 300px; top: 200px;
}
</style>
</head>
<body>
<div id="pop">
팝업
</div>
<div id ="out">
<div id="header">
<h1>OCJP 합격 비결</h1>
</div>
<div class="menu">
<dl>
<dt>100% 비결</dt>
<dd>도영</dd>
<dd>유란</dd>
<dt>90% 비결</dt>
<dd>태형</dd>
<dd>정호</dd>
</dl>
</div>
<div class ="content">
100% 맞는게 그게 어려워요? by 도영
</div>
<div id="footer">
<h2>copy left by Wan</h2>
</div>
</div>
</body>
</html> |