간단한 레이아웃 예제

이렇게 DIV태그에 각각의 id값을 정하고 float속성을 사용하여 페이지 레이아웃을 구성할 수 있습니다.

테이블로 하는 것과는 다릅니다.

이렇게 해야 문서 자체의 의도와 맞고 구조와 디자인을 분리할 수 있습니다.

<!DOCTYPE html>

<html>

<head>

#ctn{width:500px;}

#header{background-color:gray;}

#header h1{margin-bottom:0;}

#menu{background-color:#DDDDDD;height:200px;width:100px;float:left;}

#content{background-color:#EFEFEF;height:200px;width:400px;float:left;}

#footer{background-color:gray;clear:both;text-alien:center;}

</style>

</head>

<body>

</div>

HTML5<br>

CSS3<br>

Javascript

</div>

내용은 여기에

</div>

</div>

</body>

</html>

clear:both속성은 float:left 속성을 초기화 시켜주는 것이라고 보면 됩니다.

이 코드를 저장한 후 브라우저에서 보면 이렇게 나옵니다.

<더 해 볼것!>

CSS파일만 따로 떼어낼 수 있습니다.

웹마케팅 창고