●형태
|
<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> |
●html의 <div>와 css로 레이아웃 구성하기 예
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<style type="text/css">
</head>
</html> |
●
wrap - 레이아웃 전체를 묶어서 wrap안에 있는 div들이 깨지지 않고 자리를 잘 잡게 하기 위한 테두리이다.
header - 넓이값과 float으로 위치를 잡아주면 된다.
sidebar, content - sidebar와 content의 합은 레이아웃 전체 크기보다 클수 없다.
footer - footer에도 float값을 주어야한다. float값을 주지 않으면 비ie브라두저에서 레이아웃이 깨져나올수 있다.
●보통 실무에서는 css코드는 html코드안에 삽입하지 않고 따로 css파일을 만들어서 사용한다.
●과거에는 html의 <table>태그를 사용하여 레이아웃을 구성하였지만 웹표준을 준수하려면<table>태그보다는 <div>로 레이아웃을 구성하는 것을 추천한다.
'프로그래밍 > html' 카테고리의 다른 글
| html <div>로 웹사이트 레이아웃 구성하기2 (0) | 2012.05.28 |
|---|---|
| DTD((Document Type Definition) 개념 (0) | 2012.05.25 |
| css 기초 정리 (0) | 2012.05.20 |
| html 그림파일 하이퍼링크 테두리 없애기 (0) | 2011.11.26 |
| html 문법, 태그 간단 정리2 (0) | 2011.11.24 |
댓글