div 레이아웃 잡는법 좀 알려주세요 - css 왕초보 정보
div 레이아웃 잡는법 좀 알려주세요 - css 왕초보
본문
위 이미지처럼 레이아웃을 한번 잡아보려고 하는데
css 초보라 연습중 ^^
아래 소스 처럼 하는게 맞나요?
<style type="text/css">
#main { margin:0 auto; width:980px; text-align:center; }
#main .header { width:978px; height:120px; border:1px solid #f1f1f1; background-color:#CCCCCC; margin-bottom:10px; }
#main .header2 { width:980px; text-align:center; margin-bottom:10px; height:250px; }
#main .contents { width:980px; text-align:center; margin-bottom:10px; height:400px; }
#main .tail {
padding:10px;
border:2px solid #bfbfbf;
clear:both;
}
</style>
<div id="main">
<!-- 상단헤드 --->
<div class="header"><h2>header</h2></div>
<!-- 상단 컨텐츠 -->
<div class="header2">
<div style="float:left; width:720px; height:250px; margin-right:10px; background-color:#CCCCCC; margin-bottom: 10px;"><h2>content</h2></div>
<div style="float:left; width:250px; height:250px; background-color:#FF9900; margin-bottom: 10px;">
<h2>right</h2></div>
</div>
<!--- 메인 컨텐츠 --->
<div class="contents">
<div style="float:left; width:720px; height:400px; background-color:#CC9900; margin-right:10px; margin-bottom: 10px;"><h2>content</h2></div>
<div style="float:left; width:250px; height:400px; background-color:#FF66FF; margin-bottom:10px;"><h2>right</h2></div>
</div>
<!--- 푸터 --->
<div class="tail">푸터</div>
</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=euc-kr" />
<title>Untitled Document</title>
<style type="text/css">
#web {
display: block;
width: 800px;
height: 800px;
padding: 10px 10px 10px 10px;
}
#header {
display: block;
width: 800px;
height: 50px;
}
#left {
display: block;
width: 540px;
height: 300px;
background-color: #960;
border: 1px solid #0CC;
padding: 10px 10px 10px 10px;
float: left;
}
#right {
display: block;
width: 180px;
height: 300px;
background-color: #960;
border: 1px solid #0CC;
padding: 10px 10px 10px 10px;
float: left;
}
#footer {
display: block;
width: 800px;
height: 60px;
background-color: #333;
}
</style>
</head>
<body>
<div id="web">
<div id="header">
<h1>Header</h1>
<div id="left">
CONTENT
</div>
<div id="right">
SIDE
</div>
<div id="left">
CONTENT
</div>
<div id="right">
SIDE
</div>
</div>
<div id="footer">
Footer
</div>
</body>
</html>
