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

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

오작교 27057

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
검색어 : 202009
번호 분류 제목 글쓴이 날짜 조회 추천
공지 HTML HTML 기초 다지기 4 오작교 08.06.17.16:26 290233 0
공지 HTML HTML과 CSS의 종합 정리 1 오작교 07.10.01.10:21 349232 0
공지 일반 스타일시트의 총정리 오작교 06.09.14.13:08 293853 +14
74 CSS
normal
오작교 21.01.09.14:18 40687 0
73 CSS
normal
오작교 11.06.03.10:29 70619 0
72 CSS
normal
오작교 11.01.24.10:40 35350 0
71 CSS
normal
오작교 11.01.24.10:31 37706 0
70 CSS
normal
오작교 11.01.24.10:27 36178 0
69 CSS
normal
오작교 10.05.25.23:30 38515 0
68 CSS
normal
오작교 10.05.25.23:27 36783 0
67 CSS
normal
오작교 10.05.25.23:24 37311 0
66 CSS
normal
오작교 10.05.25.22:18 33984 0
65 CSS
normal
오작교 10.05.25.22:13 36261 0
64 CSS
file
오작교 10.03.23.08:22 73656 0
63 CSS
normal
오작교 09.07.07.17:22 33317 0
CSS
normal
오작교 09.07.07.17:18 27057 0
61 CSS
normal
오작교 09.07.07.17:12 27659 0
60 CSS
normal
오작교 09.07.07.17:07 32363 0
59 CSS
normal
오작교 09.07.07.17:04 27865 0
58 CSS
normal
오작교 09.07.07.17:01 36657 0
57 CSS
normal
오작교 09.07.07.16:57 26692 0
56 CSS
normal
오작교 09.07.07.16:43 28772 0
55 CSS
normal
오작교 09.07.07.16:40 28314 0