1. CSS¶õ?
(1) CSSÀÇ Æ¯Â¡°ú ±âº» Çü½Ä
¡Ü CSSÀÇ Æ¯Â¡
½ºÅ¸ÀÏ ½ÃÆ®(Style sheet)¶õ ±ÛÀÚÀÇ Å©±â ¹× Á¾·ù, ¹è°æ »ö»ó, Å׵θ® ¸ð¾ç µîÀ» º¸´Ù ´Ù¾çÇÏ°Ô Àå½ÄÇÒ ¼ö ÀÖ´Â ¹æ¹ýÀÔ´Ï´Ù. 1997³â¿¡ Á¦Á¤µÈ HTML 4.0ºÎÅÍ »ç¿ëÇÒ ¼ö Àִµ¥, ½ºÅ¸ÀÏ ½ÃÆ®ÀÇ Á¾·ù´Â CSS(Cascading Stype Sheet)¿Í JSSS(JavaScript Stype Sheet)°¡ ÀÖ½À´Ï´Ù. JSSS´Â ³Ý½ºÄÉÀÌÇÁ¿¡¼¸¸ Áö¿øÇÏÁö¸¸, CSS´Â ³Ý½ºÄÉÀÌÇÁ¿Í ÀÎÅÍ³Ý ÀͽºÇ÷η¯¿¡¼ ÀüºÎ »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù. ¿äÁò¿¡´Â ÀÎÅÍ³Ý ÀͽºÇ÷η¯ »ç¿ëÀÚ°¡ Àý´ë ´Ù¼öÀ̱⠶§¹®¿¡ ½ºÅ¸ÀÏ ½ÃÆ®¶ó°í ¸»Çϸé CSS¸¦ ÀǹÌÇÏ´Â °æÇâÀÌ ÀÖ½À´Ï´Ù. ¿©±â¼´Â CSS¿¡ ´ëÇØ¼¸¸ ¼³¸íÇÕ´Ï´Ù.
CSSÀÇ ±â´ÉÀº ´ÙÀ½°ú °°½À´Ï´Ù.
?±ÛÀÚÀÇ Å©±â¸¦ ´Ù¾çÇÏ°Ô Á¶ÀýÇÒ ¼ö ÀÖ½À´Ï´Ù. ?±ÛÀÚ¿Í ÁÙ °£°ÝÀ» ´Ù¾çÇÏ°Ô ¼³Á¤ÇÒ ¼ö ÀÖ½À´Ï´Ù. ?ƯÁ¤ ±ÛÀÚÀÇ ¹è°æ»öÀ» º°µµ·Î ¼³Á¤ÇÒ ¼ö ÀÖ½À´Ï´Ù. ?À¥ ÆäÀÌÁöÀÇ ³»¿ë°ú ¸ð¾çÀ» ºÐ¸®Çؼ ó¸®ÇÒ ¼ö ÀÖ½À´Ï´Ù. ?¹è°æ»ö°ú ¹è°æ À̹ÌÁö¸¦ ´Ù¾çÇÏ°Ô ¼³Á¤ÇÒ ¼ö ÀÖ½À´Ï´Ù. ?¹®¼ÀÇ ¸ð¾çÀ» º°µµ ÆÄÀÏ·Î °ü¸®ÇÒ ¼ö ÀÖ½À´Ï´Ù. ?Å׵θ® ¼±À» ´Ù¾çÇÏ°Ô ¼³Á¤ÇÒ ¼ö ÀÖ½À´Ï´Ù. |
¾Õ Àå¿¡¼ ¼³¸íÇÑ HTML¸¸ »ç¿ëÇÏ¸é ´Ü¼øÇÑ ÇüÅÂÀÇ ¸ð¾ç¸¸ ÁöÁ¤ÇÒ ¼ö ÀÖÁö¸¸, ½ºÅ¸ÀÏ ½ÃÆ®ÀÇ ´Ù¾çÇÑ ¼Ó¼º°ú °ªÀ» »ç¿ëÇØ¼ ¿©·¯ °¡Áö ÇüÅÂÀÇ ¹®¼¸¦ ²Ù¹Ð ¼ö ÀÖ½À´Ï´Ù. ½ºÅ¸ÀÏ ½ÃÆ®¸¦ »ç¿ëÇÏ¸é ´ÙÀ½°ú °°Àº ÀåÁ¡ÀÌ ÀÖ½À´Ï´Ù.
∙±â´ÉÀ» ½±°Ô È®ÀåÇÒ ¼ö ÀÖ½À´Ï´Ù.
HTMLÀÇ ±âº» ±â´É¿¡ ´Ù¾çÇÑ ¿É¼ÇÀ» ºÎ¿©ÇÒ ¼ö Àֱ⠶§¹®¿¡ ¹®¼ Çü½ÄÀ» dzºÎÇÏ°Ô ¸¸µé ¼ö ÀÖ½À´Ï´Ù. ´Ù¾çÇÑ ¿©¹é ÁöÁ¤, ÁÙ °£°ÝÀÇ Á¶Á¤, ±ÛÀÚ ¸ð¾çÀÇ ´Ù¾çÈ, Å׵θ® ÁöÁ¤ µî°ú °°Àº HTML ű׸¸À¸·Î ó¸®ÇÒ ¼ö ¾ø´Â ±â´ÉÀ» ½ºÅ¸ÀÏ ½ÃÆ®¸¦ »ç¿ëÇØ¼ ±¸ÇöÇÒ ¼ö ÀÖ½À´Ï´Ù.
∙¹®¼ ³»¿ë°ú Çü½ÄÀ» ºÐ¸®ÇÒ ¼ö ÀÖ½À´Ï´Ù.
HTML ÅÂ±×¿Í ¹®¼ ¸ð¾çÀ» ÁöÁ¤ÇÏ´Â ½ºÅ¸ÀÏ ½ÃÆ®¸¦ º°µµÀÇ ¿µ¿ª¿¡ ÄÚµùÇÒ ¼ö Àֱ⠶§¹®¿¡ Ãâ·ÂµÇ´Â ³»¿ë°ú ¹®¼ Çü½ÄÀ» ½±°Ô ºÐ¸®ÇÒ ¼ö ÀÖ½À´Ï´Ù. ¹®¼ ³»¿ë°ú Çü½ÄÀÇ ºÐ¸®´Â ³»¿ëÀÌ º¯°æµÇ´õ¶óµµ ¸ð¾çÀ» ±×´ë·Î À¯ÁöÇÒ ¼ö ÀÖ°í, ¹®¼ ¸ð¾çÀ» º¸´Ù ½±°Ô º¯°æÇÒ ¼ö ÀÖ½À´Ï´Ù.
∙Àϰü¼º ÀÖ´Â ¹®¼¸¦ ÀÛ¼ºÇÒ ¼ö ÀÖ½À´Ï´Ù.
¹®¼ ¸ð¾çÀ» ÁöÁ¤ÇÏ´Â ½ºÅ¸ÀÏ ½ÃÆ®¸¦ HTML°ú º°µµÀÇ ÆÄÀÏ·Î ÀÛ¼ºÇϰí, À̸¦ ´Ù¸¥ HTML ÆÄÀÏ¿¡¼ ºÒ·¯ »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù. ¶ÇÇÑ ½ºÅ¸ÀÏ ½ÃÆ®¸¦ ÇÑ °÷¿¡ ÁýÁß½ÃÄÑ Àû¿ëÇÔÀ¸·Î½á Æí¸®ÇÏ°Ô °ü¸®ÇÒ ¼ö ÀÖ½À´Ï´Ù. ÀÌ·¸°Ô ÇÏ¸é ¿©·¯ °³ÀÇ À¥ ÆäÀÌÁö¸¦ ±¸¼ºÇÒ ¶§ ÀϰüµÈ ¹®¼ ¸ð¾çÀ» »ç¿ëÇÒ ¼ö ÀÖ°Ô µË´Ï´Ù.
∙°£ÆíÇÏ°Ô ¹®¼ ¸ð¾çÀ» ÁöÁ¤ÇÒ ¼ö ÀÖ½À´Ï´Ù.
HTML ű׸¸À» »ç¿ëÇØ¼ ±ÛÀÚ ¸ð¾çÀ» ÁöÁ¤ÇÑ´Ù¸é ¸ðµç ű׸¶´Ù ¼Ó¼º°ªÀ» ¼³Á¤ÇØ¾ß ÇÏÁö¸¸, ½ºÅ¸ÀÏ ½ÃÆ®¸¦ »ç¿ëÇÏ¸é Æ¯Á¤ÇÑ Å±׿¡ ´ëÇÑ ¼Ó¼ºÀ» ÀϰüµÇ°Ô ¼³Á¤ÇÒ ¼ö ÀÖ½À´Ï´Ù. ÅëÀÏµÈ ¼Ó¼ºÀ» Àû¿ëÇØ¼ °£ÆíÇÑ ¹®¼ ÀÛ¼ºÀÌ °¡´ÉÇØÁý´Ï´Ù.
[µÎµå¸®±â] ij½ºÄ³À̵ù(Cascading)À̶õ? ½ºÅ¸ÀÏ ½ÃÆ®¸¦ »ç¿ëÇÒ ¶§ ¹®¼ ½ºÅ¸ÀÏ Á¤º¸¸¦ ´Ù¸¥ ¿©·¯ ÀÚ¿øÀ¸·ÎºÎÅÍ ¹Þ¾Æ¼ »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù. Áï, ´Ù¸¥ ½ºÅ¸ÀÏ Á¤º¸¸¦ ¹Þ¾Æ¼ ¾î¶² ¹®¼¿¡ ¸Â´Â ½ºÅ¸ÀÏ·Î »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù. ¿©·¯ °³ÀÇ ½ºÅ¸ÀÏÀ» ¹Þ¾Æ¿Ã °æ¿ì, ½ºÅ¸ÀÏ ½ÃÆ®µéÀÇ ÀÏ·ÃÀÇ ¼ø¼¸¦ Á¤ÀÇÇÒ Çʿ䰡 Àִµ¥, ³ªÁß¿¡ ÁöÁ¤ÇÑ ½ºÅ¸ÀÏ ½ÃÆ®°¡ ¸ÕÀú ÁöÁ¤ÇÑ °Íº¸´Ù ¿ì¼±ÀûÀ¸·Î Àû¿ëµÇ´Â ±ÔÄ¢À» °®½À´Ï´Ù. ÀÌ·¯ÇÑ ¿ì¼±±Ç ±ÔÄ¢À» ij½ºÄ³À̵ùÀ̶ó°í ÇÕ´Ï´Ù. CSS´Â ÀÌ·¯ÇÑ ±â´ÉÀ» Áö¿øÇÕ´Ï´Ù. |
¡Ü CSSÀÇ ±âº» Çü½Ä
CSS·Î ½ºÅ¸ÀÏ ½ÃÆ®¸¦ ±¸¼ºÇϱâ À§Çؼ´Â ¸ÕÀú ½ºÅ¸ÀÏÀ» Á¤ÀÇÇØ¾ß ÇÕ´Ï´Ù. CSS ÄÚµå´Â ÀÏ¹Ý HTML ÅÂ±×¿Í ±¸º°Çϱâ À§ÇØ º°µµÀÇ ¿µ¿ªÀ» »ç¿ëÇÕ´Ï´Ù. CSSÀÇ ±âº» Çü½ÄÀº ´ÙÀ½°ú °°½À´Ï´Ù.
<STYLE type=¡°text/css"> <!-- ½ºÅ¸ÀÏ ÁöÁ¤ --> </STYLE> |
CSSÀÇ ½ºÅ¸ÀÏÀº <STYLE>°ú </STYLE> ÅÂ±× »çÀÌ¿¡ Á¤ÀÇÇÕ´Ï´Ù. <STYLE> ű×ÀÇ type ¼Ó¼ºÀº »ç¿ëÇÑ ½ºÅ¸ÀÏ ½ÃÆ®ÀÇ ±Ô°ÝÀ» ÁöÁ¤ÇÕ´Ï´Ù. ¸¸¾à CSS¸¦ »ç¿ëÇÑ´Ù¸é ¡°text/css¡±·Î ¼³Á¤ÇØ¾ß ÇÕ´Ï´Ù. ½ºÅ¸ÀÏ ÁöÁ¤Àº ¼±ÅÃÀÚ¿Í ¼±¾ð ºÎºÐÀ¸·Î ±¸¼ºµË´Ï´Ù.
[µÎµå¸®±â] ½ºÅ¸ÀÏÀ» ÁöÁ¤ÇÒ ¶§ ÁÖ¼®¹®(<!-- ~ -->)À¸·Î ó¸®ÇÑ ÀÌÀ¯´Â ½ºÅ¸ÀÏ ½ÃÆ®¸¦ ÀÌÇØÇÏÁö ¸øÇÏ´Â ºê¶ó¿ìÀú¿¡¼ ½ºÅ¸ÀÏ ½ÃÆ®¸¦ ¹«½ÃÇϵµ·Ï ÇÏ´Â ¹è·Á ¶§¹®ÀÔ´Ï´Ù. |
[µÎµå¸®±â] ½ºÅ¸ÀÏ ½ÃÆ®ÀÇ Å¸ÀÔ ¼±¾ð <STYLE> ű×ÀÇ type ¼Ó¼º°ªÀº CSS¿Í JSSS°¡ ¼·Î ´Ù¸¨´Ï´Ù. ?CSS : ¡°text/css¡± ?JSSS : ¡°text/JavaScript¡± |
∙¼±ÅÃÀÚ(Selector)
HTML ¹®¼ÀÇ ½ºÅ¸ÀÏÀ» Á¤ÀÇÇÒ ´ë»óÀ¸·Î ÅÂ±× ¶Ç´Â Ŭ·¡½º À̸§À» »ç¿ëÇÕ´Ï´Ù. µÎ °³ ÀÌ»óÀÇ ¼±ÅÃÀÚ¸¦ ÇѲ¨¹ø¿¡ ÁöÁ¤ÇÒ ¼ö ÀÖ°í, ű׸¦ ¼±ÅÃÀÚ·Î »ç¿ëÇϸé HTML ¹®¼¿¡¼ »ç¿ëµÈ ÇØ´ç ű׿¡ ¸ðµÎ µ¿ÀÏÇÑ ½ºÅ¸ÀÏÀÌ Àû¿ëµË´Ï´Ù.
∙¼±¾ð(Declaration)
½ºÅ¸ÀÏÀÇ ³»¿ëÀ» ÁöÁ¤ÇÏ´Â ºÎºÐÀ¸·Î. ¼±ÅÃÀÚ¿¡ ÁöÁ¤ÇÑ ½ºÅ¸ÀÏÀ» ÀǹÌÇÕ´Ï´Ù. ¼±¾ð ºÎºÐÀº ¼Ó¼º(Property)°ú ¼Ó¼º°ª(Value)À¸·Î ÀÌ·ç¾îÁý´Ï´Ù. ¼±¾ð ºÎºÐÀº Áß°ýÈ£({ })·Î Ç¥½ÃÇØ¾ß Çϰí, Áß°ýÈ£ ¾È¿¡ »ç¿ëÇÏ´Â ¼Ó¼º°ú ¼Ó¼º°ªÀº ÄÝ·Ð(:)À¸·Î ±¸ºÐÇÕ´Ï´Ù. ¸¸¾à ¿©·¯ °³ÀÇ ¼Ó¼ºÀ» »ç¿ëÇÑ´Ù¸é ¼¼¹ÌÄÝ·Ð(;)À¸·Î ±¸ºÐÇØ¾ß ÇÕ´Ï´Ù.
¿¹) P {font-size: 9pt; color:purple}
P´Â ¼±ÅÃÀÚ·Î <P> ű׸¦ ¶æÇÕ´Ï´Ù. HTML ¹®¼¿¡ »ç¿ëµÈ ¸ðµç <P> ű׿¡ ´ëÇØ ±ÛÀÚ Å©±â´Â 9pt, »ö±òÀº purplr·Î ¼³Á¤ÇÕ´Ï´Ù.
½ºÅ¸ÀÏ ½ÃÆ®¸¦ »ç¿ëÇÏ´Â ´Ù¾çÇÑ ¹æ¹ýÀÌ ÀÖÁö¸¸, <HEAD> ű׿¡¼ ½ºÅ¸ÀÏ ½ÃÆ®¸¦ Á¤ÀÇÇÏ´Â °ÍÀÌ °¡Àå °£´ÜÇÑ ¹æ¹ýÀÔ´Ï´Ù.
[ù°ÉÀ½] <P> ű׿¡ ½ºÅ¸ÀÏÀ» Àû¿ëÇÑ °£´ÜÇÑ ¿¹Á¦ÀÔ´Ï´Ù.
<HTML> <HEAD> <TITLE>°£´ÜÇÑ CSS</TITLE>
<STYLE type="text/css"> <!-- P {font-size:15pt; color:purple} --> </STYLE>
</HEAD> <BODY> <P align="center"> <P> ű׿¡ ½ºÅ¸ÀÏÀ» Àû¿ëÇÕ´Ï´Ù.<BR> <P> ű׸¦ »ç¿ëÇÏ¸é ±ÛÀÚ Å©±â°¡ 15pt, <BR> ±ÛÀÚ »ö»óÀº purplr·Î ÁöÁ¤µË´Ï´Ù.</P> </BODY> </HTML> |
(2) ½ºÅ¸ÀÏ ½ÃÆ® ¼±¾ð ¹æ¹ý
HTML ¹®¼¿¡¼ ½ºÅ¸ÀÏ ½ÃÆ®¸¦ »ç¿ëÇϱâ À§Çؼ´Â ¹Ì¸® ½ºÅ¸ÀÏÀÌ Á¤ÀǵǾî ÀÖ¾î¾ß ÇÕ´Ï´Ù. HTML ¹®¼¿¡¼ Á÷Á¢ ½ºÅ¸ÀÏ ½ÃÆ®¸¦ Á¤ÀÇÇÏ´Â ¹æ¹ý°ú ½ºÅ¸ÀÏ ½ÃÆ®°¡ Á¤ÀÇµÈ ¿ÜºÎ ÆÄÀÏÀ» ºÒ·¯¿Í¼ ó¸®ÇÏ´Â ¹æ¹ýÀÌ ÀÖ½À´Ï´Ù. ½ºÅ¸ÀÏ ½ÃÆ®¸¦ HTML ¹®¼ ¾È¿¡¼ Á¤ÀÇÇÏ´Â °ÍÀº <HEAD>¿Í </HEAD> ÅÂ±× »çÀÌ¿¡ ¼±¾ðÇÏ´Â ¹æ¹ý°ú ű׿¡ Á÷Á¢ ½ºÅ¸ÀÏ ½ÃÆ®¸¦ »ç¿ëÇÏ´Â ¼±¾ðÇÏ´Â ¹æ¹ýÀÌ ÀÖ½À´Ï´Ù. ±×¸®°í ¿ÜºÎ ÆÄÀÏÀ» ºÒ·¯¿À´Â °Íµµ <LINK> ű׸¦ »ç¿ëÇÏ´Â ¹æ¹ý°ú @import ¸í·ÉÀ» »ç¿ëÇÏ´Â ¹æ¹ýÀÌ ÀÖ½À´Ï´Ù. °á±¹ ½ºÅ¸ÀÏ ½ÃÆ®¸¦ ¼±¾ðÇÏ´Â ¹æ¹ýÀº 4°¡Áö°¡ ÀÖ½À´Ï´Ù.
∙<HEAD>¿Í </HEAD> ÅÂ±× »çÀÌ¿¡ ¼±¾ðÇÏ´Â ³»ºÎ ½ºÅ¸ÀÏ ½ÃÆ® ¹æ¹ý
∙¿ÜºÎ ÆÄÀÏ·Î Á¤ÀÇµÈ ½ºÅ¸ÀÏ ½ÃÆ®¸¦ ºÒ·¯¿À´Â ¹æ¹ý - <LINK> ÅÂ±× »ç¿ë
∙¿ÜºÎ ÆÄÀÏ·Î Á¤ÀÇµÈ ½ºÅ¸ÀÏ ½ÃÆ®¸¦ ºÒ·¯¿À´Â ¹æ¹ý - @import »ç¿ë
∙HTML ű׿¡ ½ºÅ¸ÀÏ ½ÃÆ®¸¦ Á÷Á¢ »ç¿ëÇÏ´Â ÀζóÀÎ ½ºÅ¸ÀÏ ¹æ¹ý
¸¸¾à ¿©·¯ °¡Áö ½ºÅ¸ÀÏ ½ÃÆ® ¼±¾ð ¹æ¹ýÀ» »ç¿ëÇÑ´Ù¸é Áߺ¹µÇ´Â ½ºÅ¸ÀÏ¿¡ ´ëÇØ ¿ì¼±¼øÀ§°¡ ÀÖ¾î¾ß ÇÕ´Ï´Ù. ±âº»ÀûÀ¸·Î °¡Àå ³ªÁß¿¡ ºÒ·¯µéÀÎ ¿ì¼±¼øÀ§°¡ Àû¿ëµË´Ï´Ù.
¡Ü ³»ºÎ ½ºÅ¸ÀÏ ½ÃÆ®(Embedded Style Sheet) ¹æ¹ý
°¡Àå »ç¿ëÇÏ´Â ¼±¾ð ¹æ¹ýÀÔ´Ï´Ù. HTML ¹®¼ÀÇ <HEAD>¿Í </HEAD> ÅÂ±× »çÀÌ¿¡ <STYLE> ű׸¦ »ç¿ëÇØ ½ºÅ¸ÀÏ ½ÃÆ®¸¦ ¼±¾ðÇÕ´Ï´Ù. À̶ó´Â ű׸¦ ¼±¾ðÇÏ¿© ÁöÁ¤ÇÏ´Â ¹æ¹ýÀÌ´Ù. <STYLE> ű׿¡¼ ÁöÁ¤ÇÑ ½ºÅ¸ÀÏÀº À¥ ÆäÀÌÁö Àüü¿¡ Àû¿ëµË´Ï´Ù.
<HEAD> <STYLE type="text/css"> <!-- ¼±ÅÃÀÚ1 {¼Ó¼º:¼Ó¼º°ª} ¼±ÅÃÀÚ2 {¼Ó¼º:¼Ó¼º°ª} ¼±ÅÃÀÚ3 {¼Ó¼º:¼Ó¼º°ª} --> </STYLE> </HEAD> |
[ù°ÉÀ½] ³»ºÎ ½ºÅ¸ÀÏ ½ÃÆ®¸¦ »ç¿ëÇÏ´Â ¿¹Á¦ÀÔ´Ï´Ù.
<HTML> <HEAD> <TITLE>³»ºÎ ½ºÅ¸ÀÏ ½ÃÆ®ÀÇ »ç¿ë</TITLE>
<STYLE type="text/css"> <!-- H1 {font-family:ÈÞ¸Õ¿¾Ã¼; color:red} H2 {font-style:italic; background-color:blue; color:white} --> </STYLE>
</HEAD> <BODY> <H1>³»ºÎ ½ºÅ¸ÀÏ ½ÃÆ®¸¦ ¼±¾ðÇÏ´Â ¹æ¹ýÀÔ´Ï´Ù.</H1> <H2>ÁöÁ¤µÈ ű׿¡ µ¿ÀÏÇÑ ½ºÅ¸ÀÏÀÌ Àû¿ëµË´Ï´Ù.</H2> </BODY> </HTML> |
¡Ü ¿ÜºÎ ½ºÅ¸ÀÏ ½ÃÆ®(Linked Style Sheet) ¹æ¹ý - <LINK> ÅÂ±× »ç¿ë
¿ÜºÎ ½ºÅ¸ÀÏ ½ÃÆ® ¹æ¹ýÀº ½ºÅ¸ÀÏ ½ÃÆ® ¹®¼¸¦ º°µµÀÇ ÆÄÀÏ·Î ÀúÀåÇϰí, HTML ¹®¼¿¡¼ ÀÌ ÆÄÀÏÀ» ºÒ·¯¿Í¼ ½ºÅ¸ÀÏÀ» Àû¿ëÇÕ´Ï´Ù. ¿ÜºÎ ÆÄÀÏÀ» ºÒ·¯¿À´Â ¹æ¹ýÀº @import ¸í·É°ú <LINK> ű׸¦ »ç¿ëÇÏ´Â ¹æ¹ýÀÌ ÀÖ½À´Ï´Ù. ÀÌó·³ ½ºÅ¸ÀÏ ½ÃÆ® ¹®¼¸¦ º°µµÀÇ ÆÄÀÏ·Î ÀÛ¼ºÇÏ¸é ¼·Î ´Ù¸¥ ¿©·¯ °³ÀÇ HTML ¹®¼¿¡ °°Àº Çü½ÄÀÇ ½ºÅ¸ÀÏ ½ÃÆ®¸¦ Àû¿ëÇϰųª, ¿©·¯ °³ÀÇ ½ºÅ¸ÀÏ ½ÃÆ®¸¦ ÇÑ °³ÀÇ HTML ¹®¼¿¡ Àû¿ëÇÒ ¼ö ÀÖ´Â ÀåÁ¡ÀÌ ÀÖ½À´Ï´Ù.
<LINK> ű׷Π½ºÅ¸ÀÏ ½ÃÆ® ¹®¼ ÆÄÀÏÀ» ºÒ·¯¿À·Á¸é ´ÙÀ½°ú °°Àº Çü½ÄÀ¸·Î »ç¿ëÇÕ´Ï´Ù.
<HEAD> <LINK rel = ¡°stylesheet¡± type=¡°text/css¡± href = ¡°ÆÄÀÏ À̸§¡±> </HEAD> |
∙rel ¼Ó¼º : relationÀÇ ¾àÀÚ·Î ¸µÅ©°¡ ¼³Á¤µÈ ¹®¼¿Í ÇöÀç ¹®¼¿ÍÀÇ °ü°è¸¦ ÁöÁ¤ÇØÁÖ´Â ¼Ó¼ºÀÔ´Ï´Ù.
∙type ¼Ó¼º : ½ºÅ¸ÀÏ ½ÃÆ®·Î »ç¿ëÇÑ ±Ô°ÝÀ» ÁöÁ¤ÇÕ´Ï´Ù.
∙href ¼Ó¼º : ½ºÅ¸ÀÏ ½ÃÆ® ¹®¼ ÆÄÀÏ À̸§À» ÁöÁ¤ÇÕ´Ï´Ù.
<LINK> ű׿¡¼ ¿ÜºÎ ½ºÅ¸ÀÏ ½ÃÆ® ¹®¼ ÆÄÀÏÀ» ºÒ·¯¿À±â À§ÇØ rel, type ¼Ó¼ºÀº ¾ðÁ¦³ª µ¿ÀÏÇÑ °ªÀ» ÁöÁ¤ÇÏ¸é µÇ°í, href ¼Ó¼º¸¸ »ç¿ëÇÒ ÆÄÀÏ À̸§À» ÁöÁ¤ÇÏ¸é µË´Ï´Ù. ÀϹÝÀûÀ¸·Î ½ºÅ¸ÀÏ ½ÃÆ® ¹®¼ ÆÄÀÏÀº È®ÀåÀÚ·Î css¸¦ »ç¿ëÇÕ´Ï´Ù.
[ù°ÉÀ½] <LINL> ű׷Π¿ÜºÎ ½ºÅ¸ÀÏ ½ÃÆ® ¹®¼ ÆÄÀÏÀ» ºÒ·¯¿À´Â ¿¹Á¦ÀÔ´Ï´Ù.
H1 {font-family:ÈÞ¸Õ¿¾Ã¼; color:red} H2 {font-style:italic; background-color:blue; color:white} |
<HTML> <HEAD> <TITLE>³»ºÎ ½ºÅ¸ÀÏ ½ÃÆ®ÀÇ »ç¿ë</TITLE>
<LINK rel="stylesheet" type="text/css" href="sheet1.css">
</HEAD> <BODY> <H1><LINK> ű׷Π¿ÜºÎ ½ºÅ¸ÀÏ ½ÃÆ®¸¦ ºÒ·¯¿À´Â ¹æ¹ýÀÔ´Ï´Ù.</H1> <H2>ÁöÁ¤µÈ ű׿¡ ½ºÅ¸ÀÏÀÌ Àû¿ëµË´Ï´Ù.</H2> </BODY> </HTML> |
¡Ü ¿ÜºÎ ½ºÅ¸ÀÏ ½ÃÆ®(Linked Style Sheet) ¹æ¹ý - @import ¸í·É »ç¿ë
<LINK> ű״ <HEAD>¿Í </HEAD> ÅÂ±× »çÀÌ¿¡ »ç¿ëÇÏ¸é µÇÁö¸¸, @import ¸í·É¾î´Â <STYLE>°ú </STYLE> ÅÂ±× »çÀÌ¿¡ »ç¿ëÇØ¾ß ÇÕ´Ï´Ù. ¸¸¾à <STYLE> ű׿¡¼ ´Ù¸¥ ¼±¾ð°ú ÇÔ²² »ç¿ëÇÑ´Ù¸é °¡Àå ¾Õ¿¡¼ »ç¿ëÇØ¾ß ÇÕ´Ï´Ù. @import ¸í·ÉÀÇ »ç¿ë Çü½ÄÀº ´ÙÀ½°ú °°½À´Ï´Ù.
<STYLE type="text/css"> <!-- @import url("ÆÄÀÏ À̸§¡±); --> </STYLE> |
[ù°ÉÀ½] @import ¸í·ÉÀ¸·Î ¿ÜºÎ ½ºÅ¸ÀÏ ½ÃÆ® ¹®¼ ÆÄÀÏÀ» ºÒ·¯¿À´Â ¿¹Á¦ÀÔ´Ï´Ù.
<HTML> <HEAD> <TITLE>¿ÜºÎ ½ºÅ¸ÀÏ ½ÃÆ®ÀÇ »ç¿ë</TITLE>
<STYLE type="text/css"> <!-- @import url("sheet1.css"); --> </STYLE>
</HEAD> <BODY> <H1>@import ¸í·ÉÀ¸·Î ¿ÜºÎ ½ºÅ¸ÀÏ ½ÃÆ®¸¦ ºÒ·¯¿À´Â ¹æ¹ýÀÔ´Ï´Ù.</H1> <H2>ÁöÁ¤µÈ ű׿¡ ½ºÅ¸ÀÏÀÌ Àû¿ëµË´Ï´Ù.</H2> </BODY> </HTML> |
¡Ü ű׿¡ Á÷Á¢ ½ºÅ¸ÀÏ ½ÃÆ®¸¦ Àû¿ë(Inline Style Sheet)ÇÏ´Â ¹æ¹ý
ÀζóÀÎ ½ºÅ¸ÀÏ ½ÃÆ®´Â ³»ºÎ ½ºÅ¸ÀÏ ½ÃÆ®³ª ¿ÜºÎ ½ºÅ¸ÀÏ ½ÃÆ® ¼±¾ð ¹æ¹ý°ú´Â ´Þ¸® HTML ű׿¡ styleÀ̶ó´Â ¼Ó¼ºÀ» ÁöÁ¤ÇÏ¿© ÇØ´ç ű׸¸ Àû¿ëµÇ´Â ¹üÀ§¿¡¼¸¸ ½ºÅ¸ÀÏÀ» Àû¿ëÇÏ´Â ¹æ¹ýÀÔ´Ï´Ù. <HEAD>À̳ª <TITLE> ÅÂ±×¿Í °°ÀÌ Çì´õ ºÎºÐÀÌ ¾Æ´Ñ º»¹®¿¡ Ãâ·ÂµÇ´Â ¸ðµç ű׿¡¼ »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù. ÀζóÀÎ ½ºÅ¸ÀÏ ½ÃÆ®¸¦ »ç¿ëÇϸé style ¼Ó¼ºÀÌ »ç¿ëµÈ ű׿¡¼¸¸ Àû¿ëµÇ±â ¶§¹®¿¡ ºÎºÐÀûÀÎ ½ºÅ¸ÀÏ ÁöÁ¤¿¡ »ç¿ëÇÏ¸é Æí¸®ÇÕ´Ï´Ù. ´Ù¸¸ ÀζóÀÎ ½ºÅ¸ÀÏÀ» ¸¹ÀÌ »ç¿ëÇϸé HTML ¹®¼°¡ Ä¿Áö±â ¶§¹®¿¡ Ưº°ÇÑ °æ¿ì À̿ܿ¡´Â »ç¿ëÇÏÁö ¾Ê´Â °ÍÀÌ ÁÁ½À´Ï´Ù.
<ÅÂ±× style=¡°¼Ó¼º:¼Ó¼º°ª¡±> |
[ù°ÉÀ½] ³»ºÎ ½ºÅ¸ÀÏ ½ÃÆ®¸¦ »ç¿ëÇÏ´Â ¿¹Á¦ÀÔ´Ï´Ù.
<HTML> <HEAD> <TITLE>ÀζóÀÎ ½ºÅ¸ÀÏ ½ÃÆ®ÀÇ »ç¿ë</TITLE> </HEAD> <BODY> <H1 style="font-family:ÈÞ¸Õ¿¾Ã¼; color:red"> ÀζóÀÎ ½ºÅ¸ÀÏ ½ÃÆ®¸¦ »ç¿ëÇÏ´Â ¹æ¹ýÀÔ´Ï´Ù.</H1> <H2 style="font-style:italic; background-color:blue; color:white"> style ¼Ó¼ºÀÌ »ç¿ëµÈ ű׿¡¸¸ ½ºÅ¸ÀÏÀÌ Àû¿ëµË´Ï´Ù.</H2> </BODY> </HTML> |