Untitled Document

스타일시트를 이용한 위치 지정

1. Position 속성

position속성은 absolute, relative, static 등 3가지 속성값 중 하나를 지정할 수 있다.
이 속성은 top과 left속성(시작지점의 위쪽과 왼쪽으로부터 떨어진 거리를 지정하기 위해 사용되는 속성)과 함께 사용되며 width와 height속성(너비와 높이를 지정하기 위해 사용되는 속성)과도 함께 사용된다.

1) 상대위치지정

상대 위치 지정은 요소를 표시 흐름에서의 초기 위치에 상대적인 위치로 설정하는 것이다.
top속성으로 양수값을 지정하면 요소는 지정한 크기만큼 아래쪽으로 이동된다.
left속성에 양수값을 지정하는 경우에는 지정한 값을 크기만큼 오른쪽으로 이동된다.

<html>
<head>
<style type="text/css">
<!--
em{ position:relative; top:20px; left:12px;}
-->
</style>
</head>
<body>
<p>이 줄에는 <em>강조된 텍스트</em>가 있는데 위치가 바뀔 것이다.</p>
<p>이 줄은 강조된 텍스트가 표시된 뒤에 표시되는 줄이다.</p>
</body>
</html>

2) 절대위치지정

절대위치지정은 요소를 화면의 임의의 위치로 이동한다.
음수값도 지정할 수있다.
요소에 절대위치지정이 적용되는 경우 이전에 차지하고 있던 공간은 닫히게 된다.
새로운 위치에서 페이지의 다른 요소와 겹쳐질 수 있다.

<html>
<head>
<style type="text/css">
<!--
em{position:absolute; top:20px; left:12px;}
-->
</style>
</head>
<body>
<p>이 줄에는 <em>강조된 텍스트</em>가 있는데 위치가 바뀔 것이다.</p>
<p>이 줄은 강조된 테긋트가 표시된 뒤에 표시되는 줄이다.</p>
</body>
</html>
3) 정적인 위치 지정

position 속성에서는 기본값이 static이다. 페이지에 출력된 곳에 위치한다. 정적 요소는 위치를 지정하거나 변경할 수 없다.

2. z순서

1)Z순서

Z순서(Z-Order)는 요소들의 겹쳐지는 순서를 가리킨다.
z-index속성을 사용한다.
숫자가 낮은 요소가 아래로 간다.

<html>
<head>
<title>
z순서 예제입니다.
</title>
<style type="text/css">
<!--
.top{position:absolute; left:10px; top:50px; z-index:3}
.middle{position:absolute; left:100px; top:70px; z-index:2}
.bottom{position:absolute; left:40px; top:90px; z-index:1}
-->
</style>
</head>
<body>
<img src="img/top.gif" class=top>
<img src="img/middle.gif" class=middle>
<img src="img/bottom.gif" class=bottom>
</body>
</html>

3. 가시성

1)가시성(visibility)

속성값: visible｜hidden

태그를 보이게 하거나 보이지 않게 하는 속성이다.
visible이 기본값이고 hidden이면 페이지 위에 표시되지 않으며 화면에서 일정한 빈 공간을 차지하게 된다.

<html>
<head>
<style type="text/css">
<!--
em{visivility:hidden;}
-->
</style>
</head>
<body>
어느 파란 새벽 잠못 이루던 밤 내게 전활 걸어 사랑한다 <em>고백</em>해 버렸네. 잠에 취했던 넌 아무말 못했고 항상 그랬듯이 그냥 전활 끊어버렸네.. 너도 늦게 말을 해죠. 항상 나를 생각한다고... 처음 처음 처음부터 나는 너를 사랑했었던거야. 내마음을 이젠 알겠니. 지금부턴 넌 넌 내꺼야. 언제까지 너와 함께할거야. 내 가슴에 네 사랑 담을거야... * 지금 내곁에는 잠든 네가 있어 항상 그랬듯이 그냥 내 곁에 머물러줘.. 너의 숨결이 느껴져. 항상 너와 함게 할거야... 아~~~아이야~~ 아이야~~ 이리어~~ 우 아이야~~ 이리러 이리럼 ~~ 지금 잡은 너의 두손 절대 놓치지 않아. 소중한 널 위해 내사랑 포기하지 않을거야. 처음처음처음부터 나는 너를 사랑했었던 거야. 내마음을 이젠 알겠니. 지금부터 넌 넌 내꺼야. 언제까니 너와 함께 할거야. 내 가슴에 네 사랑 담을거야..
</body>
</html>

4. 오버플로우

1)오버플로우(Overflow)

속성값: visible｜hidden｜scroll

<html>
<head>
<style type="text/css">
<!--
#changjung {position:absolute; width:100px; height:100px; overflow:visible;}
#lim{position:absolute; width:100px; height:100px; left:200; top:200;overflow:hidden}
#singok{position:absolute; width:100px; height:100px; left:400; top:400;overflow:scroll}
-->
</style>
</head>
<body>
<div id="changjung">
나의 과거와 너의 지금과 너무도 같기에 두려움없이 난 네게 마지막이어야 할 사람 너의 방황을 돌릴 수 있게 날 이렇게 뿌리친대도 너의 손을 놓친 않을 거야</div><br>
<div id="lim">
나의 과거와 너의 지금과 너무도 같기에 두려움없이 난 네게 마지막이어야 할 사람 너의 방황을 돌릴 수 있게 날 이렇게 뿌리친대도 너의 손을 놓친 않을 거야</div>
<div id="singok">
나의 과거와 너의 지금과 너무도 같기에 두려움없이 난 네게 마지막이어야 할 사람 너의 방황을 돌릴 수 있게 날 이렇게 뿌리친대도 너의 손을 놓친 않을 거야</div>
</body>
</html>

상자공간 안에 지정할 수 없는 텍스트를 다루기 위한 또 다른 방법이다.

  • visible: 경계 사각형의 크기를 늘려서 전체 요소가 표시될 수 있도록 한다.
  • hidden: 경계 상자에 맞지 않는 부분은 표시하지 않음
  • scroll: 경계 상자에 스크롤바를 표시하여 사용자가 컨텐츠를 읽을 수 있도록 한다.

<이전   목록   다음>

　

Copyright ⓒ2001∼2003, alza.wo.to All Rights Reserved.