↙
레이어(Layer) : <divstyle=“position:absolute” />
레이어(Layer)
HTML 문서(Document)상의 또 다른 문서(객체)
레이어 관련 주요 속성
position : 그리드레이아웃(absolute),
플로우 레이아웃(static)
z-index : int(레이어 순서)
visibility : 보임(visible)/숨김
(hidden)
display : 레이어 감추기 :
display:none;
overflow : 스크롤
(visible, hidden, scroll, auto)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>22.div 태그로 레이 아웃 설정</title>
<style type="text/css">
body{text-align:center; width:100% ; height:100%;}
#header{width:770px;height:50px; background-color:Silver;border:groove 1px silver;
padding:5px 5px 5px 5px; margin:5px 0px 0px 0px;}
#left{width:180px;height:100px; background-color:Silver;border:groove 1px silver;
padding:5px 5px 5px 5px; margin: 0px 1px 0px 0px; float:left;}
#content{width:370px;height:100px; background-color:Silver;border:groove
1px silver;padding:5px 5px 5px 5px; margin:0px 1px 5px 1px; float:left;}
#right{width:180px;height:100px; background-color:Silver;border:groove 1px silver;
padding:5px 5px 5px 5px; margin: 0px 0px 0px 1px; float:left;}
#footer{clear:both;width:770px;height:50px; background-color:Silver;
border:groove 1px silver;padding:5px 5px 5px 5px;
margin:1px 0px 0px 0px; float:left}
</style>
</head>
<body>
<table border="1" width="85%">
<tr>
<td colspan="3">Navigator</td>
</tr>
<tr>
<td style="width:185px; height:100px;">Left</td>
<td style="width:180px;">Left</td>
<td style="width:180px; height:100px;">Right</td>
</tr>
<tr>
<td colspan="3">Copyright HTML</td>
</tr>
</table>
<div id="header">Navigator</div>
<hr />
<div style="width:770px;">
<div id="left">카테고리</div>
<div id="content">메인</div>
<div id="right">카테고리</div>
<div id="footer">Copyright</div>
</div>
</body>
</html>
속성에 대한 설명 -------------------------------------------------------------
1. Position, Direction 속성
: 하나의 element에 할당되는 box가 브라우저 화면에서 어떻게 배열될 것인지를 정한다.
절대 좌표 : Absolute positioning
2. Absolute positioning은 reference box를 기준으로 상하좌우로 위치를 이동시킨다.
3. Reference box란, 현재 만들고 있는 문서의 가장 상위 element가 차지하는 영역을 말한다. 4. HTML에서는 HTML element의 영역을 말하는데, 보통 브라우저 화면 크기라고
생각해도 된다.
5. 부모 element가 absolute positioning에 의해 위치가 정해졌다면,
자식 element에 absolute positioning을 적용할 때는 부모 element의 box를
기준으로 위치를 잡게 된다.
6. Absolute positioning을 하게 되면 margin은 없어지고, padding과 border만 남게 된다.
7. 상대 좌표 : Relative positioning Block-level이나 inline layout에 의해 위치가 결정되면,
이 위치를 기준으로 box를 상하좌우로 이동시킬 수 있다.
이것을 상대적 배열(relative positioning)이라고 한다.
8. 이동시키는 정도는 top, left, bottom, right 속성으로 지정할 수 있다. Box의 위치를
이동시킨 다고 해서 다음에 나오는 형제자매 element의 위치가 함께 이동되는 것은 아니다.
따라서, 상대적 배열을 이용하면, element box들이 서로 겹쳐지는 효과를 가져올 수 있다.
Z-index 속성
여러 개의 element가 서로 상하로 겹치게 만들 수 있는 속성이다.
Position 속성의 값이 absolute나 relative인 element에 적용된다.
초기값은 auto이다.
Overflow 속성
visible : 크기에 관계없이 내용을 모두 보여준다.
hidden : 해당 element에 할당된 공간에 들어가는 내용만 보여주고, 나머지는 자른다.
Padding과 border는 할당된 공간의 크기에 맞춰서 나타난다.
auto : 할당된 공간의 크기 이상이 되면 스크롤바를 나타낸다.
scroll : 언제나 스크롤바를 나타낸다.
Visible속성
Element box가 실제로는 존재하지만 화면에는 보이지 않도록 할 수 있다.
visible : inherit / visible / hidden
'.Net Project > CSS 2.0' 카테고리의 다른 글
| CSS2.0 관련 속성정리 (1) | 2009.07.29 |
|---|---|
| 23장 레이아웃 스타일 (2) | 2009.07.29 |
| 21장 이미지 스타일 (0) | 2009.07.29 |
| 20장 목록관련스타일 (0) | 2009.07.29 |
| 18장 ScrollBarStyle (0) | 2009.07.28 |