¢Ñ 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(http://tagmania.net/img/gil2.gif); 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 ¸¦ ¸Ç óÀ½¿¡ Çѹø Àû¾îÁØ
´ÙÀ½ °¢°¢ÀÇ ¼Ó¼º°ªÀ» Àû¾îÁÖ¸é µÇÁÒ.^^ À§¿¡
¼Ó¼ºµéÀÇ ¼ø¼¸¦ º¸¸é óÀ½¿¡ À̹ÌÁöÁÖ¼Ò ,
À̹ÌÁö À§Ä¡ , À̹ÌÁö ¹Ýº¹ , ¹è°æÀ̹ÌÁö°íÁ¤ ,
¹è°æ»ö ÀÌ µÇ°ÚÁÒ?^^
¾î¶§¿ä? ½±ÁÒ? ^^
|