|
|
용도
|
사용법
|
사용예
|
|
position
|
static(기본)
|
여기는<span style="position:static">콩나물대제국</span>입니다. |
여기는콩나물대제국입니다.
|
|
absolute(절대적)
|
여기는<span style="position:absolute; top:390; left: 700; background-color:red; width:100;">콩나물대제국</span>입니다. |
여기는콩나물대제국입니다.
|
|
relative(상대적)
|
여기는<span style="position:relative; top:10; left: 10; background-color:green;">콩나물대제국</span>입니다. |
여기는콩나물대제국입니다.
|
위치
(position과 함께) |
top |
여기는<span style="position:relative; background-color:yellow; top:10;">콩나물대제국</span>입니다.
|
여기는콩나물대제국입니다.
|
| left |
여기는<span style="position:relative; background-color:yellow; left:10;">콩나물대제국</span>입니다.
|
여기는콩나물대제국입니다.
|
| right |
여기는<span style="position:relative; background-color:yellow; right:10;">콩나물대제국</span>입니다.
|
여기는콩나물대제국입니다.
|
| bottom |
여기는<span style="position:relative; background-color:yellow; bottom:10;">콩나물대제국</span>입니다.
|
여기는콩나물대제국입니다.
|
| 크기 |
width |
영역폭<span style="width:150px; background-color:olive;">콩나물대제국</span>
|
영역폭<span style="width:150px; background-color:olive;">콩나물대제국</span> |
| height |
영역높이<span style="height:30px; background-color:olive;">콩나물대제국</span>
|
영역높이콩나물대제국 |
| overflow |
overflow
overflow-x
overflow-y |
<span style="overflow: visible; width:100px; height: 100px; border: 1px solid blue;">영역의 폭보다 긴 문장이 오게 되면 영역을 늘여 다 보여준다.</span>
|
영역의 폭보다
긴 문장이 오게 되면
영역을 늘여 다 보여준다.
|
|
<span style="overflow: hidden; width:100px; height: 100px; border: 1px solid blue;">영역의 폭보다 긴 문장이 오게 되어도 영역안에만 보여준다.</span>
|
영역의 폭보다
긴 문장이 오게 되어도
영역안에만 보여준다.
|
|
<span style="overflow: auto; width:100px; height: 100px; border: 1px solid blue;">영역의 폭보다 긴 문장이 오게 되면 자동으로 스크롤이 되게 한다.</span>
|
영역의 폭보다
긴 문장이 오게 되면
자동으로 스크롤이 되게 한다.
|
|
<span style="overflow: scroll; width:100px; height: 100px; border: 1px solid blue;">>영역의 폭과 관계없이 스크롤을 보여준다.</span>
|
영역의 폭과
관계없이
스크롤을 보여준다.
|
| clip(자르기) |
clip |
<img src="3.jpg" style="position:absolute; top:-100; left:-100; clip:rect(100 200 200 100)">
※ rect(top right bottom left)
※ iframe 사용됨...
|
|
| 보이기/감추기 |
visibility |
여기와<span style="visibility: hidden;">Visibility</span>여기사이 |
여기와Visibility여기사이 |
여기와<span style="visibility: visible;">Visibility</span>여기사이
|
여기와Visibility여기사이 |
| 순서 |
z-index |
<img src="c.gif" style="position: absolute; z-index: 1; bottom: 100; left: 100;">
<img src="c.gif" style="position: absolute; z-index: 1; bottom: 125; left: 125;">
<img src="c.gif" style="position: absolute; z-index: 1; bottom: 150; left: 150;">
※ iframe 사용됨...
|
|
