• 돌아가기
  • 아래로
  • 위로
  • 목록
  • 댓글
CSS

스타일 시트 위치조정과 레이어 조정

오작교 26894

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

 기본적인 스타일 시트 강좌는 여기서 마치도록 하겠습니다.

                                                                                                                           자료출처 : 태그매니아

공유
0

댓글 쓰기 권한이 없습니다. 로그인

취소 댓글 등록

신고

"님의 댓글"

이 댓글을 신고하시겠습니까?

댓글 삭제

"님의 댓글"

삭제하시겠습니까?

목록

공유

facebooktwitterpinterestbandkakao story
검색어 : 201703
번호 분류 제목 글쓴이 날짜 조회 추천
공지 HTML HTML 기초 다지기 4 오작교 08.06.17.16:26 287464 0
공지 HTML HTML과 CSS의 종합 정리 1 오작교 07.10.01.10:21 346527 0
공지 일반 스타일시트의 총정리 오작교 06.09.14.13:08 291152 +14
300
normal
오작교 23.12.10.09:32 14342 0
299 Script
normal
오작교 23.12.10.09:29 19478 0
298 CSS
normal
오작교 21.01.09.14:18 40485 0
297 HTML
normal
오작교 15.09.17.08:58 116092 0
296 HTML
normal
오작교 15.09.13.21:38 21394 0
295 HTML
normal
오작교 15.09.13.21:30 24972 0
294 HTML
normal
오작교 15.08.30.12:19 52571 0
293 Script
normal
오작교 15.05.12.14:06 20918 0
292 HTML
file
오작교 12.03.08.13:51 35727 0
291 HTML
normal
오작교 11.06.03.10:44 40527 0
290 CSS
normal
오작교 11.06.03.10:29 70423 0
289 Script
normal
오작교 11.03.22.11:19 43242 0
288 Script
normal
오작교 11.03.22.11:15 37984 0
287 Script
normal
오작교 11.03.22.11:07 36867 0
286 HTML
normal
오작교 11.01.25.10:27 36007 0
285 CSS
normal
오작교 11.01.24.10:40 35133 0
284 HTML
normal
오작교 11.01.24.10:39 36852 0
283 Script
normal
오작교 11.01.24.10:34 37867 0
282 CSS
normal
오작교 11.01.24.10:31 37496 0
281 CSS
normal
오작교 11.01.24.10:27 35995 0