목록

background-images 와 background-repeat 에 대한 예제를 보도록 하겠습니다.

 

 <style type="text/css">
  <!--
   body { background-image : url(https://tagmania.net/img/jang.jpg) ; background-repeat : repeat-y ; }
   .love { font-size : 13px; color : green; font-family : 돋움체; }
  -->
 </style>
 <body>
  <p class=love>배경이미지가 세로방향(y방향)으로만 반복이 되죠. ^^

background-repeat의 속성값을 바꿔가면서 연습을 많이 해보세요. ^^ 그럼 이해가 더욱 더 빠를 겁니다. </p>
 </body>

 

☞ background-attachment
  이 속성은 HTML에서의 bgproperties="fixed" 와 같은 기능을 하는 속성을 합니다.

즉, 여러분들이 웹서핑을 하다보면 어떤 곳에서는 스크롤바를 내려도 배경이미지는 고정되어 있고 안에 내용만 스크롤바에 따라 움직이는 것을 보셨을 겁니다. 그건 대부분 HTML을 이용한 건데요....스타일 시트를 이용해서도 같은 효과를 낼 수 있습니다. 

 

 <style>
 body { color : green ; font-size : 13px; background-image : url(https://tagmania.net/img/jjh.jpg)undefinedundefined; background-attachment : fixed; }
 </style>
 <body>
 <p>내가 당신을 얼마만큼 사랑하는지 <br>당신은 알지 못합니다. <br>
이른 아침, <br>감은 눈을 억지스레 떠야하는 <br>피곤한 마음 속에도 <br>
나른함 속에 파묻힌 체 <br>허덕이는 <br>오후의 앳된 심정속에도 <br>
당신의 <br>그 사랑스러운 <br>모습은 담겨 있습니다. </p>

 <p>내가 당신을 <br>얼마만큼 사랑하는지<br> 당신은 알지 못합니다. <br>
층층 계단을 오르내리며 <br>느껴지는<br> 정리할 수 없는 <br>
감정의 물결속에도 <br>십년이 훨씬 넘은 <br>
그래서 이제는<br> 삐걱대기까지 하는 <br>낡은 피아노 <br>
그 앞에서 지친 <br>목소리로 <br>노래를 하는 내눈 속에도 <br>
당신의 그 <br>사랑스러운 마음은 <br>담겨 있습니다. </p>
 </body>

 

 어때요? HTML을 사용한 경우와 같은 효과가 나올 겁니다.

직접 HTML을 사용하지 못하는 경우 스타일 시트를 사용하면 되겠죠?

이 게시물을