7. div 요소를 이용한 레이아웃 잡기

의미

코딩은 표준 방법인 구조(HTML)와 표현(Style)의 분리해서 작업.

Style(CSS)란? 일정한 표현(글자, 컬러 등)을 만들어 구조(태그)에 직접 적용하거나, 반복적인
작업에 편리하게 적용한다.

CSS의 자세한 적용법 알아보기

1. 기본 3단 레이아웃

스타일 부분

<style type="text/css">

#header { width: 500px; height: 75px; background: #000; }

#contents { width: 500px; height: 200px; background: #333; }

#footer { width: 500px; height: 75px; background: #bbb; }

</style>

본문 부분

<div id="header"></div>

<div id="contents"></div>

<div id="footer"></div>

2. 기본 4단 레이아웃

스타일 부분

<style type="text/css">

#wrap { margin: 0 auto; width: 500px; }

#header { width: 500px; height: 75px; background: #000; }

#contents { float: left; width: 350px; height: 200px; background: #333; }

#adver { float: left; width: 150px; height: 200px; background: #999; }

#footer { float: left; width: 500px; height: 75px; background: #bbb; }

</style>

본문 부분

<div id="wrap">

<div id="header"></div>

<div id="contents"></div>

<div id="adver"></div>

<div id="footer"></div>

</div>

* float 이란?

영역을 둘러 싸고 있는 전체박스(body, div 등) 형태의 블럭 요소 안에 위치를 정렬할 때 사용하는 속성으로 left / right / inherit / none 의 속성값을 가지고 있으며, 블럭요소를 배치하는데 없어서는 안될 속성입니다. float 속성은 상속됩니다.

* clear 란?

float 속성과 연관되어 꼭 알아두어야 할 속성으로 float의 상속되는 속성값을 해제 시켜주는 역할을 합니다. left / right / both / inherit / none 의 속성값을 가지고 있습니다. 예제의 #footer 부분의 float: left 대신 clear: both 를 적용해도 됩니다.

<< 1 2 3 4 5 6 7 >>

copyright © 2011 두목. All rights Reserved.