스타일 시트 위치지정과 레이어
이번 장에서는 스타일 시트 위치지정과 레이어에 대해서 알아보겠다.
☞ position , left , top
스타일 시트의 요소의 위치를 조절해주는 속성이다.
☞ 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> |
