W3C14 ½ºÅ¸ÀϽ¬Æ®(style sheet)Trio ȨÆäÀÌÁö
¸ñÂ÷
  1. ½ºÅ¸ÀϽ¬Æ®ÀÇ ¼Ò°³
  2. HTML¿¡ ½ºÅ¸ÀÏ Ãß°¡
    1. µðÆúÆ® ½ºÅ¸ÀϽ¬Æ® ¾ð¾î ¼³Á¤
    2. ÀζóÀÎ(inline) ½ºÅ¸ÀÏ Á¤º¸
    3. Çì´õ(header) ½ºÅ¸ÀÏ Á¤º¸: STYLE ¿¤·¹¸àÆ®
    4. ¸Þµð¾Æ ŸÀÔ(media type)
  3. ¿ÜºÎ(external) ½ºÅ¸ÀϽ¬Æ®
    1. ¼±È£(preferred)¿Í ´ëü(alternate) ½ºÅ¸ÀϽ¬Æ®
    2. ¿ÜºÎ ½ºÅ¸ÀϽ¬Æ®ÀÇ ÁöÁ¤
  4. ½ºÅ¸ÀϽ¬Æ® Ä«½ºÄÉÀ̵ù(cascading)
    1. ¸Þµð¾Æ¿¡ µû¸¥(media-dependent) Ä«½ºÄÉÀ̵å
    2. Àü´Þ(inheritance)°ú Ä«½ºÄÉÀ̵ù
  5. »ç¿ëµµ±¸·Î ºÎÅÍ ½ºÅ¸ÀÏ µ¥ÀÌÅÍ °¨Ãß±â
  6. ½ºÅ¸ÀϽ¬Æ®ÀÇ HTTP Çì´õ(header)¿Í ¿¬°á

14.1 ½ºÅ¸ÀϽ¬Æ®(style sheet)ÀÇ ¼Ò°³

½ºÅ¸ÀϽ¬Æ®´Â À¥ ¼³°èÀÚ¿¡°Ô Áß¿ä ÀüȯÁ¡À» ÁÖ¾î, ÆäÀÌÁöÀÇ ¿Ü¾çÀ» Çâ»óÇÏ´Â È®Àå ´É·ÂÀ» ÁÖ¾ú´Ù. À¥ÀÌ ½ÃÀ۵Ǵø °úÇÐÀû ȯ°æ¿¡¼­´Â, »ç¶÷µéÀº ¹®¼­ÀÇ Ç¥Çöº¸´Ù ±× ³»¿ë¿¡ ÁßÁ¡À» µÎ¾ú¾ú´Ù. À¥ÀÌ ¹ß´Þ ÇÔ¿¡ µû¶ó ³ÐÀº È°µ¿ ¹üÀ§ÀÇ »ç¶÷µé¿¡°Ô, HTMLÀÇ Á¦ÇѵéÀÌ °ï¶õÀÇ ¿øÀÎÀÌ µÇ¾ú°í, Á¦ÀÛÀÚµéÀº HTMLÀÇ ½ºÅ¸ÀÏÀ» Áִµ¥ Á¦ÇÑÀ» ±Øº¹ÇÏ·Á°í ³ë·ÂÇß´Ù. À¥ ÆäÀÌÁöÀÇ Ç¥ÇöÀ» °³¼±ÇÑ´Ù´Â ½ÃµµµéÀº ÁÁ¾ÒÀ¸³ª, ±×·¸°Ô ÇÏ´Â ±â¼úµéÀº ¿¹±âÄ¡ ¾ÊÀº ³ª»Û °á°ú¸¦ µ¿¹ÝÇß´Ù. ÀÌµé ±â¼úÀº ¸ðµç »ç¶÷µéÀÌ Ç×»ó »ç¿ë ÇÒ ¼ö ¾ø¾úÀ¸¸ç, ÀϺΠ»ç¶÷µéÀÌ ¾î¶² ¶§ »ç¿ëÇϱâ À§ÇÑ °ÍµéÀ̾ú´Âµ¥, ¿©±â¿¡´Â ¾Æ·¡ »çÇ×µéÀÌ Æ÷ÇԵǾî ÀÖ¾ú´Ù.

ÀÌµé ±â¼úµéÀº À¥ ÆäÀÌÁöµîÀÇ º¹À⼺À» Å©°Ô Áõ°¡½ÃÅ°°í, ź·Â¼ºÀ» Á¦ÇÑÇÏ°í, »óÈ£ °øÅëÀûÀ¸·Î »ç¿ëµÇ´Â ´É·ÂÀ» ¼Õ»ó½ÃÄ×°í, Àå¾ÖÀÚ¿¡°Ô ¾î·Á¿òÀ» ÁÖ¾ú´Ù.

½ºÅ¸ÀϽ¬Æ®(style sheet)´Â ÀÌµé ¹®Á¦Á¡À» ÇØ°áÇÏ°í µ¿½Ã¿¡ HTMLÀÇ Á¦ÇÑ µÈ Ç¥Çö ±â´ÉÀ» Çâ»ó ½ÃÄ×´Ù. ½ºÅ¸ÀϽ¬Æ®Àº ÅؽºÆ® ¶óÀÎ »çÀÌÀÇ °ø°£ Å©±â, µé¿© ¾²±â Á¤µµ, ÅؽºÆ®³ª ¹è°æÀÇ »ö»ó, ÆùÆ® Å©±â¿Í ½ºÅ¸ÀÏ°ú ±âŸ ´Ù¸¥ ¼¼ºÎ»çÇ×µé ½±°Ô ÁöÁ¤ÇÏ°ÔÇÏ¿´´Ù.

¿¹¸¦ µé¾î, ´ÙÀ½ "special.css"¶ó´Â È­ÀÏ·Î ÀúÀå µÈ ÂªÀº CSS ½ºÅ¸ÀϽ¬Æ®´Â, ¹®´ÜÀÇ ±ÛÀÚ »ö»óÀ» ÃÊ·ÏÀ¸·Î, Å׵θ®¸¦ ºÓÀº ±½Àº ¼±À¸·Î ÁöÁ¤ÇÑ´Ù.

P.special {
 color: green;
 border: solid red;
}

Á¦ÀÛÀÚ´Â ÀÌ ½ºÅ¸ÀϽ¬Æ®¸¦ LINK ¿¤·¹¸àÆ®·Î HTML ¹®¼­ÀÇ ÀÚ¿ø¿¡ ¿¬°á ½Ãų ¼ö ÀÖ´Ù.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
 <HEAD>
   <LINK href="special.css" rel="stylesheet" type="text/css">
 </HEAD>
 <BODY>
   <P class="special">ÀÌ ¹®´ÜÀº ÃÊ·Ï ÅؽºÆ®À» °®´Â´Ù.
 </BODY>
</HTML>

HTML 4´Â ´ÙÀ½ ½ºÅ¸ÀϽ¬Æ® ±â´ÉÀ» Á¦°øÇÑ´Ù.

½ºÅ¸ÀÏ Á¤º¸ÀÇ À¶Å뼺 ÀÖ´Â À§Ä¡
½ºÅ¸ÀϽ¬Æ®¸¦ º°µµÀÇ È­ÀÏ ¾È¿¡ ¸¸µé¸é ´Ù½Ã »ç¿ëÇϱ⿡ ¿ëÀÌÇÏ´Ù. ¶§·Î´Â Ç¥Çö Áö½Ã¸¦ ±×°ÍÀÌ Àû¿ëµÇ´Â ¹®¼­ ¾È¿¡ Æ÷ÇÔ(¹®¼­ ½ÃÀÛ ºÎºÐ¿¡ ±¸·ìÁö¾î¼­ ȤÀº ¹®¼­ÀÇ º»Ã¼(body) ¾îµð¼­³ª ¿¤·¹¸àÆ®ÀÇ ¾ÖÆ®¸®ºäÆ®¿¡) ½ÃÅ°´Â °ÍÀÌ ÁÁ´Ù. Àüü ¹®¼­µé¿¡ °øÅëÀûÀ¸·Î »ç¿ëµÇ´Â ½ºÅ¸ÀϽ¬Æ®¸¦ ½±°Ô ´Ù·ç±â À§ÇÏ¿©, ÀÌ ±Ô°ÝÀº ¹®¼­¿¡ Àû¿ë µÉ ½ºÅ¸ÀϽ¬Æ®¸¦ ¼³Á¤Çϱâ À§ÇÑ HTTP Çì´õ¸¦ »ç¿ëÇÏ´Â ¹æ¹ýÀ» ¼³¸íÇÑ´Ù.
ƯÁ¤ ½ºÅ¸ÀϽ¬Æ® ¾ð¾î¿¡ ¿µÇâÀ» ¹ÞÁö ¾ÊÀ½
ÀÌ ±Ô°ÝÀº HTMLÀÌ ¾î´À ƯÁ¤ ½ºÅ¸ÀϽ¬Æ® ¾ð¾î¿¡ Á¦ÇѵÇÁö ¾Ê´Â´Ù. ÀÌ´Â ¿©·¯ ¾ð¾îµé¿¡¼­ »ç¿ë µÉ ¼ö ÀÖ´Ù. ¿¹¸¦ µé¾î ´ëºÎºÐÀÇ »ç¿ëÀÚ°¡ »ç¿ëÇÏ´Â °£´ÜÇÑ °Í°ú ÀϺΠ¼Ò¼ö »ç¿ëÀÚ°¡ ƯÈ÷ Àü¹®È­ µÈ ¿ëµµ·Î »ç¿ëÇÏ´Â ¾ÆÁÖ º¹Àâ ÇÑ °Í¿¡ »ç¿ë µÉ ¼ö ÀÖ´Ù. ¾Æ·¡ ¿¹Á¦¿¡ ¸ðµç »ç¿ë CSS ¾ð¾î(Cascading Style Sheet: ¹ø¿ª¹® CSS1,CSS2)°¡ Æ÷ÇԵǾî ÀÖÀ¸³ª, ´Ù¸¥ ½ºÅ¸ÀϽ¬Æ® ¾ð¾îµéµµ »ç¿ë µÉ ¼ö ÀÖ´Ù.
Ä«½ºÄÉÀ̵ù(cascading)
ÀÌ°ÍÀº CSS¿Í °°Àº ÀϺΠ½ºÅ¸ÀϽ¬Æ® ¾ð¾îµé¿¡ ÀÇÇØ Á¦°øµÇ´Â ½ºÅ¸ÀÏ Á¤º¸¸¦ ¿©·¯ ÀÚ¿øÀ¸·Î ºÎÅÍ ¹Þ¾Æ ¼¯´Â °ÍÀ» Çã¿ëÇÑ´Ù. ¿¹¸¦ µé¾î ȸ»çÀÇ ½ºÅ¸ÀÏ ±âÁØ°ú °°Àº, À̵éÀº ¹®¼­µéÀÇ ±¸·ì¿¡ °øÅëÀûÀÎ ½ºÅ¸Àϵé°ú ¾î¶² ´ÜÀÏ ¹®¼­¿¡ ¸Â´Â ½ºÅ¸ÀϵéÀÌ µÉ ¼ö ÀÖ´Ù. À̵éÀ» º°µµ·Î ÀúÀåÇÔÀ¸·Î¼­, ½ºÅ¸ÀϽ¬Æ®´Â ´Ù½Ã »ç¿ë µÉ ¼ö ÀÖ¾î, °£´ÜÇÏ°Ô Á¦ÀÛÇÏ°í ³×Æ®¿ö±×(network)¿¡¼­ ´õ È¿°úÀûÀ¸·Î »ç¿ë ÇÒ ¼ö ÀÖ°Ô ÇÑ´Ù. Ä«½ºÄÉÀ̵å(cascade)´Â ½ºÅ¸ÀϽ¬Æ®µéÀÇ ÀÏ·ÃÀÇ ¼ø¼­¸¦ Á¤ÀÇÇϴµ¥, µÚÀÇ ½¬Æ®¿¡¼­ ÁöÁ¤ ÇÑ °Í ÀÌ ¸ÕÀú ÁöÁ¤ ÇÑ °Íº¸´Ù ¿ì¼±ÀûÀ¸·Î Àû¿ëµÇ´Â ±ÔÄ¢À» °®´Â´Ù. ¸ðµç ½ºÅ¸ÀϽ¬Æ® ¾ð¾îµéÀÌ Ä«½ºÄÉÀ̵ùÀ» Áö¿øÇÏ´Â °ÍÀº ¾Æ´Ï´Ù.
¸Þµð¾Æ ÀÇÁ¸¼º(media dependencies)
HTMLÀº Á¦ÀÛÀÚ·Î ÇÏ¿©±Ý ¸Þµð¾Æ¿¡ °ü°è ¾ø´Â ¹æ¹ýÀ¸·Î ¹®¼­¸¦ ÁöÁ¤Çϵµ·Ï Çã¿ëÇÑ´Ù. ÀÌ´Â »ç¿ëÀÚ°¡ ¸¹Àº Á¾·ùÀÇ ÀåÄ¡¿Í ¸Þµð¾Æ¸¦ »ç¿ëÇÏ¿© À¥ ÆäÀÌÁö¿¡ Á¢¼ÓÇϵµ·Ï ÇÏ´Â °ÍÀÌ´Ù. ¿¹¸¦ µé¸é, Windows, Macintosh OS¿Í X11·Î ¿î¿µµÇ´Â ÄÄÇ»ÅÍÀÇ ±×·¡ÇÈ µð½ºÇ÷¹ÀÌ, ÅÚ·¹ºñÁ¯¸¦ À§ÇÑ ÀåÄ¡, Ư¼ö Àû¿ë ÀüÈ­¿Í PDA-based ¿î¹Ý¿ë ÀåÄ¡, À½¼º(speech-based) ºê¶ó¿ìÀú, Á¡ÀÚ ÀåÄ¡µîÀÌ´Ù.

¹Ý´ë·Î ½ºÅ¸ÀϽ¬Æ®´Â ƯÁ¤ ¸Þµð¾Æ(media)³ª ¸Þµð¾Æ ±¸·ì¿¡ ÇÑÁ¤ÀûÀ¸·Î Àû¿ë µÉ ¼ö ÀÖ´Ù. ½ºÅ©¸°¿¡ »ç¿ëÇϱâ À§ÇÏ¿© Á¦°ø µÈ ÇÑ ½ºÅ¸ÀϽ¬Æ®´Â Àμâ ÇÒ ¶§ »ç¿ë µÉ ¼ö ÀÖÀ¸³ª, À½¼º(speech-based) ºê¶ó¿ìÀú¿¡´Â °ÅÀÇ ¿ëµµ°¡ ¾ø´Ù. ÀÌ ±Ô°ÝÀº ³ÐÀº ¹üÀ§ÀÇ ¸Þµð¾Æ¿¡ ÁÖ¾îÁø ½ºÅ¸ÀϽ¬Æ®°¡ Àû¿ëµÈ´Ù. ÀÌ´Â »ç¿ëµµ±¸¿¡°Ô ºÎÀûÀý ÇÑ ½ºÅ¸ÀϽ¬Æ®¸¦ ÇÇÇÏ¿© »ç¿ëÇÒ ¼ö ÀÖ°Ô ÇÑ´Ù. ½ºÅ¸ÀϽ¬Æ® ¾ð¾îµéÀº °°Àº ½ºÅ¸ÀϽ¬Æ® ¾È¿¡¼­ ¸Þµð¾Æ¸¦ ÁöÁ¤ÇÏ´Â ±â´ÉÀ» Æ÷ÇÔ ÇÒ ¼ö ÀÖ´Ù.

´ëü(alternate) ½ºÅ¸ÀÏ
Á¦ÀÛÀÚ´Â Àд »ç¶÷¿¡°Ô ¸î°¡Áö ´Ù¸¥ ¹®¼­ º¸ÀÌ´Â(view) ¹æ¹ýÀÇ ¿ø ÇÒ ¼ö ÀÖ´Ù. ¿¹¸¦ µé¾î, Ä¡¹Ð ÇÑ ¹®¼­¸¦ Ç¥ÇöÇϱâ À§ÇÏ¿© ÀÛÀº ÆùÆ®¸¦ »ç¿ëÇÏ´Â ½ºÅ¸ÀϽ¬Æ®, ¶Ç´Â Áß¿äÇÑ Ç¥½Ã¸¦ À§ ÇÑ Å« ÆùÆ®À» ÁöÁ¤ ÇÑ ½ºÅ¸ÀϽ¬Æ®°¡ µÉ ¼ö ÀÖ´Ù. ÀÌ ±Ô°ÝÀº Á¦ÀÛÀÚ°¡ ¼±È£(preferred) ½ºÅ¸ÀϽ¬Æ®¿Í ƯÁ¤ ¸ñÇ¥ »ç¿ëÀÚ ¶Ç´Â ¸Þµð¾ÆÀ» À§ÇÑ ´ëü(alternate) ½ºÅ¸ÀϽ¬Æ®¸¦ ÁöÁ¤ ÇÒ ¼ö ÀÖ°Ô ÇÑ´Ù. »ç¿ëµµ±¸´Â »ç¿ëÀÚ¿¡°Ô ´ëü ½ºÅ¸ÀϽ¬Æ® Áß¿¡¼­ ¼±Åà ¶Ç´Â ¸ðµç ½ºÅ¸ÀϽ¬Æ® ¸¦ ÀÛµ¿ÇÏÁö ¾Ê°Ô ÇÒ¼ö ÀÖ´Â ±âȸ¸¦ ÁÖ¾î¾ßÇÑ´Ù.
¼º´ÉÀÇ °í·Á
ÀϺΠ»ç¶÷µéÀº ½ºÅ¸ÀϽ¬Æ®ÀÇ ¼±È£ ¹®Á¦¸¦ °í·ÁÇÏ¿©¾ß ÇÑ´Ù°í ÁÖÀåÇÑ´Ù. ¿¹¸¦ µé¾î ¿ÜºÎ ½ºÅ¸ÀϽ¬Æ®¸¦ ÀÐ¾î »ç¿ëÀÚ¿¡°Ô ¿ÏÀü ÇÑ Ç¥ÇöÀ» Çϱâ À§Çؼ­´Â ½Ã°£ÀÌ Áö¿¬ µÉ ¼ö ÀÖ´Ù. ¹®¼­ Çìµå¿¡ ±ä ½ºÅ¸ÀÏ ³»¿ëÀÌ Æ÷ÇԵǸé ÀÌ¿Í ºñ½ÁÇÑ »óȲÀÌ ¹ß»ýÇÑ´Ù.

ÇöÀçÀÇ Á¦¾ÈÀº Á¦ÀÛÀÚ °¢ HTML ¿¤·¹¸àÆ® ¾È¿¡ Ç¥Çö¿¡ ´ëÇÑ Áö½Ã¸¦ Æ÷ÇÔ ½Ãų ¼ö ÀÖµµ·ÏÇÏ¿©, ÀÌ ¹®Á¦¿¡ ´ëÇÏ°í ÀÖ´Ù. ±×·¯¸é ÀÌ Ç¥Çö Á¤º¸´Â »ç¿ëµµ±¸°¡ °¢ ¿¤·¹¸àÆ®¸¦ Ç¥ÇöÀ» ¿ø ÇÒ ¶§ Ç×»ó »ç¿ë ÇÒ ¼ö ÀÖ´Ù.

¸¹Àº °æ¿ì, Á¦ÀÛÀÚ´Â ¹®¼­µéÀÇ ±¸·ìÀ» À§ ÇÑ °øÅëÀÇ ½ºÅ¸ÀϽ¬Æ®·Î ºÎÅÍ ÀÕÁ¡À» ¾ò´Â´Ù. ÀÌ·± °æ¿ì, ¹®¼­ ¾È¿¡ ±¤¹üÀ§ÇÏ°Ô ¾²¿©Áø ½ºÅ¸ÀÏ ÁöÁ¤Àº, ´ëºÎºÐÀÇ ¹®¼­¿¡ ±× ½ºÅ¸ÀϽ¬Æ®°¡ ÀÌ¹Ì Á¸ÀçÇϱ⠶§¹®¿¡, ¿¬°á µÈ ½ºÅ¸ÀϽ¬Æ®¸¦ »ç¿ëÇÏ´Â °Í¿¡ ºñÇØ ½ÇÁ¦ÀûÀ¸·Î ³ª»Û ¼º´ÉÀ» À¯¹ß½Ãų ¼ö ÀÖ´Ù. °øÅëÀ¸·Î »ç¿ëÇÏ´Â ÁÁÀº ½ºÅ¸ÀϽ¬Æ®´Â ÀÌ È¿°ú¸¦ Çâ»ó½Ãų °ÍÀÌ´Ù.

14.2 HTML¿¡ ½ºÅ¸ÀÏ Ãß°¡

ÁÖ¼®: CSS2 ºÎ·Ï A. HTML 4¸¦ À§ÇÑ ½ºÅ¸ÀϽ¬Æ® °ßº»ÀÇ µðÆúÆ® ½ºÅ¸ÀϽ¬Æ®¿¡´Â ÀϹÝÀûÀ¸·Î ¼ö¿ëµÇ´Â °¢ ¿¤·¹¸àÆ®ÀÇ µðÆúÆ® ½ºÅ¸ÀÏ Á¤º¸µéÀÌ ÀÖ´Ù. Á¦ÀÛÀÚ³ª Àû¿ëÀÚ´Â °øÈ÷ ¿©±â¼­ À¯¿ëÇÑ ÀÚ¿øÀ» ãÀ» ¼ö ÀÖÀ» °ÍÀÌ´Ù.

HTML ¹®¼­´Â ±× ¾È¿¡ Á÷Á¢ÀûÀ¸·Î ½ºÅ¸ÀϽ¬Æ® ÁöÁ¤ ÇÒ ¼ö ÀÖ°í, ¶Ç´Â ½ºÅ¸ÀϽ¬Æ®¸¦ Àоî(import) ¿Ã ¼ö ÀÖ´Ù.

¾î¶² ½ºÅ¸ÀϽ¬Æ® ¾ð¾îµµ HTML°ú °°ÀÌ »ç¿ë µÉ ¼ö ÀÖ´Ù. °£´ÜÇÑ ½ºÅ¸ÀϽ¬Æ® ¾ð¾îÀÌ¸é ´ëºÎºÐÀÇ »ç¿ëÀÚÀÇ ÇÊ¿ä¿¡ ÃæºÐ ÇÒ °ÍÀ̳ª, ´Ù¸¥ ¾ð¾îµéÀÌ Æ¯È­ µÈ ÇÊ¿ä¿¡ ´õ ¸ÂÀ» ¼ö ÀÖ´Ù. ÀÌ ±Ô°ÝÀº ½ºÅ¸ÀÏ ¾ð¾î·Î Ä«½ºÄÉÀ̵ù ½ºÅ¸ÀϽ¬Æ®(¾àÀÚ·Î CSS: "Cascading Style Sheet": ¹ø¿ª¹® CSS1)¸¦ ¿¹Á¦µé¿¡¼­ »ç¿ëÇÑ´Ù.

½ºÅ¸ÀÏ µ¥ÀÌÅÍÀÇ ¹®¹ýÀº ½ºÅ¸ÀϽ¬Æ® ¾ð¾î¿¡ µû¶ó ´Ù¸£´Ù.

14.2.1 µðÆúÆ® ½ºÅ¸ÀϽ¬Æ® ¾ð¾î ¼³Á¤

Á¦ÀÛÀÚ´Â HTML ¹®¼­¿Í °ü·Ã µÈ ½ºÅ¸ÀÏ Á¤º¸ÀÇ ½ºÅ¸ÀϽ¬Æ® ¾ð¾î¸¦ ÁöÁ¤ÇÏ¿©¾ß ÇÑ´Ù.

Á¦ÀÛÀÚ´Â ¹®¼­ÀÇ µðÆúÆ® ½ºÅ¸ÀϽ¬Æ® ¾ð¾î¸¦ ¼³Á¤Çϱâ À§ÇÏ¿©, META ¿¤·¹¸àÆ®¸¦ »ç¿ëÇÑ´Ù.

¿¹¸¦ µé¾î, µðÆúÆ®¸¦ CSS·Î ¼³Á¤Çϱâ À§ÇÏ¿©, Á¦ÀÛÀÚ´Â ´ÙÀ½ ¼±¾ðÀ» ¹®¼­ÀÇ HEAD ¾È¿¡ ÇÏ¿©¾ß ÇÑ´Ù,

 <META http-equiv="Content-Style-Type" content="text/css">

µðÆúÆ® ½ºÅ¸ÀϽ¬Æ® ¾ð¾î´Â HTTP Çì´õ¿¡µµ ¼³Á¤ ÇÒ ¼ö ÀÖ´Ù. À§ÀÇ META ¼±¾ðÀº ´ÙÀ½ HTTP Çì´õ¿Í °°´Ù.

 Content-Style-Type: text/css

»ç¿ëµµ±¸´Â ¹®¼­ÀÇ µðÆúÆ® ½ºÅ¸ÀϽ¬Æ® ¾ð¾î¸¦ ´ÙÀ½ ´Ü°è¿¡ µû¶ó °áÁ¤ÇÏ¿©¾ß ÇÑ´Ù(À§°¡ ³ôÀº ¼øÀ§).

  1. ¸¸ÀÏ META ¼±¾ð¿¡¼­ "Content-Style-Type"ÀÌ ¸í½ÃµÇ¾î ÀÖÀ¸¸é, ±ÛÀÚµé(stream)ÀÇ ¸¶Áö¸·ÀÇ °ÍÀ» µðÆúÆ® ½ºÅ¸ÀϽ¬Æ® ¾ð¾î·Î °áÁ¤ÇÑ´Ù.
  2. ¾Æ´Ï¸é, ¸¸ÀÏ HTTP Çì´õ¿¡ "Content-Style-Type"ÀÌ ¸í½ÃµÇ¾î ÀÖÀ¸¸é, ±ÛÀÚµéÀÇ ¸¶Áö¸·ÀÇ °ÍÀ» µðÆúÆ® ½ºÅ¸ÀϽ¬Æ® ¾ð¾î·Î °áÁ¤ÇÑ´Ù.
  3. ¾Æ´Ï¸é, µðÆúÆ® ½ºÅ¸ÀϽ¬Æ® ¾ð¾î´Â "text/css"ÀÌ´Ù.

¹®¼­°¡ style ¾ÖÆ®¸®ºäÆ®¸¦ ¼³Á¤ÇÏ´Â ¿¤·¹¸àÆ®¸¦ Æ÷ÇÔÇÏ°í ÀÖÀ¸³ª µðÆúÆ® ½ºÅ¸ÀϽ¬Æ® ¾ð¾î°¡ Á¤ÀǵǾî ÀÖÁö ¾ÊÀ¸¸é ¹Ù¸£Áö ¿ÇÁö ¾ÊÀº °ÍÀÌ´Ù. ÆíÁý±â´Â »ç¿ëµµ±¸°¡ "text/css" µðÆúÆ®¿¡ ÀÇÁ¸ÇÏÁö ¾Êµµ·Ï, µðÆúÆ® ½ºÅ¸ÀϽ¬Æ® ¾ð¾î Á¤º¸¸¦ ¹ß»ý(META ¼±¾ðÀÌ ÀüÇüÀûÀÓ) ½ÃÄѾßÇÑ´Ù.

14.2.2 ÀζóÀÎ(inline) ½ºÅ¸ÀÏ Á¤º¸

¾ÖÆ®¸®ºäÆ®ÀÇ Á¤ÀÇ

style = style [´ë¼Ò¹®ÀÚ Á߸³: CN]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ÇöÀç ¿¤·¹¸àÆ®ÀÇ ½ºÅ¸ÀÏ Á¤º¸¸¦ ÁöÁ¤ÇÑ´Ù.

style ¾ÖÆ®¸®ºäÆ®´Â ´ÜÀÏ ¿¤·¹¸àÆ®ÀÇ ½ºÅ¸ÀÏ Á¤º¸¸¦ Á¤ÀÇÇÑ´Ù. ÀζóÀÎ ½ºÅ¸ÀÏ ÁöÁ¤ÀÇ ½ºÅ¸ÀϽ¬Æ® ¾ð¾î´Â µðÆúÆ® ½ºÅ¸ÀϽ¬Æ® ¾ð¾î·Î ÁÖ¾îÁø´Ù. ½ºÅ¸ÀÏ µ¥ÀÌÅÍÀÇ ¹®¹ýÀº ½ºÅ¸ÀϽ¬Æ® ¾ð¾î¿¡ µû¶ó ´Ù¸£´Ù.

ÀÌ ¿¹Á¦´Â ƯÁ¤ ¹®´Ü¿¡¼­ ÅؽºÆ®ÀÇ »ö»ó°ú ÆùÆ® Å©±â Á¤º¸¸¦ ¼³Á¤ÇÑ´Ù.

 <P style="font-size: 12pt; color: fuchsia">½ºÅ¸ÀϽ¬Æ®´Â ±²ÀåÇÏÁö ¾Ê½À´Ï±î?

CSS¿¡¼­, ¹Ù¸¥ ¼±¾ðÀº "name: value" ¾ç½ÄÀ» °¡Áö¸ç ½ê¹ÌÄÝ·Ð(;)À¸·Î ºÐ¸®µÈ´Ù.

style ¾ÖÆ®¸®ºäÆ®´Â °³º° HTML ¿¤·¹¸àÆ®ÀÇ Æ¯À¯ÇÑ ½ºÅ¸ÀÏÀ» Àû¿ëÇÏ¿© »ç¿ë ÇÒ ¼ö ÀÖ´Ù. ¸¸ÀÏ ±× ½ºÅ¸ÀÏÀÌ ¿©·¯ ¿¤·¹¸àÆ®µé¿¡¼­ ´Ù½Ã »ç¿ë µÉ °ÍÀ̸é, Á¦ÀÛÀÚ´Â ±× Á¤º¸¸¦ ´Ù½Ã ±¸·ì Áö¿ì±â À§ÇÏ¿© STYLE ¿¤·¹¸àÆ®¸¦ »ç¿ëÇÑ´Ù. ÀûÁ¤ÇÑ Åº·Â¼ºÀ» À§Çؼ­ Á¦ÀÛÀÚ´Â ¿ÜºÎ ½ºÅ¸ÀϽ¬Æ® ¾È¿¡ ½ºÅ¸Àϵ鸦 Á¤ÀÇÇÏ¿©¾ß ÇÑ´Ù.

14.2.3 Çì´õ ½ºÅ¸ÀÏ Á¤º¸: STYLE ¿¤·¹¸àÆ®

<!ELEMENT STYLE - - %stylesheet     -- ½ºÅ¸ÀÏ Á¤º¸ -->
<!ATTLIST STYLE
 %i18n;                             -- lang, dir, Á¦¸ñ(title)°ú ÇÔ²² »ç¿ë --
 type        %ContentType; REQUIRED -- ½ºÅ¸ÀÏ ¾ð¾îÀÇ ÄÁÅÙÆ® ŸÀÔ(content type)--
 media       %MediaDesc;   IMPLIED  -- ¸Þµð¾Æµé¿¡ »ç¿ëÀ» À§ÇÏ¿© ¼³°è --
 title       %Text;        IMPLIED  -- Âü°í Á¦¸ñ --
>

½ÃÀÛű×: ÇÊ¿ä ÇÔ, Á¾·áű×: ÇÊ¿ä ÇÔ

¾ÖÆ®¸®ºäÆ®ÀÇ Á¤ÀÇ

type = content-type [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ¿¤·¹¸àÆ® ³»¿ëÀÇ ½ºÅ¸ÀϽ¬Æ® ¾ð¾î¸¦ ÁöÁ¤ÇÏ°í, µðÆúÆ® ½ºÅ¸ÀϽ¬Æ® ¾ð¾î¸¦ µ¤¾î ¾º¿î´Ù(override). ½ºÅ¸ÀϽ¬Æ® ¾ð¾î´Â ÄÁÅÙÆ® ŸÀÔ(¿¹: "text/css")À¸·Î ÁöÁ¤µÈ´Ù. ÀÌ ¾ÖÆ®¸®ºäÆ®ÀÇ µðÆúÆ® °ªÀº ¾øÀ¸¹Ç·Î, Á¦ÀÛÀÚ´Â ÀÌ ¾ÖÆ®¸®ºäÆ®ÀÇ °ªÀ» Á¦°øÇÏ¿©¾ß ÇÑ´Ù.
media = media-descriptors [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ÀǵµÇÏ´Â ¸ñÇ¥ ½ºÅ¸ÀÏ Á¤º¸ÀÇ ¸Þµð¾Æ¸¦ ÁöÁ¤ÇÑ´Ù. ÀÌ´Â ´ÜÀÏ ¸Þµð¾Æ ȤÀº Äĸ¶·Î ºÐ¸®µÈ ¸ñ·ÏÀÌ µÉ ¼ö ÀÖ´Ù. ÀÌ ¾ÖÆ®¸®ºäÆ®ÀÇ µðÆúÆ® °ªÀº "screen"ÀÌ´Ù.
´Ù¸¥ °÷¿¡¼­ Á¤ÀÇ µÈ ¾ÖÆ®¸®ºäÆ®

STYLE ¿¤·¹¸àÆ®´Â Á¦ÀÛÀÚ°¡ ¹®¼­ÀÇ Çìµå(head) ¾È¿¡ ½ºÅ¸ÀÏ ÁöÁ¤À» »ðÀÔ ÇÒ ¼ö ÀÖµµ·ÏÇÑ´Ù. HTMLÀº ¹®¼­ÀÇ HEAD Ç׸ñ ¾È¿¡ STYLE ¿¤·¹¸àÆ®¸¦ ¾î¶² °¹¼ö¶óµµ °ü°è¾ø´Ù.

½ºÅ¸ÀϽ¬Æ®¸¦ Áö¿øÇÏÁö ¾Ê´Â »ç¿ëµµ±¸, ¶Ç´Â STYLE ¿¤·¹¸àÆ®°¡ ±× ½ºÅ¸ÀϽ¬Æ® ¾ð¾î¸¦ Áö¿øÇÏÁö ¾Ê´Â °æ¿ì, STYLE ¿¤·¹¸àÆ®ÀÇ ³»¿ëÀ» °¨Ãß¾î¾ßÇÑ´Ù. ³»¿ëÀ» ¹®¼­ÀÇ ÅؽºÆ® ºÎºÐÀ¸·Î Ç¥½ÃÇÏ´Â °ÍÀº ¿À·ùÀÌ´Ù. ÀϺΠ½ºÅ¸ÀϽ¬Æ® ¾ð¾îµéÀº ±Ô°Ý¿¡ ¸ÂÁö ¾Ê´Â »ç¿ëµµ±¸¿¡¼­ ³»¿ë °¨Ã߱⠹®¹ýÀ» Áö¿øÇÑ´Ù.

½ºÅ¸ÀÏ µ¥ÀÌÅÍ ¹®¹ýÀº ½ºÅ¸ÀϽ¬Æ® ¾ð¾î¿¡ µû¶ó ´Ù¸£´Ù.

ÀϺΠ½ºÅ¸ÀϽ¬Æ® Àû¿ëµéÀº style ¾ÖÆ®¸®ºäÆ®¿¡¼­ º¸´Ù STYLE ¿¤·¹¸àÆ®¿¡¼­ ¸¹Àº Á¾·ùÀÇ ÁöÁ¤ ÇÒ ¼ö ÀÖ´Ù. ¿¹¸¦ µé¾î, CSS·Î STYLE ¿¤·¹¸àÆ® ¾È¿¡¼­ ¾Æ·¡ÀÇ ÁöÁ¤µéÀ» ¼±¾ð ÇÒ ¼ö ÀÖ´Ù.

½ºÅ¸ÀÏ Ç¥½Ã(rule)ÀÇ ¿ì¼± ¼øÀ§¿Í Ư¼ºÀÇ Àü´Þ(inheritance)¿¡ °ü ÇÑ ±ÔÄ¢Àº ½ºÅ¸ÀϽ¬Æ® ¾ð¾î¿¡ µû¶ó ´Ù¸£´Ù.

´ÙÀ½ ¿¹Á¦¿¡¼­ ¹®¼­ ¾ÈÀÇ °¢ H1 ¿¤·¹¸àÆ® ÁÖÀ§¿¡ Å׵θ®(border)¸¦ ³Ö°í, ÆäÀÌÁöÀÇ °¡¿îµ¥ ¿Àµµ·Ï CSS STYLE ¼±¾ðÇÏ¿´´Ù.

<HEAD>
 <STYLE type="text/css">
   H1 {border-width: 1; border: solid; text-align: center}
 </STYLE>
</HEAD>

ÀÌ ½ºÅ¸ÀÏ Á¤º¸¸¦ ƯÁ¤ Ŭ¶ó½º(class)¸¦ °®´Â H1 ¿¤·¹¸àÆ®¿¡ ¸¸ Àû¿ëÇÏ·Á¸é ´ÙÀ½°ú °°ÀÌ ¼öÁ¤ÇÏ¸é µÈ´Ù.

<HEAD>
 <STYLE type="text/css">
   H1.myclass {border-width: 1; border: solid; text-align: center}
 </STYLE>
</HEAD>

<BODY>
 <H1 class="myclass">ÀÌ H1´Â ÁöÁ¤ µÈ ½ºÅ¸ÀÏÀÇ ¿µÇâÀ» ¹ÞÀ½.</H1>
 <H1>ÀÌ H1´Â ÁöÁ¤ µÈ ½ºÅ¸ÀÏÀÇ ¿µÇâÀ» ¹ÞÁö ¾ÊÀ½.</H1>
</BODY>

¸¶Áö¸·À¸·Î, H1ÀÇ ÀÌ ½ºÅ¸ÀÏ Á¤º¸ÀÇ ¹üÀ§¸¦ ´ÜÀÏ ÀνºÅº½º(instance)¿¡ ¸¸ ±¹ÇÑ ½ÃÅ°±â À§ÇØ, id ¾ÖÆ®¸®ºäÆ®¸¦ ¼³Á¤Çϸé:

<HEAD>
 <STYLE type="text/css">
   #myid {border-width: 1; border: solid; text-align: center}
 </STYLE>
</HEAD>

<BODY>
 <H1 class="myclass">ÀÌ H1´Â ÁöÁ¤ µÈ ½ºÅ¸ÀÏÀÇ ¿µÇâÀ» ¹ÞÁö ¾ÊÀ½.</H1>
 <H1 id="myid">ÀÌ H1´Â ÁöÁ¤ µÈ ½ºÅ¸ÀÏÀÇ ¿µÇâÀ» ¹ÞÀ½.</H1>
 <H1>ÀÌ H1´Â ÁöÁ¤ µÈ ½ºÅ¸ÀÏÀÇ ¿µÇâÀ» ¹ÞÁö ¾ÊÀ½.</H1>
</BODY>

HTMLÀÇ °ÅÀÇ ¸ðµç ¿¤·¹¸àÆ®¿¡ ½ºÅ¸ÀÏ Á¤º¸¸¦ ¼³Á¤ÇÒ ¼ö ÀÖÁö¸¸, ºí·°·¹º§(block-level) ´ë ÀζóÀÎ(inline) ¿Ü¿¡ ¾î¶² Ç¥Çö Àǹ̸¦ °®Áö ¾Ê´Â DIV¿Í SPAN, µÎ ¿¤·¹¸àÆ®¿¡¼­ ƯÈ÷ À¯¿ëÇÏ´Ù. ½ºÅ¸ÀϽ¬Æ®¿Í °áÇյǸé, ÀÌµé ¿¤·¹¸àÆ®´Â »ç¿ëÀÚ°¡ HTMLÀ» ¹« ÇÑÁ¤ È®Àå ÇÒ ¼ö ÀÖ´Ù. ƯÈ÷ class¿Í id ¾ÖÆ®¸®ºäÆ®¿Í °°ÀÌ »ç¿ë ÇÒ ¶§ ´õ¿í ±×·¸ÇÏ´Ù.

´ÙÀ½ ¿¹Á¦´Â ¹®´ÜÀÇ ¾Õ ¸î±ÛÀÚ¸¦ ÀÛÀº ´ë¹®ÀÚ ÆùÆ® ½ºÅ¸ÀÏ·Î ¼³Á¤Çϱâ À§ÇÏ¿© SPAN ¿¤·¹¸àÆ®¸¦ »ç¿ëÇÏ¿´´Ù.

<HEAD>
 <STYLE type="text/css"> 
	SPAN.sc-ex{ font-variant: small-caps }
 </STYLE>
</HEAD>

<BODY>
 <P> <SPAN class="sc-ex">The first</SPAN>
	few words of this paragraph are in small-caps.
</BODY>

´ÙÀ½ ¿¹Á¦¿¡¼­ °úÇÐ ±â»çÀÇ ¿ä¾à Ç׸ñÀ» ¸¸µå´Â ÀÏ·ÃÀÇ ¹®´ÜµéÀÇ ¿­°Å¸¦ ¼³Á¤Çϱâ À§ÇÏ¿©, DIV¿Í class ¾ÖÆ®¸®ºäÆ®¸¦ »ç¿ëÇÏ¿´´Ù. ÀÌ ½ºÅ¸ÀÏ Á¤º¸´Â class ¾ÖÆ®¸®ºäÆ®¸¦ ¼³Á¤ ÇÔÀ¸·Î¼­, ÀÌ ¹®¼­ÀÇ ´Ù¸¥ °÷¿¡¼­ ´Ù¸¥ ¿ä¾à Ç׸ñµéÀ» À§ÇÏ¿© Àç »ç¿ë µÉ ¼ö ÀÖ´Ù.

<HEAD>
 <STYLE type="text/css">
	DIV.Abstract { text-align: justify }
 </STYLE>
</HEAD>

<BODY>
 <DIV class="Abstract">
   <P>Chieftain Á¦Ç°µéÀº ³»³â ¿ì¸® ½ÃÀåÀÇ ½ÂÀÚÀÌ´Ù. ÀÌ º¸°í¼­´Â ChieftainÀ»
     °æÀï Á¦Ç°µé¿¡ ´ëÇؼ­ ¾î¶»°Ô Æ÷Áö¼ÇÇϴ°¡¸¦ ¼³¸íÇÑ´Ù.
   <P>Chieftain´Â Commander Ç°¸ñµéÀ» ´ëü Çϸç, Commander Ç°¸ñµéÀº
     º°µµÀÇ Å뺸°¡ ÀÖÀ» ¶§ ±îÁö °¡°ÝÇ¥¿¡ ³²¾Æ ÀÖÀ» °ÍÀÌ´Ù.
 </DIV>
</BODY>

14.2.4 ¸Þµð¾Æ ŸÀÔ(media type)

¿¹¸¦ µé¾î, ±×·¡ÇÈ µð½ºÇ÷¹ÀÌ, ÅÚ·¹ºñÁ¯ ½ºÅ©¸°, ¿î¹Ý¿ë ÀåÄ¡(handheld device), À½¼º(speech-based) ºê¶ó¿ìÀú, Á¡ÀÚ ÀåÄ¡µî¿¡¼­ ¹®¼­°¡ Ç¥Çö µÉ ¶§, HTML´Â ¸Þµð¾Æ Ư¼ºµéÀÇ ÀÕÁ¡À» °®µµ·Ï Á¦ÀÛÀÚ°¡ ¹®¼­¸¦ ¼³°è ÇÒ ¼ö ÀÖ°Ô ÇÑ´Ù. media ¾ÖÆ®¸®ºäÆ®¸¦ ¼³Á¤ÇÔÀ¸·Î¼­, Á¦ÀÛÀÚ´Â »ç¿ëµµ±¸°¡ ½ºÅ¸ÀϽ¬Æ®¸¦ ¼±ÅÃÀûÀ¸·Î Àаí Àû¿ë ÇÒ ¼ö ÀÖ°Ô ÇÑ´Ù. ¾Ë·ÁÁø ¸Þµð¾Æ ÁöÁ¤ÀÚÀÇ ¸ñ·ÏÀ» ÂüÁ¶Ç϶ó.

´ÙÀ½ ¼±¾ð ¿¹Á¦´Â H1 ¿¤·¹¸àÆ®¿¡ Àû¿ëµÈ´Ù. ¿µ¾÷ ȸÀÇ¿¡¼­ ºñÃç(projected) Áú ¶§, ¸ðµç ÀνºÅº½º(instance)µéÀº Ǫ¸¥»öÀÌ µÇ°í, ÀÎ¼â µÉ ¶§ ¸ðµç ÀνºÅº½ºµéÀº Áß¾Ó¿¡ À§Ä¡ ÇÒ °ÍÀÌ´Ù.

<HEAD>
<STYLE type="text/css" media="projection">
  H1 { color: blue}
</STYLE>
<STYLE type="text/css" media="print">
 H1 { text-align: center }
</STYLE>

ÀÌ ¿¹Á¦¿¡ À½¼º Ãâ·Â¿¡ »ç¿ëµÇ´Â ¾ØÄ¿µé¿¡ À½Çâ È¿°ú¸¦ Ãß°¡ÇÏ¿´´Ù.

<STYLE type="text/css" media="aural">
 A { cue-before: uri(bell.aiff); cue-after: uri(dong.wav)}
</STYLE>
</HEAD>

»ç¿ëµµ±¸°¡ ÇöÀç ÀåÄ¡(device)¿¡ Àû¿ëµÇ´Â ½ºÅ¸ÀϽ¬Æ®µé ¸¸À» ³×Æ®¿ö±×(network)·Î ºÎÅÍ Àоî Ç¥ÇöÇÏ¿© ½Ã°£À» Àý¾à ÇÒ ¼ö Àֱ⠶§¹®¿¡, ¸Þµð¾Æ Á¦¾î(control)´Â ¿ÜºÎ ½ºÅ¸ÀϽ¬Æ®¿¡ Àû¿ë µÉ ¶§ ƯÈ÷ Èï¹Ì·Ó´Ù. ¿¹¸¦ µé¾î À½¼º ºê¶ó¿ìÀú´Â º¸´Â Ç¥ÇöÀ» À§ÇÑ ½ºÅ¸ÀϽ¬Æ®ÀÇ Àоî¿ÈÀ» ÇÇÇÒ ¼ö ÀÖ´Ù. ¸Þµð¾Æ¿¡ µû¸¥ Ä«½ºÄÉÀ̵带 ÂüÁ¶Ç϶ó.

14.3 ¿ÜºÎ(external) ½ºÅ¸ÀϽ¬Æ®

Á¦ÀÛÀÚ´Â ½ºÅ¸ÀϽ¬Æ®¸¦ HTML ¹®¼­·Î ºÐ¸® ÇÒ ¼ö Àִµ¥, ÀÌ´Â ¸î°¡Áö ÀÕÁ¡À» Á¦°øÇÑ´Ù.

14.3.1 ¼±È£(preferred)¿Í ´ëü(alternate) ½ºÅ¸ÀϽ¬Æ®

HTML´Â Á¦ÀÛÀÚ·Î ÇÏ¿©±Ý ¿©·¯°³ÀÇ ¿ÜºÎ ½ºÅ¸ÀϽ¬Æ®(style sheet)¿Í ¹®¼­¸¦ ¿¬°ü Áö¿ï ¼ö ÀÖ°Ô ÇÑ´Ù. ½ºÅ¸ÀϽ¬Æ® ¾ð¾î´Â º¹¼öÀÇ ¿ÜºÎ ½ºÅ¸ÀϽ¬Æ®µéÀÌ ¾î¶»°Ô ÀÛ¿ëÇϴ°¡¸¦ ÁöÁ¤ÇÑ´Ù. ¿¹¸¦ µé¾î, CSSÀÇ "cascade" ÁöÁ¤(rule) µî.

Á¦ÀÛÀÚ´Â ´ëü(alternate) ½ºÅ¸ÀϽ¬Æ®¶ó°í ºÒ¸®¿ì´Â »óÈ£ ¹èŸÀûÀÎ ¸î°³ÀÇ ½ºÅ¸ÀϽ¬Æ®µé¸¦ ÁöÁ¤ ÇÒ ¼ö ÀÖ´Ù. »ç¿ëÀÚ´Â À̰͵é Áß ¼±È£µµ¿¡ µû¶ó °¡Àå ÁÁ¾ÆÇÏ´Â °ÍÀ» ¼±Åà ÇÒ ¼ö ÀÖ´Ù. ¿¹¸¦ µé¾î Á¦ÀÛÀÚ´Â ÀÛÀº ½ºÅ©¸°À» À§ÇÏ¿© ¼³°è µÈ ½ºÅ¸ÀϽ¬Æ®¸¦ ÁöÁ¤ÇÏ°í, ½Ã·ÂÀÌ ¾àÇÑ »ç¿ëÀÚ¸¦ À§ÇØ Å« ÆùÆ®¸¦ »ç¿ëÇÏ´Â ´Ù¸¥ ½ºÅ¸ÀϽ¬Æ®¸¦ ÁöÁ¤ ÇÒ ¼ö ÀÖ´Ù. »ç¿ëµµ±¸´Â »ç¿ëÀÚ°¡ ´ëü ½ºÅ¸ÀϽ¬Æ®·Î ºÎÅÍÀÇ ¼±ÅÃÀ» Çã¿ëÇÏ¿©¾ß ÇÑ´Ù.

Á¦ÀÛÀÚ´Â ´ëü ½ºÅ¸ÀϽ¬Æ®µé·Î ºÎÅÍ ÇϳªÀÇ ¼±È£(preferred) ½ºÅ¸ÀϽ¬Æ®¸¦ ÁöÁ¤ ÇÒ ¼ö ÀÖ´Ù. »ç¿ëµµ±¸´Â »ç¿ëÀÚ°¡ ´Ù¸¥ ´ëü¸¦ ¼±ÅÃÇÏÁö ¾Ê´Â ÇÑ, Á¦ÀÛÀÚÀÇ ¼±È£ ½ºÅ¸ÀϽ¬Æ®¸¦ Àû¿ëÇÏ¿©¾ß ÇÑ´Ù.

Á¦ÀÛÀÚ´Â Á¦ÀÛÀÚÀÇ ¼±È£ ½ºÅ¸ÀϽ¬Æ®¸¦ Æ÷ÇÔÇÏ¿© ¸î °³ÀÇ ´ëü ½ºÅ¸ÀϽ¬Æ®µéÀ» ÇϳªÀÇ ½ºÅ¸ÀÏ À̸§(style name)À¸·Î ±¸·ì Áö¿ï ¼ö ÀÖ´Ù. »ç¿ëÀÚ°¡ À̸§Áö¿öÁø ½ºÅ¸ÀÏÀ» ¼±ÅÃÇϸé, »ç¿ëµµ±¸´Â ±×¿Í °°Àº À̸§À» °¡Áø ¸ðµç ½ºÅ¸ÀϽ¬Æ®¸¦ Àû¿ëÇÏ¿©¾ß ÇÑ´Ù. »ç¿ëµµ±¸´Â ´Ù¸¥ ½ºÅ¸ÀÏ À̸§À» °®´Â ´ëü ½ºÅ¸ÀϽ¬Æ®¿¡´Â Àû¿ëÇÏÁö ¾Ê¾Æ¾ßÇÑ´Ù. ¿ÜºÎ ½ºÅ¸ÀϽ¬Æ®ÀÇ ÁöÁ¤¿¡¼­ ½ºÅ¸ÀϽ¬Æ® ±¸·ìÀÇ À̸§ Áþ´Â ¹æ¹ýÀ» ¼³¸íÇÏ¿´´Ù.

Á¦ÀÛÀÚ´Â »ç¿ëµµ±¸°¡ Ãß°¡ÀûÀ¸·Î ´ëü ½ºÅ¸ÀϽ¬Æ®¸¦ Àû¿ëÇØ¾ß ÇÏ´Â °íÁ¤Àû(persistent) ½ºÅ¸ÀϽ¬Æ®µµ Á¤ÀÇ ÇÒ ¼ö ÀÖ´Ù.

»ç¿ëµµ±¸´Â ¾î¶² ½ºÅ¸ÀϽ¬Æ®¸¦ Àû¿ë ÇÒ ¶§, ¸Þµð¾Æ ÁöÁ¤ÀÚ(media descriptor)¸¦ Áß¿äÇÏ°Ô »ý°¢ÇÏ¿©¾ß ÇÑ´Ù.

»ç¿ëµµ±¸´Â »ç¿ëÀÚ°¡ Á¦ÀÛÀÚÀÇ ½ºÅ¸ÀϽ¬Æ®¸¦ ¿ÏÀüÈ÷ »ç¿ëµÇÁö ¾Ê°Ô ÇÒ ¼öµµ ÀÖ¾î¾ß ÇÑ´Ù. ÀÌ·± °æ¿ì »ç¿ëµµ±¸´Â ¾î¶² °íÁ¤Àû(persistent) ¶Ç´Â ´ëü ½ºÅ¸ÀϽ¬Æ®µµ Àû¿ëÇÏÁö ¸»¾Æ¾ßÇÑ´Ù.

14.3.2 ¿ÜºÎ ½ºÅ¸ÀϽ¬Æ®ÀÇ ÁöÁ¤

Á¦ÀÛÀÚ´Â LINK ¿¤·¹¸àÆ®(element)ÀÇ ´ÙÀ½ ¾ÖÆ®¸®ºäÆ®(attribute)·Î ¿ÜºÎ ½ºÅ¸ÀϽ¬Æ®(style sheet)¸¦ ÁöÁ¤ÇÑ´Ù.

»ç¿ëµµ±¸´Â »ç¿ëÀÚ°¡ ´ëü ½ºÅ¸ÀÏ ¸ñ·ÏÀ¸·ÎºÎÅÍ °¡Á®¿Í º¸ÀÌ°Ô ÇÏ´Â ¼ö´ÜÀ» Á¦°øÇÏ¿©¾ß ÇÑ´Ù. title ¾ÖÆ®¸®ºäÆ®ÀÇ °ªÀº °¢ ¼±ÅÃÀÇ À̸§ÀÌ ÃßõµÈ´Ù.

ÀÌ ¿¹Á¦´Â ¸ÕÀú mystyle.css È­ÀÏ¿¡ ÀÖ´Â °íÁ¤Àû(persistent) ½ºÅ¸ÀϽ¬Æ®¸¦ ÁöÁ¤ÇÏ¿´´Ù.

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

title ¾ÖÆ®¸®ºäÆ®ÀÇ ¼³Á¤À¸·Î Á¦ÀÛÀÚÀÇ ¼±È£ ½ºÅ¸ÀϽ¬Æ®¸¦ ¸¸µç´Ù.

 <LINK href="mystyle.css" title="compact" rel="stylesheet" type="text/css">

rel ¾ÖÆ®¸®ºäÆ®¿¡ Å°¿öµå "alternate"¸¦ Ãß°¡ ÇÔÀ¸·Î¼­ ´ëü ½ºÅ¸ÀϽ¬Æ®¸¦ ¸¸µç´Ù.

 <LINK href="mystyle.css" title="Medium"
	rel="alternate stylesheet" type="text/css">

Ãß°¡ Á¤º¸´Â ¿¬°á°ú ¿ÜºÎ ½ºÅ¸ÀϽ¬Æ®À» ÂüÁ¶Ç϶ó.

Á¦ÀÛÀÚ´Â ¼±È£(preferred) ½ºÅ¸ÀϽ¬Æ®¸¦ ¼³Á¤Çϱâ À§ÇÏ¿© META ¿¤·¹¸àÆ®µµ »ç¿ë ÇÒ ¼ö ÀÖ´Ù.

¿¹¸¦ µé¾î, À§ ¿¹Á¦¿¡¼­ ¼±È£ ½ºÅ¸ÀϽ¬Æ®¸¦ "compact"·Î ¼³Á¤Çϱâ À§ÇÏ¿©, Á¦ÀÛÀÚ´Â HEAD ¾È¿¡ ´ÙÀ½ ÁÙÀ» Æ÷ÇÔ ½Ãų ¼ö ÀÖ´Ù.

 <META http-equiv="Default-Style" content="compact">

¼±È£ ½ºÅ¸ÀϽ¬Æ®´Â HTTP Çì´õ(header)·Î ¼³Á¤ ÇÒ ¼öµµ ÀÖ´Ù. À§ META ¼±¾ðÀº ¾Æ·¡ HTTP Çì´õ¿Í µ¿µîÇÏ´Ù.

 Default-Style: "compact"

¸¸ÀÏ µÎ°³ ÀÌ»óÀÇ META ¼±¾ð ¶Ç´Â HTTP Çì´õ°¡ ¼±È£ ½ºÅ¸ÀϽ¬Æ®¸¦ ¼³Á¤ Çß´Ù¸é, ÃÖÁ¾ ¼³Á¤ÀÌ Àû¿ëµÈ´Ù. HTTP Çì´õ´Â ÀÌ ¸ñÀûÀ» À§ÇÏ¿© ¹®¼­ÀÇ HEAD º¸´Ù ¸ÕÀú ³ª¿Àµµ·Ï ÇÑ´Ù.

¸¸ÀÏ µÎ°³ ÀÌ»óÀÇ LINK ¿¤·¹¸àÆ®°¡ ¼±È£ ½ºÅ¸ÀϽ¬Æ®¸¦ ¼³Á¤ Çß´Ù¸é, ù¹ø° °ÍÀÌ Àû¿ëµÈ´Ù.

META ¶Ç´Â HTTP Çì´õ·Î ÁöÁ¤ µÈ ¼±È£ ½ºÅ¸ÀϽ¬Æ®´Â LINK ¿¤·¹¸àÆ®¿¡¼­ °°Àº °ÍÀ» ÁöÁ¤ ÇÑ °Í¿¡ ¿ì¼±ÇÏ¿© Àû¿ëµÈ´Ù.

14.4 ½ºÅ¸ÀϽ¬Æ®(style sheet) Ä«½ºÄÉÀ̵ù

CSS¿Í °°Àº Ä«½ºÄÉÀ̵ù(cascading) ½ºÅ¸ÀϽ¬Æ® ¾ð¾îµéÀº ½ºÅ¸ÀÏ Á¤º¸¸¦ ¿©·¯ Áö¿øÀ¸·Î ºÎÅÍ ÇÔ²² È¥ÇÕÇÏ´Â °ÍÀ» Çã¿ëÇÑ´Ù. ±×·¯³ª, ¸ðµç ½ºÅ¸ÀϽ¬Æ® ¾ð¾îµéÀÌ Ä«½ºÄÉÀ̵ùÀ» Áö¿øÇÏÁö´Â °ÍÀº ¾Æ´Ï´Ù. Ä«½ºÄɵå(cascade)¸¦ Á¤ÀÇÇϱâ À§ÇÏ¿©, Á¦ÀÛÀÚ´Â LINK¿Í(ȤÀº) STYLE ¿¤·¹¸àÆ®µé¸¦ ¿­°ÅÇÑ´Ù. ÀÌ ½ºÅ¸ÀÏ Á¤º¸´Â HEAD ¾È¿¡ ³ªÅ¸³­ ´Ù¸¥ ¿¤·¹¸àÆ®µéÀÇ ¼ø¼­·Î Ä«½ºÄɵåµÈ´Ù.

ÁÖ¼®: ÀÌ ±Ô°Ý¿¡´Â ´Ù¸¥ ¾ð¾îµé·Î ºÎÅÍ ½ºÅ¸ÀϽ¬Æ®¸¦ ¾î¶»°Ô Ä«½ºÄɵå(cascade)Çϴ°¡¸¦ ÁöÁ¤ÇÏÁö ¾Ê¾Ò´Ù. Á¦ÀÛÀÚ´Â ½ºÅ¸ÀϽ¬Æ® ¾ð¾îµéÀÇ È¥ÇÕÀ» ÇÇÇؾßÇÑ´Ù.

´ÙÀ½ ¿¹Á¦¿¡¼­, "compact"·Î À̸§Áö¿öÁø µÎ ´ëü ½ºÅ¸ÀϽ¬Æ®¸¦ ÁöÁ¤ÇÏ¿´´Ù. ¸¸ÀÏ »ç¿ëÀÚ°¡ "compact" ½ºÅ¸ÀÏÀ» ¼±ÅÃÇϸé, »ç¿ëµµ±¸´Â °íÁ¤Àû(persistent) ½ºÅ¸ÀϽ¬Æ® "common.css"¿Í °°À̵ΰ³ÀÇ ¿ÜºÎ ½ºÅ¸ÀϽ¬Æ®µéÀ» Àû¿ëÇÏ¿©¾ß ÇÑ´Ù. ¸¸ÀÏ »ç¿ëÀÚ°¡ "big print" ½ºÅ¸ÀÏÀ» ¼±ÅÃÇϸé, °íÁ¤Àû ½ºÅ¸ÀϽ¬Æ® "common.css"¿Í ´ëü ½ºÅ¸ÀϽ¬Æ® "bigprint.css" ¸¸ÀÌ Àû¿ë µÉ °ÍÀÌ´Ù.

<LINK rel="alternate stylesheet" 
	title="compact" href="small-base.css" type="text/css">
<LINK rel="alternate stylesheet" 
	title="compact" href="small-extras.css" type="text/css">
<LINK rel="alternate stylesheet" 
	title="big print" href="bigprint.css" type="text/css">
<LINK rel="stylesheet" href="common.css" type="text/css">

´ÙÀ½ Ä«½ºÄɵå(cascade) ¿¹Á¦´Â LINK¿Í STYLE ¿¤·¹¸àÆ® µÎ°¡Áö¿¡ °ü°èµÈ´Ù.

<LINK rel="stylesheet" href="corporate.css" type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css">
<STYLE type="text/css">
   p.special { color: rgb(230, 100, 180) }
</STYLE>

14.4.1 ¸Þµð¾Æ¿¡ µû¸¥(media-dependent) Ä«½ºÄÉÀ̵å(cascade)

Ä«½ºÄÉÀ̵å(cascade)´Â ´Ù¸¥ ¸Þµð¾Æ¿¡ Àû¿ëµÇ´Â ½ºÅ¸ÀϽ¬Æ®µéÀ» Æ÷ÇÔ ÇÒ ¼ö ÀÖ´Ù. LINK¿Í STYLE µÑ ´Ù media ¾ÖÆ®¸®ºäÆ®¿Í °°ÀÌ »ç¿ë µÉ ¼ö ÀÖ´Ù. »ç¿ëµµ±¸´Â ÇöÀç ¸Þµð¾Æ¿¡ Àû¿ëµÇÁö ¾Ê´Â ½ºÅ¸ÀϽ¬Æ®µéÀ» ¼Ô¾Æ ¹ö·Á¾ßÇÑ´Ù.

´ÙÀ½ ¿¹Á¦¿¡¼­, ¿©·¯ °÷¿¡¼­ »ç¿ëµÉ ¼ö ÀÖ´Â "corporate" ½ºÅ¸ÀϽ¬Æ®ÀÇ Ä«½ºÄÉÀ̵带 ÁöÁ¤ÇÏ¿´´Âµ¥, Çϳª´Â Àμ⿡ ÀûÇÕÇÏ°í, Çϳª´Â °Ë»ö¿¡ »ç¿ëµÇ°í, Çϳª´Â À½¼º(speech-based) ºê¶ó¿ìÀú(Â÷·®¿¡¼­ ÀüÀÚ¿ìÆíÀ» º¼ ¶§ À¯¿ëÇÑ)¸¦ À§ÇÑ °ÍÀÌ´Ù. "techreport" ½ºÅ¸ÀϽ¬Æ®´Â ¸ðµç ¸Þµð¾Æ(media)¿¡ Àû¿ëµÈ´Ù. STYLE ¿¤·¹¸àÆ®ÀÇ »ö»ó ÁöÁ¤(Àº Àμâ¿Í ½ºÅ©¸°¿¡¼­ »ç¿ëµÇ³ª ¼Ò¸® Ç¥Çö¿¡´Â »ç¿ëµÇÁö ¾Ê´Â´Ù.

<LINK rel="stylesheet" media="aural" 
	href="corporate-aural.css" type="text/css">
<LINK rel="stylesheet" media="screen" 
	href="corporate-screen.css" type="text/css">
<LINK rel="stylesheet" media="print" 
	href="corporate-print.css" type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css">
<STYLE type="text/css">
   p.special { color: rgb(230, 100, 180) }
</STYLE>

14.4.2 Àü´Þ(inheritance)°ú Ä«½ºÄÉÀ̵ù(cascading)

»ç¿ëµµ±¸°¡ ¹®¼­¸¦ Ç¥ÇöÇϱâ À§ÇÏ¿©, ¿¹¸¦ µé¾î ÆùÆ®ÀÇ Á¾·ù(family), ½ºÅ¸ÀÏ(style), Å©±â(size), ¿­(line)ÀÇ ³ôÀÌ, ±ÛÀÚ »ö»ó µî ½ºÅ¸ÀÏ Æ¯¼º(property) °ªÀ» ãÀ» ÇÊ¿ä°¡ ÀÖ´Ù. ½ÇÁ¦ÀÇ ±â´ÉÀº ½ºÅ¸ÀϽ¬Æ® ¾ð¾î¿¡ µû¶ó ÀÚ¸£³ª, ´ÙÀ½ »çÇ×Àº ÀϹÝÀûÀ¸·Î Àû¿ëµÈ´Ù.

Ä«½ºÄÉÀ̵å(cascade)±â´ÉÀº ¿©·¯ ½ºÅ¸ÀÏ ÁöÁ¤µéÀÌ ¸ðµÎ ¿¤·¹¸àÆ®¿¡ Á÷Á¢ Àû¿ë ÇÒ ¶§ »ç¿ëµÈ´Ù. ÀÌ ±â´ÉÀº »ç¿ëµµ±¸°¡ ¾î¶² ÁöÁ¤À» Àû¿ë ÇÒ °ÍÀΰ¡¸¦ °áÁ¤Çϱâ À§ÇÏ¿© ÁöÁ¤À» Ư¼º¿¡ µû¶ó Á¤¸®ÇÏ°ÔÇÑ´Ù. ¸¸ÀÏ ÁöÁ¤À» ¹ß°ßÇÏÁö ¸øÇϸé, ´ÙÀ½ ´Ü°è´Â ½ºÅ¸ÀÏ Æ¯¼ºÀÌ Àü´Þ(inherited)µÇ´Â°¡ ¾Æ´Ñ°¡¿¡ µû¸¥´Ù. ¸ðµç Ư¼ºÀÌ Àü´ÞµÇ´Â °ÍÀº ¾Æ´Ï´Ù. À̵é Ư¼ºµéÀ» À§ÇÏ¿©, ½ºÅ¸ÀϽ¬Æ® ¾ð¾î´Â ƯÁ¤ ¿¤·¹¸àÆ®ÀÇ ÁöÁ¤ÀÌ ¾ø¸¦ ¶§ µðÆúÆ® °ªµéÀ» Á¦°øÇÑ´Ù.

¸¸ÀÏ ±× Ư¼ºÀÌ Àü´ÞµÇ´Â °ÍÀ̸é, »ç¿ëµµ±¸´Â ÀÌ°ÍÀ» ÁöÁ¤¿¡ Àû¿ë ÇÒ °ÍÀΰ¡¸¦ ¾Ë±â À§ÇØ Á÷Á¢ Æ÷ÇÔ ÇÑ ¿¤·¹¸àÆ®¸¦ °ËÁ¤ÇÑ´Ù. ÀÌ °úÁ¤Àº Àû¿ë µÉ ¼ö ÀÖ´Â ÁöÁ¤À» ãÀ» ¶§ ±îÁö °è¼ÓµÈ´Ù. ÀÌ ±â´ÉÀº ½ºÅ¸ÀϽ¬Æ®¸¦ °£°áÇÏ°Ô Á¤ÀÇÇϵµ·ÏÇÑ´Ù. ¿¹¸¦ µé¾î Á¦ÀÛÀÚ°¡ BODY ¿¤·¹¸àÆ®¿¡ Àû¿ëµÇ´Â ´ÜÀÏÀÇ ÁöÁ¤À¸·Î BODY ³»ÀÇ ¸ðµç ¿¤·¹¸àÆ®ÀÇ ÆùÆ® Á¾·ùÀ» ÁöÁ¤ ÇÒ ¼ö ÀÖ´Ù.

14.5 »ç¿ëµµ±¸·Î ºÎÅÍ ½ºÅ¸ÀÏ µ¥ÀÌÅÍ °¨Ãß±â

ÀϺΠ½ºÅ¸ÀϽ¬Æ® ¾ð¾îµéÀº ±Ô°Ý¿¡ ¸ÂÁö ¾Ê´Â(non-conforming) »ç¿ëµµ±¸¿¡¼­ Á¦ÀÛÀÚ°¡ STYLE ¿¤·¹¸àÆ®ÀÇ ³»¿ëÀÇ °¨Ã߱⸦ Çã¿ëÇÏ´Â ¹®¹ýÀ» Áö¿øÇÑ´Ù.

ÀÌ ¿¹Á¦´Â ±Ô°Ý¿¡ ¸ÂÁö ¾Ê´Â ¿¾³¯ »ç¿ëµµ±¸¿¡¼­ È®½ÇÈ÷ ÅؽºÆ®·Î Ç¥ÇöÇÏÁö ¾Êµµ·Ï Çϱâ À§ÇÏ¿©, CSS¿¡¼­ STYLE ¿¤·¹¸àÆ®ÀÇ ³»¿ëÀ» ¾î¶»°Ô ³ªÅ¸³»´Â°¡¸¦ ¼³¸íÇÑ´Ù.

<STYLE type="text/css">
<!--
  H1 { color: red }
  P  { color: blue}
-->
</STYLE>

14.6 ½ºÅ¸ÀϽ¬Æ®ÀÇ HTTP Çì´õ(header)¿Í ¿¬°á

ÀÌ Ç׸ñÀº ¿¬°á Çì´õ(Link header) Çʵ带 Á¤ÀÇÇÏ´Â HTTP ¹öÀüÀÇ ±Ô°Ý¿¡ ºÎÇÕÇÏ´Â »ç¿ëµµ±¸µé¿¡ ¸¸ Àû¿ëµÈ´Ù. HTTP 1.1Àº [RFC2616]¿¡ Á¤ÀÇ µÈ ¹Ù¿Í °°ÀÌ ¿¬°á Çì´õ(Link header) Çʵ带 Æ÷ÇÔÇÏÁö ¾Ê´Â´Ù(19.6.3 Ç× ÂüÁ¶)´Â °Í¿¡ À¯ÀÇÇ϶ó.

À¥ ¼­¹ö °ü¸®ÀÚµéÀº ½ºÅ¸ÀϽ¬Æ®¸¦ ÆäÀÌÁöµéÀÇ ±¸·ì¿¡ Àû¿ëµÇµµ·Ï ¼­¹ö¸¦ ±¸¼ºÇÏ´Â °ÍÀÌ Æí¸®ÇÏ´Ù´Â ¾Ë °ÍÀÌ´Ù. HTTP Link Çì´õ´Â °°Àº ¾ÖÆ®¸®ºäÆ®¿Í °ªµéÀ» °®´Â LINK ¿¤·¹¸àÆ®¿Í °°Àº È¿°ú¸¦ °®´Â´Ù. º¹¼ö ¿¬°á Çì´õµéÀº °°Àº ¹è¿­À» °®´Â º¹¼ö(multiple) LINK ¿¤·¹¸àÆ®¿¡ »óÀÀÇÑ´Ù.

¿¹¸¦ µé¸é:

 Link: <http://www.acme.com/corporate.css>; REL=stylesheet

¿¡ »óÀÀÇÏ´Â:

 <LINK rel="stylesheet" href="http://www.acme.com/corporate.css">

¿©·¯°³ÀÇ ´ëü ½ºÅ¸ÀϵéÀ» º¹¼ö Link Çì´õ·Î ÁöÁ¤ÇÏ´Â °ÍÀÌ °¡´ÉÇÏ°í, ±× µðÆúÆ® ½ºÅ¸ÀÏÀ» ¾Ë±â À§ÇÏ¿©, rel ¾ÖÆ®¸®ºäÆ®¸¦ »ç¿ëÇÑ´Ù.

´ÙÀ½ ¿¹Á¦¿¡¼­, rel ¾ÖÆ®¸®ºäÆ®¿¡ Å°¿öµå "alternate"°¡ »ý·«µÇ¾úÀ¸¹Ç·Î, µðÆúÆ®·Î "compact"°¡ Àû¿ëµÈ´Ù.

 Link: <compact.css>; rel="stylesheet"; title="compact"
 Link: <bigprint.css>; rel="alternate stylesheet"; title="big print"

ÀÌ°ÍÀº HTML ¹®¼­°¡ ÀüÀÚ¿ìÆíÀ¸·Î º¸³» Áú ¶§µµ ÀÛ¿ëÇÏ¿©¾ß ÇÑ´Ù. ÀϺΠÀüÀÚ¿ìÆí(email) ´ëÇàÀÚ(agent)´Â [RFC822] Çì´õÀÇ ¼ø¼­¸¦ ¹Ù²Ü ¼ö ÀÖ´Ù. ÀÌ°ÍÀÌ link Çì´õ¿¡¼­ ÁöÁ¤ µÈ ½ºÅ¸ÀϽ¬Æ®¿¡¼­ Ä«½ºÄɵå(cascade) ¼ø¼­¿¡ ¿µÇâÀ» ÁÖ´Â °ÍÀ» ÇÇÇϱâ À§ÇÏ¿©, Á¦ÀÛÀÚ´Â °°Àº Çì´õ ÇʵåÀÇ ¸î °³ ÀÎƮź½º(instance)µéÀ» ¿¡ ÅëÇÕÇϱâ À§ÇÏ¿© Çì´õ(header) ¿¬¼â¸¦ »ç¿ë ÇÒ ¼ö ÀÖ´Ù. µû¿ÈÇ¥´Â ¾ÖÆ®¸®ºäÆ® °ªÀÌ °ø°£À» Æ÷ÇÔ ÇÒ ¶§ ¸¸ ÇÊ¿äÇÏ´Ù. ±ÛÀÚµéÀÇ ÂüÁ¶¸¦ À§ÇÑ °ÍÀÌ ¾Æ´Ï¸é HTTP ¶Ç´Â ÀüÀÚ¿ìÆí Çì´õµé¿¡¼­, ¶Ç´Â°ÔÀÌÆ®¿þÀÌ(gateway)µéÀ» ÅëÇÏ¿© Àü¼Û µÉ ¶§ ¿µÇâÀ» ¹ÌÄ¥ ¼ö ÀÖ´Â SGML ¿£Æ¼Æ¼µéÀÇ »ç¿ëÀº Çã¿ëµÇÁö ¾Ê´Â´Ù.

HTTP Çì´õµé¿¡ ÀÇÇÏ¿© Á¤ÀÇ µÈ LINK¿Í META ¿¤·¹¸àÆ®´Â ¹®¼­ÀÇHEAD¿¡ ÀÖ´Â LINK¿Í META ¿¤·¹¸àÆ®º¸´Ù ¸ÕÀú ³ª¿Àµµ·Ï Á¤ÀǵǾî¾ß ÇÑ´Ù.

ÀÌ Trio ȨÆäÀÌÁö ¹®¼­(http://trio.co.kr/webrefer/html/present/styles.html)´Â ÀÚÀ¯·ÎÀÌ ¿¬°á »ç¿ëÀÌ °¡´ÉÇÔ.