CSS classification 속성은 요소를 어떻게 보여줄지 컨트롤하고 이미지를 또다른 요소와 나타내는 것을 지정하고, 일반 위치에서 상대적으로 요소를 위치시키고, 절대값을 사용하여 요소를 위치시키고, 보이는 요소를 컨트롤하게 한다.


CSS cursor Property
cursor 속성은 요소에 포인팅했을 때 나타나는 커서의 형태를 지정한다.
(상속가능)

h2
{
cursor: crosshair
}
p
{
cursor : url("first.cur"), url("second.cur"), pointer
}

Values
url - 사용될 사용자 커서의 주소
default - 기본 커서
auto - 브라우저가 커서를 지정
crosshair - 십자선 모양의 커서
pointer - 링크를 가리키는 손모양 커서
move - 동서남북 가리키는 커서
e-resize - 동쪽을 가리키는 커서
ne-resize - 북동쪽을 가리키는 커서
nw-resize - 북서쪽을 가리키는 커서
n-resize - 북쪽을 가리키는 커서
se-resize - 남동쪽을 가리키는 커서
sw-resize - 남서쪽을 가리키는 커서
s-resize - 남쪽을 가리키는 커서
w-resize - 서쪽을 가리키는 커서
text - 텍스트를 가리키는 커서
wait - 모래시계 커서
help - 물음표 커서

<!-- 마우스 커서 변경 -->
<html>
<body>
<span style="cursor:auto">
Auto</span><br />
<span style="cursor:crosshair">
Crosshair</span><br />
<span style="cursor:default">
Default</span><br />
<span style="cursor:pointer">
Pointer</span><br />
<span style="cursor:move">
Move</span><br />
<span style="cursor:e-resize">
e-resize</span><br />
<span style="cursor:ne-resize">
ne-resize</span><br />
<span style="cursor:nw-resize">
nw-resize</span><br />
<span style="cursor:n-resize">
n-resize</span><br />
<span style="cursor:se-resize">
se-resize</span><br />
<span style="cursor:sw-resize">
sw-resize</span><br />
<span style="cursor:s-resize">
s-resize</span><br />
<span style="cursor:w-resize">
w-resize</span><br />
<span style="cursor:text">
text</span><br />
<span style="cursor:wait">
wait</span><br />
<span style="cursor:help">
help</span>
</body>
</html>


CSS float Property
float 속성은 Block 이나 이미지를 좌측이나 우측에 위치 시키고 Block 이나 이미지 주변으로 텍스트를 배열하는 속성이다.
(상속불가)

img
{
float: left
}

Values
left - 그림이나 Box가 왼쪽에 배치되고, 글씨는 Box의 오른쪽으로 흐르게 된다.
right - 그림이나 Box가 오른쪽에 배치되고, 글씨는 Box의 왼쪽으로 흐르게 된다.
none - 그림이나 Box가 왼쪽으로 배치되고, 글씨는 첫줄만 Box의 오른쪽으로 흐르게 된다. 

<!-- 이미지를 텍스트 우측에 지정 -->
<html>
<head>
<style type="text/css">
img
{
float:right
}
</style>
</head>

<body>
<p><b>float:right</b></p>
<p>
<img src="logocss.gif" width="95" height="84" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>


CSS position Property
position 속성은 static, relative, absolute(fixed)로서 요소를 위치시킨다.
(상속불가)

h1
{
position:absolute;
left:100px;
top:150px;
}
 
Values
static - Default 값으로 HTML 문서의 문단에서 처럼 일반적인 내용물들의 흐름을 말한다. 상단(top)과 좌측(left) 에서의 거리를 지정할 수 없다.
relative - HTML 문서에서의 일반적인 내용물들의 흐름을 말하지만 상단과 좌측에서의 거리를 지정할 수 있다.
absolute - 자신의 상위 Box 속에서의 top, left, right, bottom 등의 절대적인 위치, 즉 변하지 않는 위치를 지정할 수 있다.

<!-- 요소의 절대 위치 지정 -->
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>

<body>
<h2 class="pos_abs">absolute position</h2>
<p>some text</p>
</body>
</html>

WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.

,