스타일 시트 활용(2) - 레이아웃을 원하는 대로
먼저 스타일을 안쓰고 문서의 여백을 0으로 만들고자 할때는
<html>
<head>
<title>여백 0 만들기</title>
<body bgcolor="White" text="black" leftMargin=0 topMargin=0 marginheight="0"
marginwidth="0">
<img src="test.jpg" >
</body>
</html>
이렇게 하면 됩니다. 이 태그는 익스와 넷츠 둘다 먹습니다.
단 leftMargin=0 topMargin=0 은 익스플로러를 위한것이구
marginheight="0" marginwidth="0" 은 넷스케이프를 이용한것이죠
이걸 스타일로도 표현할수 있답니다. 단 넷스케이프는 안먹어요.
<html>
<head>
<title>여백 0 만들기</title>
<style="text/css">
<!--
body{margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left:
0px}
-->
</head>
<body bgcolor="White" text="black" >
<img src="test.jpg" >
</body></html>
그런데 만약에 여백 정도가 아니라 아예 이미지와 글의 위치를 자기 맘대로 조절하려면 어떻게 할까요.
또 굵기 0인 표를 무지막지하게 써서 이미지와 글을 배치한다구여?
이론.. 더 좋은 방법이 있습니다.
<html>
<head>
<title>레이아웃을 맘대루</title>
<style type="text/css">
<!--
IMG{position: absolute; top:0px ; left:0px}
p{position: absolute; top:200px ; left:200px ;width:100px ;height:100px}
-->
</style>
<body bgcolor="White" text="black" leftMargin=0 topMargin=0 marginheight="0"
marginwidth="0">
<img src= "dewbg.gif">
<p>글은 왼쪽으로 200, 위로 200의 위치에 놓여 있습니다.</p>
</body>
</html>
이미지를 왼쪽 위에 딱 붙이고 글을 웹브라우저 상에서 왼쪽으로 200px, 위로 200px 상으로 나타났지요. position:absolute 라는 말은 속성의 절대적인 위치를 지정한다는 이야깁니다.
반대로 position:relative 도 있는데 이걸루 쓰면 문단이나 태그내에서 스타일이나 태그에 의해 위치가 정해졌을경우에, 마지막 위치를 기준으로 상대값을 정한다는 이야기지요.
따라서 왼쪽으로 10px, 위로 10px로 마지막 위치가 설정이 되있을 경우 상대값을 20px, 30px로 지정해 주면 실제로는 왼쪽에서 30px 위로 40px 되는 위치에 나타 나겠지요.
그리구 이러한 가상적인 사각형의 크기도 설정이 가능합니다.
width:100px; height:100px 가 그것이지요. 뭐 말안해도 아시겠지요?
마지막으로 이렇게 정한 가상적인 공간이 겹치는 경우는 어떻게 될까요.
이럴때 스타일 시트를 이용해서 속성들이 겹치는 효과를 지정해 줄 수 있답니다.
<html>
<head>
<title>레이아웃을 맘대루 z-index</title>
<style type="text/css">
<!--
IMG.1{position: absolute; top:0px ; left:0px ; z-index:1}
IMG.2{position: absolute; top:100px ; left:30px ; z-index:2}
p{position: absolute; top:0px ; left:200px ;width:50px ;height:100px; z-index:3}
-->
</style>
<body bgcolor="White" text="gray" leftMargin=0 topMargin=0 marginheight="0"
marginwidth="0">
<img src="dewbg.gif" class="1">
<img src="msie1.gif" class="2">
<p>지금 이 글은 왼쪽으로 200, 위로 50의 위치에 놓여 있습니다.</p>
</body>
</html>
z-index 가 추가되었죠.
이 값은 1부터 차례대로 지정해야 하는데 서로 영역이 겹쳐있을 경우 숫자가 클수록 다른 것들보다 위에 나타나요.
그러니까 예제에서는 글자가 제일 먼저 나타나고 그 다음엔 msie1.gif 마지막으로 dewbg.gif 가 나타나게 되겠지요 ^^ 활용하시길
<html>
<head>
<title>여백 0 만들기</title>
<body bgcolor="White" text="black" leftMargin=0 topMargin=0 marginheight="0"
marginwidth="0">
<img src="test.jpg" >
</body>
</html>
이렇게 하면 됩니다. 이 태그는 익스와 넷츠 둘다 먹습니다.
단 leftMargin=0 topMargin=0 은 익스플로러를 위한것이구
marginheight="0" marginwidth="0" 은 넷스케이프를 이용한것이죠
이걸 스타일로도 표현할수 있답니다. 단 넷스케이프는 안먹어요.
<html>
<head>
<title>여백 0 만들기</title>
<style="text/css">
<!--
body{margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left:
0px}
-->
</head>
<body bgcolor="White" text="black" >
<img src="test.jpg" >
</body></html>
그런데 만약에 여백 정도가 아니라 아예 이미지와 글의 위치를 자기 맘대로 조절하려면 어떻게 할까요.
또 굵기 0인 표를 무지막지하게 써서 이미지와 글을 배치한다구여?
이론.. 더 좋은 방법이 있습니다.
<html>
<head>
<title>레이아웃을 맘대루</title>
<style type="text/css">
<!--
IMG{position: absolute; top:0px ; left:0px}
p{position: absolute; top:200px ; left:200px ;width:100px ;height:100px}
-->
</style>
<body bgcolor="White" text="black" leftMargin=0 topMargin=0 marginheight="0"
marginwidth="0">
<img src= "dewbg.gif">
<p>글은 왼쪽으로 200, 위로 200의 위치에 놓여 있습니다.</p>
</body>
</html>
이미지를 왼쪽 위에 딱 붙이고 글을 웹브라우저 상에서 왼쪽으로 200px, 위로 200px 상으로 나타났지요. position:absolute 라는 말은 속성의 절대적인 위치를 지정한다는 이야깁니다.
반대로 position:relative 도 있는데 이걸루 쓰면 문단이나 태그내에서 스타일이나 태그에 의해 위치가 정해졌을경우에, 마지막 위치를 기준으로 상대값을 정한다는 이야기지요.
따라서 왼쪽으로 10px, 위로 10px로 마지막 위치가 설정이 되있을 경우 상대값을 20px, 30px로 지정해 주면 실제로는 왼쪽에서 30px 위로 40px 되는 위치에 나타 나겠지요.
그리구 이러한 가상적인 사각형의 크기도 설정이 가능합니다.
width:100px; height:100px 가 그것이지요. 뭐 말안해도 아시겠지요?
마지막으로 이렇게 정한 가상적인 공간이 겹치는 경우는 어떻게 될까요.
이럴때 스타일 시트를 이용해서 속성들이 겹치는 효과를 지정해 줄 수 있답니다.
<html>
<head>
<title>레이아웃을 맘대루 z-index</title>
<style type="text/css">
<!--
IMG.1{position: absolute; top:0px ; left:0px ; z-index:1}
IMG.2{position: absolute; top:100px ; left:30px ; z-index:2}
p{position: absolute; top:0px ; left:200px ;width:50px ;height:100px; z-index:3}
-->
</style>
<body bgcolor="White" text="gray" leftMargin=0 topMargin=0 marginheight="0"
marginwidth="0">
<img src="dewbg.gif" class="1">
<img src="msie1.gif" class="2">
<p>지금 이 글은 왼쪽으로 200, 위로 50의 위치에 놓여 있습니다.</p>
</body>
</html>
z-index 가 추가되었죠.
이 값은 1부터 차례대로 지정해야 하는데 서로 영역이 겹쳐있을 경우 숫자가 클수록 다른 것들보다 위에 나타나요.
그러니까 예제에서는 글자가 제일 먼저 나타나고 그 다음엔 msie1.gif 마지막으로 dewbg.gif 가 나타나게 되겠지요 ^^ 활용하시길
신고
"님의 댓글"
이 댓글을 신고하시겠습니까?
