<html>
<head>
<style type="text/css">
div
{
background-color:green;
}
#ab
{
background-color:blue;display:inline;
}
#ac
{
background-color:beige;display:block;
}
#ad
{
background-color:beige;display:none;
}
</style>
</head>
<body>
<h1>커서 모양</h1>
<div style="cursor:auto">style="cursor:auto"(자동)</div>
<div style="cursor:crosshair">style="cursor:crosshair"(십자형)</div>
<div style="cursor:pointer">style="cursor:pointer"(링크위모양)</div>
<div style="cursor:move">style="cursor:move"(이동가능모양)</div>
<div style="cursor:text">style="cursor:text"(텍스트 선택용모양)</div>
<div style="cursor:wait">style="cursor:wait"(처리중모양)</div>
<div style="cursor:help">style="cursor:help"(도움말모양)</div>
[n|s|w|e|ne|nw|se|sw]-resize(크기 재설정 가능 : 위|아래|왼쪽|오른쪽|오른쪽위|왼쪽위|오른쪽아래|왼쪽아래 방향)<br>
<br><br>
<h1>display - 출력형태</h1>
display:block(줄바꿈 일어남)|inline(줄바꿈 일어나지 않음)|none(보이지 않음)<br>
<xmp>
#ab
{
background-color:blue;display:inline;
}
#ac
{
background-color:beige;display:block;
}
#ad
{
background-color:beige;display:none;
}
.....
p 태그<br>
앞부분 <p id="ab">중간부분</p> 뒷부분<br><br>
div 태그<br>
앞부분 <div id="ab">중간부분</div> 뒷부분<br><br>
span 태그<br>
앞부분 <span id="ac">중간부분</span> 뒷부분<br><br>
span 태그<br>
앞부분 <span id="ad">중간부분</span> 뒷부분<br><br>
</xmp>
p 태그<br>
앞부분 <p id="ab">중간부분</p> 뒷부분<br><br>
div 태그<br>
앞부분 <div id="ab">중간부분</div> 뒷부분<br><br>
span 태그<br>
앞부분 <span id="ac">중간부분</span> 뒷부분<br><br>
span 태그<br>
앞부분 <span id="ad">중간부분</span> 뒷부분<br><br>
<br>
<h1>그림 좌우 배치</h1>
float:left(그림 왼쪽배치)|right(그림 오른쪽 배치)|none(좌우배치와 삽입이 실행안됨)<br>
clear:left(왼쪽요소 삽입해제)|right(오른쪽 요소삽입해제)|both(양쪽 요소 삽입해제)|none(삽입해제를 하지 않음)<br>
<xmp>
<img style="float:right;" src="../html/image/poster1.jpg" alt="거북이도난다">
거북이.. 토끼.. 첫줄<br> 말<br> 거북이<br> 난
<img src="../html/image/poster2.jpg" alt="말아톤">
<img style="float:left;" src="../html/image/poster3.jpg"><br>
거북이.. 토끼.. 둘째줄<br>세쩨줄<br><p style="clear:left">이건 clear준상태 밑으로 내려감</p>
<img src="../html/image/poster4.jpg">
</xmp>
<img style="float:right;" src="../html/image/poster1.jpg" alt="거북이도난다">
거북이.. 토끼.. 첫줄<br> 말<br> 거북이<br> 난
<img src="../html/image/poster2.jpg" alt="말아톤">
<img style="float:left;" src="../html/image/poster3.jpg"><br>
거북이.. 토끼.. 둘째줄<br>세쩨줄<br><p style="clear:left">이건 clear준상태 밑으로 내려감</p>
<img src="../html/image/poster4.jpg">
</body>
</html>
