CSS Positioning Properties

W3C/CSS 2006. 9. 11. 18:13
CSS positioning 속성은 요소의 위치를 상,하,좌,우로 지정한다.
요소의 모양(shape)을 지정하고, 다른 것들 뒤에 요소를 위치시키고, 요소의 내용이 지정된 영역에 비해 너무 클 때 지정한다.

CSS bottom Property
(CSS top Property, CSS left Property, CSS right Property)
bottom 속성은 요소의 아래 테두리를 지정한다.
"position" 속성이 "static"의 값을 가진다면, "bottom" 속성은 효과가 없다.
(상속불가)

/* window의 아래 테두리의 20px 위에 문장의 아래 테두리 지정 */
p
{
position: absolute;
bottom: 20px
}
/* window의 아래 테두리의 20px 밑에 문장의 아래 테두리 지정 */
p
{
position: absolute;
bottom: -20px
}

Values
auto : 브라우저가 아래 위치를 계산한다.
% : 윈도우의 아래 테두리로부터 %로 아래 위치를 지정한다.
length : 윈도우의 아래 테두리로부터 px, cm 등으로 아래 위치를 지정한다.(음수값 허용)


CSS clip Property
clip 속성은 요소의 모양(shape)을 지정한다.
이미지가 요소보다 더 크다면..
"clip" 속성은 보이는 요소의 치수를 지정하고, 요소는 이 모양(shape)으로 잘려진다.
이 속성은 "visible"로 지정된 "overflow"속성과 함께 사용될 수 없다.
(상속불가)

img
{
clip: rect(10px, 5px, 10px, 5px)
}

Values
shape : 요소의 모양을 지정한다. 올바른 모양(shape) 값은 rect (top, right, bottom, left)이다.
auto : 브라우저가 요소의 모양(shape)를 지정한다.

<!-- 이미지를 지정한 shape만큼만 출력 -->
<html>
<head>
<style type="text/css">
img
{
position:absolute;
clip:rect(0px 50px 200px 0px)
}
</style>
</head>

<body>
<p><img border="0" src="test_js.gif" width="120" height="150"></p>
</body>
</html>


CSS overflow Property
overflow 속성은 요소의 내용이 영역보다 클 때 지정한다.
(상속불가)

p
{
overflow: scroll
}

Values
visible : 내용은 잘려지지 않는다. 요소의 바깥쪽에 나타난다.
hidden : 내용이 잘리고, 브라우저가 내용의 나머지를 볼 수 있는 스크롤바를 나타내지 않는다.
scroll : 내용은 잘려지지만, 브라우저가 내용의 나머지를 볼 수 있는 스크롤바를 나타낸다.
auto : 내용이 잘려진다면, 브라우저가 내용의 나머지를 볼 수 있는 스크롤바를 보여줄 것이다.

<!-- 내용이 넘칠때 스크롤 설정 -->
<html>
<head>
<style type="text/css">
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll
}
</style>
</head>

<body>
<div>
some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text
</div>
</body>
</html>


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

h1
{
position:absolute;
left:100px;
top:150px;
}
 
Values
static : 요소는 보통 위치에 위치한다. 이 값을 가지면 "left", "top" 속성을 사용하지 않는다.
relative : 보통 위치에서 상대적으로 요소를 이동힌다.
absolute : 이 값을 가지면 페이지의 어느곳에든 위치시킬 수 있다. 요소의 위치는 "left", "top", "right", "bottom" 속성으로 지정된다.


CSS vertical-align Property
vertical-align 속성은 요소의 세로 정렬을 지정한다.
(상속불가)

img
{
vertical-align: bottom
}
 
Values
baseline : 요소는 상위 요소의 아래 기준선에 위치된다.
sub : 아래첨자로 요소를 정렬한다.
super : 윗첨자로 요소를 정렬한다.
top : 요소의 상단은 그 줄의 가장 높은 요소의 상단에 정렬된다.
text-top : 요소의 상단은 상위 요소 폰트의 상단에 정렬된다.
middle : 요소는 상위 요소의 중앙에 위치된다.
bottom : 요소는 요소의 하단은 그 줄의 가장 낮은 요소에 정렬된다.
text-bottom : 요소의 하단은 상이ㅜ 요소 폰트의 하단에 정렬된다.
% : line-height 속성의 %값에 요소를 정렬시킨다.(음수값 허용)

<!-- 라인 세로 정렬 -->
<html>
<head>
<style type="text/css">
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}
</style>
</head>

<body>
<p>
some
<img class="top" border="0" src="test_js.gif" width="50" height="100" />
text.
</p>
<p>
some
<img class="bottom" border="0" src="test_js.gif" width="50" height="100" />
text.
</p>
</body>
</html>


CSS z-index Property
z-index 속성은 요소의 순서를 지정한다.
가장 큰 순서를 가진 요소는 항상 낮은 순서를 가진 또 다른 요소의 앞에 존재한다.
요소의 순서는 음수값을 허용한다.
Z-index는 position 속성이 정해진 요소에만 작동한다.
(상속불가)

img
{
z-index: -1
}
 
Values
auto - 순서는 그 부모(parent)와 같다.
number - 요소의 순서를 지정한다.

<!-- 스택 순서 지정 -->
<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
</head>

<body>
<h1>some text.</h1>
<img class="x" src="bulbon.gif" width="100" height="180">
<p>some text.</p>
</body>
</html>

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

트랙백  0 , 댓글  0개가 달렸습니다.
secret