background-position Propertybackground-position Propertybackground-position Property ´Â ¹è°æÀ¸·Î ÁöÁ¤ÇÑ ±×¸²ÀÇ ½ÃÀÛ ÁöÁ¡À» ÁöÁ¤ÇÏ´Â Property ÀÔ´Ï´Ù. ½Ç½À¿¡ »ç¿ëÇÒ ±×¸²À» ¾ÕÀÇ background-repeat Property¿¡¼ »ç¿ëÇÑ background_position.jpg ÀÔ´Ï´Ù. [Ç¥ º¸´Â ¹æ¹ý]
CSS Scripting
onClick="this.style.backgroundPosition='center center';"
background-position Property DHTML
À§ÀÇ DHTML ¿¡¼ [ [top | center | bottom] || [left | center | right] ] µîÀÇ ±×¸² À§Ä¡¸¦ Á¤·ÄÇÏ´Â Keyword µéÀ» Percentage·Î ¹Ù²Ù¸é ¾Æ·¡ÀÇ Ç¥¿Í °°½À´Ï´Ù.
DHTML Source code
<HTML>
<HEAD>
<TITLE>background-position Property</TITLE>
<STYLE type="text/css">
<!--
.td_button{
height:18px;
background-color:royalblue;
border:1px solid #808080;
cursor:pointer;
font-size:11px;
color:#EFEFEF;
text-align:center;
}
.tbl{
background-image:url(../images/background_position.jpg);
background-repeat:no-repeat;
height:300px;
table-layout:fixed;
border-collapse:collapse;
}
-->
</STYLE>
</HEAD>
<BODY>
<TABLE id="pos" class="tbl" border="1" cellspacing="0" frame="void">
<TR>
<TD> </TD>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
<TD> </TD>
</TR>
</TABLE>
<TABLE border="1" cellspacing="3" width="100%" style="border:1px solid #333333;
table-layout:fixed;">
<TR>
<TD class="td_button" onClick="pos.style.backgroundPosition='';">
ÁöÁ¤ ¾ÊÀ½</TD>
<TD class="td_button" onClick="pos.style.backgroundPosition='top center';">
top center</TD>
<TD class="td_button" onClick="pos.style.backgroundPosition='top right';">
top right</TD>
<TD class="td_button" onClick="pos.style.backgroundPosition='left center';">
left center</TD>
<TD class="td_button" onClick="pos.style.backgroundPosition='center center';">
center center</TD>
<TD class="td_button" onClick="pos.style.backgroundPosition='center right';">
center right</TD>
</TR>
<TR>
<TD class="td_button" onClick="pos.style.backgroundPosition='left bottom';">
left bottom</TD>
<TD class="td_button" onClick="pos.style.backgroundPosition='center bottom';">
center bottom</TD>
<TD class="td_button" onClick="pos.style.backgroundPosition='right bottom';">
right bottom</TD>
<TD class="td_button" onClick="pos.style.backgroundPosition='50px 50px';">
50px 50px</TD>
<TD class="td_button" onClick="pos.style.backgroundPosition='30% 30%';">
30% 30%</TD>
<TD class="td_button" onClick="pos.style.backgroundPosition='50% 50%';">
50% 150px</TD>
</TR>
</TABLE>
</BODY>
</HTML>
background-position À» Percentage·Î ÁöÁ¤ÇÒ ¶§ À¯ÀÇÇØ¾ß µÉ Á¡Àº background-image·Î ÁöÁ¤ÇÑ Box Å©±âÀÇ ¹éºÐÀ²À̶ó´Â Á¡ÀÔ´Ï´Ù. µû¶ó¼ Percentage·Î ÁöÁ¤ÇÏ¸é ºê¶ó¿ìÀú âÀÇ Å©±â¸¦ Á¶ÀýÇÔ¿¡ µû¶ó À§Ä¡°¡ ¹Ù²î°Ô µË´Ï´Ù. ¿©±â¸¦ Ŭ¸¯ÇÑ ´ÙÀ½ â Å©±â¸¦ ¸¶¿ì½º·Î Á¶ÀýÇØ º¸¸é ¸Õ ¶æÀÎÁö ¾Ë ¼ö ÀÖ½À´Ï´Ù. Áï, â Å©±â ¶Ç´Â Box Å©±â¿¡ µû¸¥ »ó´ëÀ§Ä¡°¡ µÇ°Ú½À´Ï´Ù. ÀÌ ¹®¼ÀÇ ÀúÀÛ±ÇÀº www.cadvance.org ¿¡ ÀÖ½À´Ï´Ù.
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||