이번 장에서는 스타일 시트
위치지정과 레이어에 대해서 알아보겠다.
☞ position , left , top
스타일 시트의 요소의 위치를
조절해주는 속성이다.
|
h2 {
position: absolute; left: 100px; top:40px; } |
대충 이렇게 사용됩니다. position 속성의
경우 absolute(절대적위치)와 relative(상대적위치)로
값을 지정해줄 수 있습니다. 어떤 말인지 대충
감이 오죠? ^^ 브라우저에서 해당 요소를
표현해줄때 위치를 브라우저의 크기에 따라
상대적으로 해줄 것인가 아니면 브라우저의
크기에 상관없이 항상 고정된 부분에 위치시켜 줄
것인가를 결정해주는 거죠.
left , top의 경우 직접적으로 위치를 적어 주는
속성입니다. left : 50px의 경우 브라우저의
왼쪽으로부터 우측으로 50px 떨어진 곳에... top :
60px의 경우 브라우저 상단에서부터 아래쪽으로
60px 부분에 위치시키란 의미죠. 아시겠죠? ^^
<style type="text/css">
<!--
body { font-family : 돋움체; }
h1 { color : yellow; font-size : 70px; }
.love { position : absolute; left : 100px; top :
43px; }
.story { positon : relative; left : 40px; top :
10px; color : red; }
-->
</style>
<body>
<h1> 태그매니아 스타일 시트
특강</h1>
<div class=love> 태그매니아 홈페이지
제 4차 전면 사이트 개편과 더불어 <span
class=story>스타일 시트 특강을 마련 하게
되었다. </span>많은 도움이 됬으면 한다.</div>
</body>
|
☞ width , height
position 과 같이 사용되며 요소의 넓이와
높이를 조절해서 전체적인 레이아웃을 조절하는
역할을 합니다. width와 height 속성은 다른 크기
지정 속성과 같은 단위(px , pt , cm ,in)를
사용합니다.
☞ z-index
레이어 효과를 사용할 때 레이어의 층의
순서를 결정해주는 속성입니다. z-index 값이
작을수록 아래 층을 의미합니다. 간단한 예제를
볼까요?
<style type="text/css">
<!--
body { font-size : 23px; }
.love { font-color : green; z-index : 1; position :
absolute; left : 100px; top : 150px; }
.story { font-color : orange; z-index : 3; positon
: absoluet; left : 150px; top : 100px; }
-->
</style>
<body>
<div class=love> 아래층 래이어죠</div>
<div class=story>위층 레이어 입니다.</div>
</body> |
기본적인 스타일 시트 강좌는 여기서
마치도록 하겠습니다.
|
