목록

이번 장에서는 스타일 시트 위치지정과 레이어에 대해서 알아보겠다.
 ☞ 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>

 

이 게시물을