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> ű׿¡ ½ºÅ¸ÀÏÀ» Àû¿ëÇÑ °£´ÜÇÑ ¿¹Á¦ÀÔ´Ï´Ù.

css1.html

<HTML>

<HEAD>

<TITLE>°£´ÜÇÑ CSS</TITLE>

<STYLE type="text/css">

<!--

P {font-size:15pt; color:purple}

-->

</STYLE>

</HEAD>

<BODY>

<P align="center">

&lt;P&gt; ű׿¡ ½ºÅ¸ÀÏÀ» Àû¿ëÇÕ´Ï´Ù.<BR>

&lt;P&gt; ű׸¦ »ç¿ëÇÏ¸é ±ÛÀÚ Å©±â°¡ 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>


[ù°ÉÀ½] ³»ºÎ ½ºÅ¸ÀÏ ½ÃÆ®¸¦ »ç¿ëÇÏ´Â ¿¹Á¦ÀÔ´Ï´Ù.

css2.html

<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> ű׷Π¿ÜºÎ ½ºÅ¸ÀÏ ½ÃÆ® ¹®¼­ ÆÄÀÏÀ» ºÒ·¯¿À´Â ¿¹Á¦ÀÔ´Ï´Ù.

sheet1.css

H1 {font-family:ÈÞ¸Õ¿¾Ã¼; color:red}

H2 {font-style:italic; background-color:blue; color:white}

css3.html

<HTML>

<HEAD>

<TITLE>³»ºÎ ½ºÅ¸ÀÏ ½ÃÆ®ÀÇ »ç¿ë</TITLE>

<LINK rel="stylesheet" type="text/css" href="sheet1.css">

</HEAD>

<BODY>

<H1>&lt;LINK&gt; ű׷Π¿ÜºÎ ½ºÅ¸ÀÏ ½ÃÆ®¸¦ ºÒ·¯¿À´Â ¹æ¹ýÀÔ´Ï´Ù.</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 ¸í·ÉÀ¸·Î ¿ÜºÎ ½ºÅ¸ÀÏ ½ÃÆ® ¹®¼­ ÆÄÀÏÀ» ºÒ·¯¿À´Â ¿¹Á¦ÀÔ´Ï´Ù.

css4.html

<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=¡°¼Ó¼º:¼Ó¼º°ª¡±>


[ù°ÉÀ½] ³»ºÎ ½ºÅ¸ÀÏ ½ÃÆ®¸¦ »ç¿ëÇÏ´Â ¿¹Á¦ÀÔ´Ï´Ù.

css5.html

<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>