프로그래밍/html

html <div>로 웹사이트 레이아웃 구성하기1

-현's- 2012. 5. 22. 22:49
반응형

●형태

<style type="text/css">

#wrap{width:1000px;}

#header{width:1000px; float:left;}

#sidebar{width:300px; float:left;}

#content{width:700px; float:left;}

#footer{width:1000px; float:left;}

</style>

 

<div id="wrap">

<div id="header">header</div>
<div id="sidebar">sidebar</div>
<div id="content">content</div>
<div id="footer">footer</div>

</div> 

 

 

 

●html의 <div>와 css로 레이아웃 구성하기 예 

 

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>

 

<style type="text/css">
#wrap{width:1000px; height:800px; background:blue;}
#header{width:900px; height:130px; margin-left:50px; margin-bottom:10px; background:yellow;}
#middle{width:1000px; float:left; background:black;}
#sidebar{width:200px;height:500px; float:left; margin-left:50px; margin-right:10px; background:gray;}
#content{width:700px; height:500px;float:left; background:red;}
#footer{width:900px; height:130px; float:left; margin-left:50px; margin-top:10px; background:orange;}
</style>

 

</head>
<body>


<div id="wrap">
   <div id="header">header</div>
   <div id="middle">
       <div id="sidebar">sidebar</div>
       <div id="content">content</div>
   </div>
   <div id="footer">footer</div>
</div>


</body>

</html>

 

 

●

wrap - 레이아웃 전체를 묶어서 wrap안에 있는 div들이 깨지지 않고 자리를 잘 잡게 하기 위한 테두리이다.

header - 넓이값과 float으로 위치를 잡아주면 된다.

sidebar, content - sidebar와 content의 합은 레이아웃 전체 크기보다 클수 없다.

footer - footer에도 float값을 주어야한다. float값을 주지 않으면 비ie브라두저에서 레이아웃이 깨져나올수 있다.

 

 

●보통 실무에서는 css코드는 html코드안에 삽입하지 않고 따로 css파일을 만들어서 사용한다.

 

 

●과거에는 html의 <table>태그를 사용하여 레이아웃을 구성하였지만 웹표준을 준수하려면<table>태그보다는 <div>로 레이아웃을 구성하는 것을 추천한다.

 

 

 

 

반응형