[±âÃÊ] CSSÀÇ Á¤ÀÇ ¹× Ư¡

  CSS´Â HTML¿¡ Á» ´õ µ¿ÀûÀ̰í È®ÀåµÈ Çü½ÄÀ» Á¦°øÇØ ÁÖ±ä ÇÏÁö¸¸

  ¾ç´ë ºê¶ó¿ìÀú(³Ý½ºÄÉÀÌÇÁ¿Í ÀͽºÇ÷η¯)°¡ ¼­·Î ´Ù¸¥ ¹æ½ÄÀ¸·Î ½ºÅ¸ÀÏ ½ÃÆ®¸¦ Áö¿øÇϰí Àֱ⠶§¹®¿¡ ¹®Á¦°¡ ¸¹½À´Ï´Ù.

  ÀÌ·¯ÇÑ ¹®Á¦Á¡À» ÃÖ¼ÒÈ­Çϱâ À§Çؼ­´Â ¾ç´ë ºê¶ó¿ìÀú°¡ °øÅëÀûÀ¸·Î »ç¿ëÇÏ´Â ¹æ½Ä¸¸À» »ç¿ëÇÏ´Â °ÍÀÌ ÁÁÀ¸¸ç,

  ÀÏ´Ü ÇÑ ºê¶ó¿ìÀú¸¦ Áß½ÉÀ¸·Î Á¦ÀÛÇÑ ´ÙÀ½ ´Ù¸¥ ºê¶ó¿ìÀú¿¡¼­µµ ¹«¸®¾øÀÌ µ¿ÀÛÇÒ ¼ö ÀÖµµ·Ï

  ¾à°£ÀÇ ¼öÁ¤ º¸¿ÏÀ» ÇØ ÁÖ´Â °Íµµ ÁÁÀº ¹æ¹ýÀÏ °ÍÀÔ´Ï´Ù.




  ----------------------------------------------------------------------------------

  [ CSSÀÇ Á¤ÀÇ ¹× Ư¡ ]

  ----------------------------------------------------------------------------------


  CSS¶õ ¾Õ¿¡¼­µµ ¸»ÇßµíÀÌ "Cascading Style Sheets"¸¦ ¸»ÇÕ´Ï´Ù.
  Ç¥ÁØÀ¸·Î Á¦Á¤µÈ HTML¿¡¼­ Áö¿øÇÒ ¼ö ¾ø´Â ´Ù¾çÇÑ ¹®ÀÚÅ©±â³ª ±ÛÀÚü, ÁÙ °£°ÝÀÇ ÁöÁ¤ÀÌ °¡´ÉÇÒ »Ó ¾Æ´Ï¶ó

  ±âÁ¸ÀÇ HTML ÅÂ±× ±â´ÉÀ» È®ÀåÇÏ¿© ¹è°æ»ö»ó µîµµ ÀÚÀ¯·Ó°Ô ¼±ÅÃÇÒ ¼ö ÀÖ½À´Ï´Ù.


  À¥ ¹®¼­ÀÇ °¡Àå ÀϹÝÀûÀÎ Çü½ÄÀº HTMLÀÌÁö¸¸, HTML ¸¸À¸·Î´Â

  ¹®¼­¸¦ ÀÚ½ÅÀÌ ¿øÇÏ´Â ÇüÅ·ΠÀÚÀ¯·Ó°Ô ÆíÁýÇÏ´Â µ¥¿¡ ¸¹Àº Á¦¾àÀÌ µû¸¨´Ï´Ù.

  À̸¦ º¸¿ÏÇϱâ À§ÇØ ¸¸µé¾î Áø °ÍÀÌ ¹Ù·Î ½ºÅ¸ÀÏ ½ÃÆ®Àε¥, ½ºÅ¸ÀÏ ½ÃÆ®ÀÇ ¹®¹ý°ú Çü½ÄÀº ¿µ¹® W3C ÀÇ

  Ä«½ºÄÉÀ̵ù ½ºÅ¸ÀϽ¬Æ®(Cascading Style Sheet) ±Ô°Ý ¹ø¿ª¹® CSS1(¿ø¹® CSS1)°ú ¹ø¿ª¹® CSS2(¿ø¹® CSS2)·Î Ç¥ÁØÈ­µÇ¾î ÀÖ½À´Ï´Ù.


  CSS2´Â W3C¿¡¼­ ±âÁ¸ÀÇ CSS1¿¡ Ãß°¡ÇÏ¿© ±ÔÁ¤ÇÑ ³»¿ëÀ¸·Î ÀúÀÚµé°ú »ç¿ëÀÚµéÀÌ ¹®¼­µéÀÇ ±¸Á¶(¿¹:HTML°ú XML ¹®¼­µî)¿¡


  ½ºÅ¸ÀÏ(±Û²Ã, ÁÙ°£°Ý, »ç¿îµå µî)À» ÷ºÎ ÇÒ ¼ö ÀÖ°ÔÇÏ´Â ½ºÅ¸ÀÏ ½¬Æ® ¾ð¾îÀÔ´Ï´Ù.

  ¹®¼­ÀÇ ³»¿ë°ú ±¸º°ÇÏ¿© ¹®¼­µéÀÇ ½ºÅ¸ÀÏÀ» Ç¥ÇöÇÏ´Â CSS´Â À¥ÀÇ Á¦ÀÛ°ú À¯Áö°ü¸®¸¦ ¿ëÀÌÇϰÔÇØ ÁÝ´Ï´Ù.


  À¥ Á¦ÀÛÀÚ´Â ±× µéÀÇ À¥ ¹®¼­µéÀ» ºê¶ó¿ìÀú, À½¼ºÀåÄ¡, ÇÁ¸°ÅÍ, Á¡ÀÚÀåÄ¡, ÇÚµåÀåÄ¡(handheld device)µî¿¡ ±Ô°Ý¿¡ ¸Â°Ô

  Ç¥ÇöÇÒ ¼ö ÀÖµµ·Ï ÇØ ÁÖ¸ç ³»¿ëÀÇ À§Ä¡, ´Ù¿î·Îµå ÇÒ ¼ö ÀÖ´Â ±Û²Ã, Å×À̺íÀÇ ¹è¿­, ±¹Á¦È­ Áö¿ø ±â´É, ÀÚµ¿ Ä«¿îÅÍ, ¹øÈ£ ºÙÀ̱â¿Í

  »ç¿ëÀÚ ÀÎÅÍÆäÀ̽º¿Í °ü°è µÈ ÀϺΠƯ¼ºÀÇ ±â´Éµµ Áö¿øÇØ ÁÝ´Ï´Ù.


  CSS´Â ½±°Ô ¸»ÇØ À¥¹®¼­, ASP³ª ±âŸ CGI µîÀÇ ´Ù¾çÇÑ À¥°ü·Ã ¹®¼­¿¡ »ðÀÔÇØ¼­ »ç¿ëÇÒ ¼ö ÀÖÀ¸¸ç,

  ´Ü¼øÈ­µÈ À¥¹®¼­¿¡ ½ºÅ¸ÀÏÀ» ÁöÁ¤ÇØ ÁÙ ¼ö ÀÖ´Â È®Àå±â´ÉÀ̶ó »ý°¢À» ÇÏ¸é µË´Ï´Ù.


  ÀÏ¹Ý À¥¹®¼­¿¡¼­ »ç¿ëÇÒ ¼ö ¾ø´Â ±ÛÀÚÅ©±â³ª ÁÙ°£°Ýµî ¹Ì¼¼ÇÑ ºÎºÐ±îÁö CSS¿¡¼­ Áö¿øÀ» ÇØ ÁֹǷΠÀ¥¹®¼­¸¦ Á» ´õ °³¼ºÀÖ°í,

  ¶Ç Æí¸®ÇÏ°Ô ÀÛ¾÷Çϵµ·Ï µµ¿ÍÁÝ´Ï´Ù.




  CSSÀÇ ´Ù¾çÇÑ ±â´É¼ºÀº Æí¸®Çϰí È®ÀåµÈ À¥¹®¼­¸¦ ÀÛ¼ºÇÏ°Ô ÇØ ÁÖÁö¸¸ ºê¶ó¿ìÀúÀÇ Á¾·ù¿Í ¹öÀü¿¡ µû¶ó Àû¿ëµÇÁö ¾Ê´Â ±â´Éµéµµ ÀÖÀ¸¹Ç·Î ÀûÀýÇϰÔ
  Àß È°¿ëÇØ ÁÖ¾î¾ß ÇÕ´Ï´Ù.

  CSSÀÇ Æ¯Â¡µé°ú Àå, ´ÜÁ¡À» »ìÆìº¸°í º» °­ÀǸ¦ ÁøÇàÇϵµ·Ï ÇϰڽÀ´Ï´Ù.



----------------------------------------------------------------------------------

  ¢Ã CSS(Cascading Style Sheet)ÀÇ ÀåÁ¡

  ----------------------------------------------------------------------------------


  ±â´É È®À强:

  HTMLÀÇ ´ëºÎºÐÀÇ ¿ä¼ÒµéÀÇ ´Ü¼øÇÑ ±â´É¿¡ ´Ù¾çÇÑ ±â´ÉÀ» Ãß°¡ÇÒ ¼ö ÀÖÀ¸¸ç,

  ½ÉÁö¾î´Â ±â´É±îÁöµµ º¯°æÇÒ ¼ö ÀÖÀ¸¹Ç·Î ȨÆäÀÌÁö Á¦ÀÛÀÚ´Â ÀڽŸ¸ÀÇ µ¶Æ¯ÇÑ ¹®¼­Çü½ÄÀ» ¼³°è ÇÒ ¼ö ÀÖÀ¸¸ç,

  HTML¿¡¼­ Áö¿øÇÏÁö ¾Ê´Â ´Ù¾çÇÑ ÆùÆ® »çÀÌÁî¿Í ÁÙ°£°Ý µîÀÇ ±â´Éµµ »ç¿ë °¡´ÉÇÕ´Ï´Ù.




  ¾ç½ÄÀÇ ¸ðµâÈ­:

  Àüü À¥ »çÀÌÆ®¿¡ °°Àº ¹®¼­¾ç½ÄÀ¸·Î Àüü¸¦ ±¸¼º ÇÒ ¼ö ÀÖ½À´Ï´Ù.

  ½ºÅ¸ÀÏ ½ÃÆ®¸¦ HTML¿¡ ºÎ°¡ÀûÀ¸·Î Ȱ¿ëÇÏ¿© ÀÏÁ¤ÇÑ ¾ç½ÄÀ» CSS·Î ÀÛ¼ºÇØ ³õ°í ¹®¼­¸¶´Ù ºÒ·¯¼­ »ç¿ëÇϸé

  Àüü ¹®¼­°¡ °°Àº ¾ç½ÄÀ¸·Î ÅëÀϰ¨ ÀÖ°Ô ±¸¼ºµÉ ¼ö ÀÖ½À´Ï´Ù.


  ½ºÅ¸ÀÏ¿¡ º¯°æÀÌ »ý±æ °æ¿ì¿¡µµ ¹®¼­¸¦ ÇϳªÇϳª ¼öÁ¤ÇÒ ÇÊ¿ä¾øÀÌ CSSÆÄÀϸ¸ º¯°æ ÇÔÀ¸·Î½á

  ¸ðµç °ü·Ã ¹®¼­µéÀÌ ÇѲ¨¹ø¿¡ º¯°æµÇ¹Ç·Î º¹ÀâÇÑ ´ë¿ë·®ÀÇ »çÀÌÆ®¿¡¼­ ¾ÆÁÖ À¯¿ëÇÏ°Ô »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù.




  °£Æí¼º:

  ¹®¼­ÀÇ Çü½ÄÀ» ½±°í ´Ù¾çÇÏ°Ô ±¸¼ºÇÒ ¼ö ÀÖ½À´Ï´Ù. º¹ÀâÇÑ ÇüÅÂÀÇ Ç¥µµ ½±°Ô Á¦ÀÛÇϸç

  °¢ ¿ä¼Ò¸¦ ¹®¼­ÀÇ ¿øÇÏ´Â À§Ä¡¿¡ ÀÚÀ¯·Ó°Ô ¹èÄ¡ ÇÒ ¼ö ÀÖ½À´Ï´Ù.




  ----------------------------------------------------------------------------------

  ¢Ã CSS(Cascading Style Sheet) ÀÇ ´ÜÁ¡

  ----------------------------------------------------------------------------------


  ¾ç´ë ºê¶ó¿ìÀú°¡ ´Ù¸¥ ¹æ½ÄÀ¸·Î Áö¿ø:

  HTML¿¡¼­µµ ¸¶Âù°¡Áö·Î ¾ç´ë ºê¶ó¿ìÀúÀÇ È£È¯¼º¿¡ ¾à°£ÀÇ ¹®Á¦¸¦ °¡Áö°í ÀÖÁö¸¸,

  Æ¯È÷ CSS´Â Netscape¿Í Explorer°¡ ¼­·Î ´Ù¸¥ ¹æ½ÄÀ¸·Î ½ºÅ¸ÀÏ ½ÃÆ®¸¦ Áö¿øÇϰí Àֱ⠶§¹®¿¡ ¹®Á¦°¡ ¸¹½À´Ï´Ù.

  ÀÌ·¯ÇÑ ¹®Á¦Á¡À» ÃÖ¼ÒÈ­Çϱâ À§Çؼ­´Â ¾ç´ë ºÎ¶ó¿ìÀú°¡ °øÅëÀûÀ¸·Î »ç¿ëÇÏ´Â ¹æ½Ä¸¸À» »ç¿ë ÇÏ´Â °ÍÀÌ ÁÁÀ¸¸ç,

  ÀÏ´Ü ÇÑ ºê¶ó¿ìÀú¸¦ Áß½ÉÀ¸·Î Á¦ÀÛÇÑ ´ÙÀ½ ´Ù¸¥ ºê¶ó¿ìÀú¿¡¼­µµ ¹«³­ÇÏ°Ô Ç¥ÇöµÉ ¼ö ÀÖµµ·Ï

  ¾à°£ÀÇ ¼öÁ¤ º¸¿ÏÀ» ÇØ Áִ°ÍÀÌ ÃÖ¼±ÀÇ ¹æ¹ýÀÌ ¾Æ´Ò±î »ý°¢ÇÕ´Ï´Ù.

  



Ãâó : ´ÙÀ½±îÆä-¹Ì³×¸£¹ÙÀÇȨÆäÀÌÁö»ç¶û