¹Î°¡ÃÌ(±¤°í´Â »ç¾çÇÏ°í/ ȸ¿ø°¡ÀÔÀº ¹ÞÁö ¾Ê½À´Ï´Ù)_200

Àüü°¹¼ö : 204 (30 searched) , 1 / 2 pages ·Î±×ÀÎ  
Category (204)  ÀÏ¹Ý (30)  interval (22)  ¹Î°¡ÃÌ (131)  ColorSheet (8)  Storage (11) 
ÀÌ ¸§ ...
Á¦ ¸ñ [HTML] ul-li¸¦ ÀÌ¿ëÇÑ »ó´Ü¸Þ´º ±¸¼º/ Ŭ¸®ÇÎ ¿µ¿ª Á¤ÀÇ
¢¹ Âü°í »çÀÌÆ®
http://yasu.tistory.com/850 - ºí·Î±× »ó´Ü¿¡ ÀÌ»Û ¸Þ´º¹Ù ³Ö±â~
http://www.highdots.com/css-tab-designer/ - css-tab(¸Þ´º¹Ù ¸¸µå´Â ÇÁ·Î±×·¥)

#. »ó´Ü¸Þ´º ±¸¼º ;  menu_img_01 | menu_img_02 | menu_img_03 | ...

<style type="text/css">
img{
display: block;
}
.menu{
background:url(images/menu_bg.gif) left top no-repeat;  /* ¹è°æ À̹ÌÁö */
margin: 0;
width: 972;
height: 45;
padding: 10px 0 0 25px;
}
li{
list-style-type: none; /* ¸ñ·Ï ÁÂÃø ¾ÆÀÌÄÜ ¾È³ª¿À°Ô*/
padding: 0;
float: left; /* ¸®½ºÆ®¸¦ °¡·Î·Î Á¤·Ä*/
}
</style>

<BODY>
...
<ul class="menu">
  <li>
   <img src="images/top_menu_img_01.gif" alt=""></li> /* ¸Þ´º 1 */
  <li>
   <img src="images/top_menu_img_02.gif" alt=""></li> /* ¸Þ´º 2 */
  <li>
   <img src="images/top_menu_img_03.gif" alt=""></li> /* ¸Þ´º 3 */
  ...
</ul>

</BODY>

#. ¹öÆ° ¸¶¿ì½º ¿À¹ö½Ã ´Ù¸¥ À̹ÌÁö·Î º¯°æ
<img src="óÀ½À̹ÌÁöÁÖ¼Ò" onmouseover="this.src='¹Ù²ðÀ̹ÌÁöÁÖ¼Ò';" onmouseout="this.src='óÀ½À̹ÌÁöÁÖ¼Ò';">


//----------------------------------------------------------------------------------
#. Ŭ¸®ÇÎ ¿µ¿ª Á¤ÀÇ (from MSDN)
´ÙÀ½ HTML ÄÚµå´Â clip ¼Ó¼ºÀ» »ç¿ëÇÏ¿© Àý´ëÀûÀ¸·Î ¹èÄ¡µÈ DIV ¿ä¼ÒÀÇ Å¬¸®ÇÎ ¿µ¿ªÀ» Á¤ÀÇÇÕ´Ï´Ù. ´ÙÀ½ ¿¹¿Í °°ÀÌ, 30 x 30 Çȼ¿ÀÇ Á¤»ç°¢Çü ¿µ¿ªÀÌ ÅؽºÆ®ÀÇ ÀϺθ¸ Ç¥½ÃÇÏ°í ³ª¸ÓÁö´Â º¸±â¿¡¼­ À߸³´Ï´Ù.

<html>
<head><title>Clip the div</title>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px; height: 100px;
    width: 100px; clip: rect(0 30 30 0); background-color: green;">
some content some content some content some content some content
some content some content some content some content some content
some content some content some content some content some content
some content some content
</div>
</body>
</html>

cf.<div id="·¹À̾îÀ̸§" style="..."></div>

Ŭ¸®ÇÎ ¿µ¿ªÀ» Á¤ÀÇÇÒ ¶§ ÁÖÀÇÇϽʽÿÀ. ¸Å°³ º¯¼ö ¼ø¼­(À§, ¿À¸¥ÂÊ, ¾Æ·¡, ¿ÞÂÊ)°¡ Áß¿äÇÕ´Ï´Ù. ¿¹¸¦ µé¾î clip:rectÀ» (0 0 30 30)À¸·Î ¼³Á¤Çϸé top ¼Ó¼º°ú right ¼Ó¼ºÀÌ 0À¸·Î Á¤ÀǵǾú±â ¶§¹®¿¡ ¿µ¿ªÀÌ Ç¥½ÃµÇÁö ¾Ê½À´Ï´Ù. ¹èÄ¡µÈ °³Ã¼ÀÇ ¿ÞÂÊ À§ ¸ð¼­¸®¸¦ ±âÁØÀ¸·Î 30 x 30 Çȼ¿ Å©±âÀÇ Å¬¸®ÇÎ ¿µ¿ªÀ» ¿Ã¹Ù¸£°Ô Á¤ÀÇÇÏ·Á¸é clip:rectÀ» (0 30 30 0)·Î ¼³Á¤ÇÕ´Ï´Ù.

#. ´ÙÀ½ ¿¹¿Í °°ÀÌ, clip ¼Ó¼ºÀ» »ç¿ëÇÏ¿© Ŭ¸®ÇÎ ¿µ¿ªÀ» µ¿ÀûÀ¸·Î º¯°æÇÒ ¼ö ÀÖ½À´Ï´Ù.
document.all.Mydiv.style.clip = "rect(0 50 75 0)";


À­   ±Û   ÀÓÁø·Ï_2013³â_2
...
¾Æ·§±Û   [HTML] a ű×ÀÇ Target ¼Ó¼º
tj

¸ñ·Ïº¸±â ´äº¯´Þ±â ¼öÁ¤Çϱ⠻èÁ¦Çϱâ ÃßõÇϱâ


Copyright 1999-2024 Zeroboard / skin by salz