CSS·Î À̹ÌÁö È¿°ú³»±â Go to UP

CSS À̹ÌÁö¸¦ À§ÇÑ font-family
±×¸²¸ðÀ½
Ãß°¡ ¿¹Á¦


CSS¿¡´Â ±ÛÀÚµéÀ» ´Ù·ê¼ö ÀÖ´Â color, border, background-colorµî ¿©·¯ attributeµéÀÌ ÀÖ½À´Ï´Ù. À̰͸¸À¸·Î »ç¿ëÇÏ¸é ¾à°£ÀÇ È¿°ú¸¦ º¼¼ö ÀÖÁö¸¸, À̵é attributeµéÀ» »ç¿ëÇÑ ·¹À̾ ¿©·¯°ãÀ¸·Î ³õ¾ÆÁÖ¸é Ãʺ¸ ±×·¡ÆÛ°¡ ¸¸µç °Í°ú ºñ½ÁÇÑ ±ÛÀÚ À̹ÌÁö¸¦ ¸¸µé ¼ö ÀÖ½À´Ï´Ù.

±ÛÀÚ À̹ÌÁö ±ÛÀÚ À̹ÌÁö ±ÛÀÚ À̹ÌÁö ±ÛÀÚ À̹ÌÁö ±ÛÀÚ À̹ÌÁö ±ÛÀÚ À̹ÌÁö ±ÛÀÚ À̹ÌÁö ±ÛÀÚ À̹ÌÁö ±ÛÀÚ À̹ÌÁö 2 ±ÛÀÚ À̹ÌÁö 2 ±ÛÀÚ À̹ÌÁö 2 ±ÛÀÚ À̹ÌÁö 2 ±ÛÀÚ À̹ÌÁö 3 ±ÛÀÚ À̹ÌÁö 3 ±ÛÀÚ À̹ÌÁö 3 ±ÛÀÚ À̹ÌÁö 3 ±ÛÀÚ À̹ÌÁö 3
±ÛÀÚ À̹ÌÁö 4 ±ÛÀÚ À̹ÌÁö 4 ±ÛÀÚ À̹ÌÁö 4 ±ÛÀÚ À̹ÌÁö 4 ±ÛÀÚ À̹ÌÁö 5 ±ÛÀÚ À̹ÌÁö 5 ±ÛÀÚ À̹ÌÁö 5 ±ÛÀÚ À̹ÌÁö 6 ±ÛÀÚ À̹ÌÁö 6 ±ÛÀÚ À̹ÌÁö 6 ±ÛÀÚ À̹ÌÁö 6 ±ÛÀÚ À̹ÌÁö 6 ±ÛÀÚ À̹ÌÁö 6
±ÛÀÚ À̹ÌÁö 7 ±ÛÀÚ À̹ÌÁö 7 ±ÛÀÚ À̹ÌÁö 7 ±ÛÀÚ À̹ÌÁö 7 ±ÛÀÚ À̹ÌÁö 7 ±ÛÀÚ À̹ÌÁö 8 ±ÛÀÚ À̹ÌÁö 8 ±ÛÀÚ À̹ÌÁö 8 ±ÛÀÚ À̹ÌÁö 8 ±ÛÀÚ À̹ÌÁö 8 ±ÛÀÚ À̹ÌÁö 9 ±ÛÀÚ À̹ÌÁö 9 ±ÛÀÚ À̹ÌÁö 9


ÀÌ·± È¿°ú¸¦ ³»±â À§Çؼ­ ¿©·¯ ·¹À̾ ÇÑ ·¹ÀÌ¾î ¾È¿¡ ³Ö¾îÁÖ°í °¢ ³»ºÎ ·¹À̾îÀÇ À§Ä¡¿Í »ö»óÀ» Á¶ÀýÇϸé À̹ÌÁö°°Àº È¿°ú°¡ ³ª¿É´Ï´Ù. »ö»ó°ú À§Ä¡¿¡ µû¶ó¼­ ´À³¦ÀÌ ´Þ¶ó º¸ÀÔ´Ï´Ù. ÀÌ ´À³¦Àº ¿©·¯¹ø ´Ù¸£°Ô ÇØº¸¸é ¸¶À½ÀÌ µå´Â À̹ÌÁö È¿°ú¸¦ º¼ ¼ö ÀÖ½À´Ï´Ù.

ÀÌ·± ±ÛÀÚ À̹ÌÁö¸¦ Çϳª¸¸ »ç¿ëÇÒ ¶§´Â ÆäÀÌÁö¿¡¼­ ¹èÄ¡°¡ ½±Áö¸¸ ¿©·¯°³¶ó¸é ÆäÀÌÁö¿¡¼­ ¹èÄ¡ÇÒ ¶§ À߸øµÈ °á°ú°¡ ie4¿Í nn4¿¡¼­ ÀÖ¾ú½À´Ï´Ù.

ie4¿¡¼­ °°Àº Å©±âÀÇ ·¹À̾ 1px¾¿ ¿©·¯°³ ÃþÀ» ÀÌ·ç¾î ¹èÄ¡¸¦ Çϸé 20px, 15pt ÀÌ»óÀÇ font-size¸¦ ÁöÁ¤ÇÑ ·¹À̾îÀÇ ±ÛÀÚ°¡ body line-height¸¦ ÁöÁ¤ÇÑ ÆäÀÌÁö¿¡¼­ ÀϺΰ¡ Àß·Á³ª°©´Ï´Ù. À̶§, ·¹À̾ table·Î °¨½Î´Ï À߸®Áö ¾Ê¾Ò½À´Ï´Ù. Áï, line-heightº¸´Ù Å« ±ÛÀÚ¸¦ »ç¿ëÇÏ¸é ±× ¸¸Å­ ±ÛÀÚ°¡ À߸³´Ï´Ù. ±×¸®°í position:relative ·Î ÁöÁ¤ÇÑ ·¹À̾î´Â JavaScript·Î ¹èÄ¡½Ãų ¼ö°¡ ¾ø½À´Ï´Ù.

nn4¿¡¼­ ·¹À̾ °¡Áö°í ÀÖ´Â ·¹À̾ 2°³ ÀÌ»ó »ç¿ëÇÒ ¶§, µÎ ¹øÂ° ·¹À̾ Á¦´ë·Î ³ª¿À°Ô Çϱâ À§Çؼ­ °¢ ·¹À̾îÀÇ ÇÏÀ§ ·¹À̾ style¸¦ ÁöÁ¤½Ã <style>Åà ¾È¿¡ ³Ö¾î¾ß µÎ ¹øÂ° ·¹À̾ ³ª¿É´Ï´Ù. inlineÀ¸·Î °¢ ÇÏÀ§ ·¹À̾î Åþȿ¡ styleÀ» ÁöÁ¤½Ã µÎ¹øÂ° ·¹À̾îºÎÅÍ ³ª¿ÀÁö ¾Ê½À´Ï´Ù.


¹èÄ¡¸¦ À§ÇØ tableÀ» »ç¿ëÇÏÁö ¾Ê°í <span> ÅÃÀº Á¤¿­ÀÌ ±î´Ù·Ó½À´Ï´Ù. position:absolute, relative µÑ ´Ù ¸¶Âù°¡ÁöÀÔ´Ï´Ù. &nbsp;·Î HTMLÀ» ÀÛ¼ºÇÒ ¶§ ¹Ì¸® Á¶Á¤À» ÇÏ¸é µÇ°ÚÁö¸¸ ·¹À̾îÀÇ style width, bodyÀÇ font-size, line-height ¿¡ µû¶ó¼­ À¯µ¿ÀûÀ̱⠶§¹®¿¡ left ÁÂÇ¥´Â ¾à°£ ºñ½ÁÇÏ°Ô ¸ÂÃß°ÚÁö¸¸ À̰͵µ nn4¿Í ie4¿¡¼­ &nbsp;ÀÇ Å©±â°¡ ´Þ¶ó¼­ ¾î·Æ°í ¼öÁ÷ÀÇ topÀ¸·Î´Â ´õ ¾î·Æ½À´Ï´Ù.
<spacer>, <span style="visibility:hidden">¾Õ ·¹ÀÌ¾î ±ÛÀÚ</span>À» ÁöÁ¤ÇÏ¿©µµ µÎ ºê¶ó¿ìÀú ¼­·Î ´Ù¸£°Ô Ãâ·ÂµË´Ï´Ù.

±×·¡¼­ ÀÌµé ¿©·¯ À̹ÌÁöÈ¿°ú ·¹À̾ ÆäÀÌÁö¿¡ Á¤·Ä½Ã position:relative; ·Î table·Î Á¤¿­ ÇÏ´Â°Ô °¡Àå °£´ÜÇß½À´Ï´Ù. ±×¸®°í ÇÏÀ§ ·¹À̾îµéÀº À̹ÌÁö È¿°ú¸¦ ³»±â À§Çؼ­ position:absolute; ¸¦ ÁöÁ¤ÇÕ´Ï´Ù.

table¿¡ position:absolute; ¸¦ °¡Áö°í ÀÖ´Â position:relative; ÀÎ ·¹À̾ ³ÖÀ» ¶§, »óÀ§·¹À̾îÀÇ widthÀÇ °ª¿¡ µû¶ó¼­ ie4¿¡¼­ table ¼ÓÀÇ ·¹À̾îµéÀÇ ¹èÄ¡°¡ µË´Ï´Ù. ±×·¡¼­ »óÀ§ ·¹À̾îÀÇ width°ªÀ» ½Å°æÀ» ½á¾ßÇÕ´Ï´Ù. Àý´ë ÁÂÇ¥ÀÇ ·¹À̾î´Â tableÀÇ border¸¦ ¹«½ÃÇϰí À§Ä¡ÇÕ´Ï´Ù. ÇÏÀ§·¹À̾ ¸¹´Ù¸é ´õ ½Å°æÀ» ½á¾ßÇÕ´Ï´Ù. ±×¸®°í width·Îµµ nn4¿¡¼­´Â ¹èÄ¡°¡ ¾ÈµË´Ï´Ù. ±×·¡¼­, ie4¿Í nn4¿¡¼­ µÑ ´Ù »ç¿ëÇÒ ¼ö ÀÖ°Ô °¡Â¥ ³»¿ëÀ» °¢ »óÀ§·¹À̾ ³Ö¾îÁÝ´Ï´Ù. ÀÌ °¡Â¥ ³»¿ëÀº ±ÛÀÚ À̹ÌÁö·Î »ç¿ëÇÒ ÇÏÀ§ ·¹À̾îÀÇ Å©±âº¸´Ù Á¶±Ý Å©°ÔÇϸé ie4¿Í nn4ÀÇ À§ÀÇ ¹®Á¦¸¦ ÇØ°áÇÒ ¼ö ÀÖ½À´Ï´Ù. °¡Â¥ ³»¿ëÀÇ Å©±â´Â ÇÏÀ§·¹À̾îÀÇ font-size + °¢ ÇÏÀ§·¹À̾îÀÇ ÁÂÇ¥Â÷ÀÌ·Î Çϸé Àû´çÇÕ´Ï´Ù.

#img7 { position:relative; width:100; }
  #img71 { 
  	position:absolute; left:3; top:3; width:20; 
  	color:silver; font-size:25px; font-weight:bold; 
  }
  #img72 { 
  	position:absolute; left:2; top:2; width:20; 
  	color:gray; font-size:25px; font-weight:bold; 
  }
  #img73 { position:absolute; left:0; top:0; width:20; 
	color:white; font-size:25px; font-weight:bold; 
  }
  #img74 { 
  	position:absolute; left:1; top:1; width:20; 
  	color:aqua; font-size:25px; font-weight:bold; 
  }
.gab {font-size:20pt; color:#f0e0d0;} 

</td><td>
<span id="img7">
<font class="gab"><nobr> ±ÛÀÚ À̹ÌÁö 7 </nobr></font>
	<span id="img71"><nobr>±ÛÀÚ À̹ÌÁö 7</nobr></span>
	<span id="img72"><nobr>±ÛÀÚ À̹ÌÁö 7</nobr></span>
	<span id="img73"><nobr>±ÛÀÚ À̹ÌÁö 7</nobr></span>
	<span id="img74"><nobr>±ÛÀÚ À̹ÌÁö 7</nobr></span>
</span>
</td>
"±ÛÀÚ À̹ÌÁö 7"¿¡ »ç¿ëÇÑ style°ú htmlÀÔ´Ï´Ù.

À§¿¡¼­ ±½Àº ±ÛÀÚ°¡ table¿¡¼­ °ø°£À» È®º¸Çϱâ À§ÇÑ °¡Â¥ ³»¿ëÀÔ´Ï´Ù. color:#f0e0d0;´Â Çʿ䰡 ¾ø´Â ±ÛÀÚÀ̹ǷΠº¸ÀÌÁö ¾Ê°Ô ¹ÙÅÁ»ö°ú °°Àº »öÀ» ÁöÁ¤ÇÕ´Ï´Ù.

°¢ ÇÏÀ§·¹À̾îÀÇ ±ÛÀڵ鿡°Ô <nobr>±ÛÀÚ</nobr>À» ³Ö¾îÁÖ¾ú½À´Ï´Ù. ÇÑ ÁÙ·Î ·¹À̾ ±¸¼ºÇÕ´Ï´Ù. ·¹À̾îÀÇ widthÀÇ °ª¿¡ µû¶ó¼­ °³ÇàÀ» Çϴµ¥ °³ÇàÀ» ÇÏÁö ¸øÇÏ°Ô ÇÕ´Ï´Ù. widthÀÇ °ª¿¡ ½Å°æ¾µ ÇÊ¿ä¾øÀÌ ÇÑ ÁÙ·Î ±¸¼ºÀ» ÇÕ´Ï´Ù. ·¹À̾îÀÇ widthÀÇ °ª¿¡ µû¸¥ ±ÛÀÚÀÇ °³ÇàÀº ¿µ¾î´Â width°ªÀ» ³Ñ´Â ±ÛÀÚ°¡ °ø¹éÀÌ ÀÖÀ¸¸é °³ÇàÀ» Çϰí ÇѱÛÀº width°ªÀ» ³ÑÀ¸¸é °ø¹éÀÌ ÀÖ°Ç ¾ø°Ç ¹«Á¶°Ç °³ÇàÀ» ÇÕ´Ï´Ù.

ÀϹÝÀûÀ¸·Î À̹ÌÁö¸¦ ¸µÅ©·Î ¸¹ÀÌ »ç¿ëÇÕ´Ï´Ù. ±ÛÀÚ À̹ÌÁö·Î ¸¸µç °Íµµ ¸µÅ©·Î »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù. ÇÏÁö¸¸, ±ÛÀÚ À̹ÌÁö¸¦ ¸µÅ©·Î »ç¿ëÇϱâ À§Çؼ­´Â ¸î°¡Áö ÁÖÀǸ¦ ÇØ¾ßÇÕ´Ï´Ù. ¿©·¯ ÃþÀÇ ·¹À̾ ÀÖÀ» ¶§, °¡Àå À§ÀÇ ·¹À̾ ¸¶¿ì½º·Î »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù.

¸µÅ©·Î »ç¿ëÇÒ À̺¥Æ®·Î mousedownÀ» »ç¿ëÇÒ ¼öµµ ÀÖÁö¸¸, °¡Àå °£´ÜÇÑ ¹æ¹ýÀº °¡Àå À§¿¡¿À´Â ·¹À̾îÀÇ ±ÛÀÚ¸¦ ¸µÅ©·Î ¸¸µå´Â°ÍÀÔ´Ï´Ù. ±×³É ¸µÅ©·Î ¸¸µé¸é ±ÛÀÚÀÇ »ö±òÀÌ ¸µÅ© »ö±ò·Î ³ª¿Í¼­ ÆÄ¶õ»öÀÌ µË´Ï´Ù. ±×·¡¼­ ¸µÅ©¿¡ style text-decoration:none;À» ³Ö¾îÁÖ¾î¾ß ÇÕ´Ï´Ù. ±ÛÀÚ À̹ÌÁö¸¦ ¸µÅ©·Î ¸¸µé¾ú½À´Ï´Ù. À̹ÌÁö¸¦ ´©¸£¸é ÆäÀÌÁö ²À´ë±â·Î À̵¿ÇÕ´Ï´Ù.

#linkImage { position:relative; width:100; } #linkImage1 { position:absolute; left:3; top:3; width:20; color:silver; font-size:25px; font-weight:bold; } #linkImage2 { position:absolute; left:2; top:2; width:20; color:gray; font-size:25px; font-weight:bold; } #linkImage3 { position:absolute; left:0; top:0; width:20; color:white; font-size:25px; font-weight:bold; } #linkImage4 { position:absolute; left:1; top:1; width:20; color:aqua; font-size:25px; font-weight:bold; } <center> <table><tr><td> <span id="linkImage"> <span id="linkImage1"><nobr>TOP</nobr></span> <span id="linkImage2"><nobr>TOP</nobr></span> <span id="linkImage3"><nobr>TOP</nobr></span> <span id="linkImage4"> <nobr> <a href="#top" style="color:aqua; font-size:25px; text-decoration:none;">TOP</a> </nobr> </span> </span> </td></tr></table> </center>
TOP TOP TOP TOP