CSS로 레이아웃을 잡을 때 사용하는 엘레멘트는 <div>와 <span>이다. <div>는 블럭 레벨 엘레멘트이고 <span>은 인라인 레벨 엘레멘트이다. 이 두 엘레멘트와 기본 HTML 엘레멘트를 사용해 레이아웃을 잡는다.
■ 레이아웃의 모양
■ HTML 태그 구성
<div class="container">
<div class="header">헤더</div>
<div class="left">왼쪽</div>
<div class="contents">콘텐츠</div>
<div class="footer">푸터</div>
</div>
■ CSS 스타일 지정
div.container { line-height: 50%; }
div.header div.footer { clear: left; }
div.left { float:left; }
블럭 레벨은 지정한 너비를 모두 활용하면 엘레멘트 앞 뒤로 줄 바꿈이 일어난다. 하지만 높이는 지정해도 영역안의 내용이 overflow 되면 영역이 높이는 증가한다. 따라서 영역의 높이를 고정시키기 위해서는 overflow 속성을 사용해야 한다. 인라인 요소는 너비를 지정해도 내용이 차지하는 영역만큼만 너비를 사용하며 엘레멘트 앞뒤로 줄 바꿈이 일어나지 않는다.
■ 전체 레이아웃 코드
<html>
<head>
<meta http-ｅquiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<style type="text/css">
body { margin:0px; padding:5px; background-color:#dc143c; }
.header { margin:0px; padding:5px; height:30px; background-color:#fffafa; }
.footer { margin:0px; padding:5px; height:30px; background-color:#fff8dc; }
.leftmenu { margin:0px; padding:5px; height:500px; width:200px; background-color:#0000ff; float:left; }
.content { margin:0px; padding:5px; height:500px; background-color:#008000; }
</style>
</head>
<body>
<div class="header">헤더</div>
<div class="leftmenu">왼쪽 메뉴</div>
<div class="content">콘텐츠</div>
<div class="footer">푸터</div>
</body>
</html>
'HTML& CSS > CSS' 카테고리의 다른 글
| 마우스 커서(cursor) 스타일 속성 (0) | 2011.01.04 |
|---|---|
| 네비게이션 바(Navigation bar) 만들기 (0) | 2011.01.04 |
| CSS을 사용하여 레이아웃(layout) 잡기 (0) | 2011.01.04 |
| 필드셋,레전드,ul, li, 라벨을 사용한 입력폼 만들기 (0) | 2009.12.03 |
| 고급 - position 속성 (0) | 2009.10.18 |