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

background-image - 2

오작교 27729

0
background-position
  배경 이미지의 위치를 조절해주는 속성입니다. 속성값은 키워드식 , 픽셀방식 , 퍼센트(%) 방식이 있습니다. 
 
 키워드 방식  body { background-position: top left; } 
 픽셀방식  body { background-position: 40px 50px }
 퍼센트 방식  body { background-position: 40% 50% }

 

키워드 방식의 경우 top , bottom , left , right , center 등을 사용할 수 있다. 위에 보기처럼 top left 를 사용한 경우 브라우져 상단 왼쪽에 배경이미지를 위치시키는 것을 의미한다. 가운데 쉼표(,)가 없다는 것에 주의 하자. 픽셀과 퍼센트방식은 브라우저의 왼쪽 상단 원점으로부터 해당 수치만큼 x측 y측으로 위치를 지정해주는 것이다.   

  

 <style type="text/css">
  <!--
  body { background-image: url(https://tagmania.net/img/gil2.gif)undefined; background-repeat: no-repeat; background-position: bottom right ; }
  -->
 </style>
 <body>
  어때요? 길동이 아저씨네요^^<br>
  지금 사용한 방식은 키워드 방식입니다.<br>
  여러분들이 픽셀방식과 퍼센트 방식으로 <br>
  바꿔가면서 연습해보세요. 
 </body>

 

위의 예제의 경우 배경이미지를 no-repeat 로 설정해준 다음 background-poition을 키워드 방식으로 해준 것입니다. 여러분들이 픽셀방식과 퍼센트 방식으로 바꿔 가면서 연습을 해보세요. 제가 백번을 말해도 한번 직접 해보는 것이 더 이해가 빠르답니다. 
 
 ☞ background
  지금까지 background 에 대한 속성들을 배워왔습니다.. color , image , repeat , position 을 배웠는데....각각의 속성을 적어줄때 background ☜이 단어를 여러번 써야 하는 불편함이 있습니다.(타수도 잘 안 나오는데..영타로 꼬박꼬박 칠려고 하니 짜증나죠^^)  다음과 같이 하면 단 한번만 쓰고 각각의 속성을 표현해 줄 수 있습니다. 

 

body { background : url (이미지주소) 30% 50% repeat-x  fixed white }

  background 를 맨 처음에 한번 적어준 다음  각각의 속성값을 적어주면 되죠. 위에 속성들의 순서를 보면 처음에 이미지주소 , 이미지 위치 , 이미지 반복 , 배경이미지고정 , 배경색 이 되겠죠?
 어때요? 참 쉽죠 ~  잉~~

공유
0

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

취소 댓글 등록

신고

"님의 댓글"

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

댓글 삭제

"님의 댓글"

삭제하시겠습니까?

목록

공유

facebooktwitterpinterestbandkakao story
검색어 : 202102
번호 분류 제목 글쓴이 날짜 조회 추천
공지 HTML HTML 기초 다지기 4 오작교 08.06.17.16:26 290961 0
공지 HTML HTML과 CSS의 종합 정리 1 오작교 07.10.01.10:21 349931 0
공지 일반 스타일시트의 총정리 오작교 06.09.14.13:08 294558 +14
300
normal
오작교 23.12.10.09:32 14544 0
299 Script
normal
오작교 23.12.10.09:29 19879 0
298 CSS
normal
오작교 21.01.09.14:18 40822 0
297 HTML
normal
오작교 15.09.17.08:58 116404 0
296 HTML
normal
오작교 15.09.13.21:38 21678 0
295 HTML
normal
오작교 15.09.13.21:30 25263 0
294 HTML
normal
오작교 15.08.30.12:19 52864 0
293 Script
normal
오작교 15.05.12.14:06 21257 0
292 HTML
file
오작교 12.03.08.13:51 36016 0
291 HTML
normal
오작교 11.06.03.10:44 40844 0
290 CSS
normal
오작교 11.06.03.10:29 70751 0
289 Script
normal
오작교 11.03.22.11:19 43550 0
288 Script
normal
오작교 11.03.22.11:15 38322 0
287 Script
normal
오작교 11.03.22.11:07 37202 0
286 HTML
normal
오작교 11.01.25.10:27 36302 0
285 CSS
normal
오작교 11.01.24.10:40 35475 0
284 HTML
normal
오작교 11.01.24.10:39 37187 0
283 Script
normal
오작교 11.01.24.10:34 38197 0
282 CSS
normal
오작교 11.01.24.10:31 37836 0
281 CSS
normal
오작교 11.01.24.10:27 36304 0