- hidden : 영역을 넘는 내용은 표시하지 않음
- scroll : 영역에 스크롤 표시
예)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#d1 { width:300px;
height:300px;
border: 1px solid #ff0000;
background: #778899;
overflow: hidden; }
#d2 { width:200px;
height:200px;
border: 1px solid #00ff00;
background: #c0c0c0;
overflow: scroll; }
</style>
</head>
<body>
<div id="d1">
<p>동해물과 백두산이 마르고 닳도록...(생략)</p>
</div>
<div id="d2">
<p>남산 위에 저 소나무 철갑을 두른듯....(생략)</p>
</div>
</body>
</html>
* position : 영역의 위치 이동
- relative : 영역의 원래 위치에서 지정된 값 만큼 이동.
예)
<style type="text/css">
#d1 { width:300px;
height:300px;
border: 1px solid #ff0000;
background: #778899;
top: 100px;
left: 100px;
position: relative; }
#d2 { width:200px;
height:200px;
border: 1px solid #00ff00;
background: #c0c0c0;
overflow: scroll; }
</style>
아래에서 보는 바와 같이 첫 번째 영역은 원래 위치에서 우측 하단으로 각각 100px 이동하였지만, 두 번째 영역은 첫 번째 영역이 이동하기 전의 영역에만 영향을 받고 있음.
* flow : 영역을 지정된 위치로 이동시킴, 해당 영역은 다른 엘리먼트의 흐름에서 제외됨. 그러나, 다른 엘리먼트의 내용을 가리지 않음
예)
<style type="text/css">
#d1 { width:300px;
height:300px;
border: 1px solid #ff0000;
background: #778899;
flow: right; }
#d2 { width:200px;
height:200px;
border: 1px solid #00ff00;
background: #c0c0c0;
overflow: scroll; }
</style>
아래에서 보는 바와 같이 첫 번째 영역이 우측으로 이동하였고, 두 번째 영역은 첫 번째 영역과 무관하게 배치됨.
단, 다음과 같이 브라우저의 폭을 좁히게 되면, 두 번째 영역이 첫 번째 영역을 가릴 수 없으므로 아래로 밀리게 됨.
* position : 영역을 지정된 위치로 이동
- absolute : 영역을 지정된 위치로 이동. 다른 영역은 해당 영역이 없는 것처럼 배치됨
예)
<style type="text/css">
#d1 { width:300px;
height:300px;
border: 1px solid #ff0000;
background: #778899;
top: 50px;
left: 50px;
postion: absolute; }
#d2 { width:200px;
height:200px;
border: 1px solid #00ff00;
background: #c0c0c0;
overflow: scroll; }
</style>
아래에서 보는 것처럼 두 번째 영역은 첫 번째 영역과 무관하게 배치됨을 확인 할 수 있음.
반면, 앞서 설명한 relative 의 경우에는 첫 번째 영역(이동하기 전의 영역)이 두 번째 영역의 배치에 동일하게 영향을 줌
다음과 같이 영역을 표시해보자.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#d1 { height: 200px; width: 200px;
border: 1px solid #ff0000;
background: #778899;
}
#d2 { height: 100px; width: 100px;
border: 1px solid #00ff00;
background: #c0c0c0;
left: 50px; top: 50px;
position: relative;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
</div>
</div>
</body>
</html>
'Programming > HTML/CSS' 카테고리의 다른 글
| [CSS] visibility:hidden과 display:none의 차이점 (0) | 2013.01.14 |
|---|---|
| [CSS] 시작 문자 선택자 (0) | 2012.11.30 |
| table 태그와 자손 선택자 주의사항 (0) | 2012.11.30 |
| 시맨틱 태그 (0) | 2012.11.30 |
| block 형식의 태그와 inline 형식의 태그 (0) | 2012.11.29 |
