Trio ȨÆäÀÌÁö CSS ¸Å´º¾ó CSS ¼Ò°³ ¿¹Á¦ ¸Þ´º·Î
CSS2 ±Ô°Ý ¹ø¿ª¹® ÂüÁ¶ CSS1 ±Ô°Ý ¹ø¿ª¹® ÂüÁ¶
Internet Explorer 4.0 ÀÌ»óÀ» ±âÁØÀ¸·Î ÀÛ¼ºÇÏ´Ù.
CSS(Cascading Style Sheet)¶õ ¹«¾ùÀΰ¡ ?
ÀÎÅÍ³Ý ¹®¼­ÀÇ °¡Àå ÀϹÝÀûÀÎ Çü½ÄÀº HTMLÀÌÁö ¸¸, ¹®¼­¸¦ ÀÚÀ¯·Ó°Ô ÆíÁýÇÏ´Â µ¥¿¡ ¸¹Àº Á¦¾àÀÌ µû¸¥´Ù.
À̸¦ º¸¿ÏÇϱâ À§ÇØ ¸¸µé¾î Áø °ÍÀÌ ½ºÅ¸ÀÏ ½ÃÆ®´Ù.
½ºÅ¸ÀÏ ½ÃÆ®ÀÇ ¹®¹ý°ú Çü½ÄÀº ¿µ¹® W3C ÀÇ Ä«½ºÄÉÀ̵ù ½ºÅ¸ÀϽ¬Æ®(Cascading Style Sheet) ±Ô°Ý ¹ø¿ª¹® CSS1(¿ø¹® CSS1)°ú ¹ø¿ª¹® CSS2(¿ø¹® CSS2)·Î Ç¥ÁØÈ­µÇ¾î ÀÖ´Ù.
³Ý½ºÄÉÀÌÇÁÀÇ Ä¿¹Â´ÏÄÉÀÌÅÍ ver 4.0, ¸¶ÀÌÅ©·Î¼ÒÇÁÆ®ÀÇ ÀͽºÇ÷η¯ ver 3.xÆÇ¿¡¼­ºÎÅÍ CSS1À» Áö¿øÇÔÀ¸·Î½á ¹®¼­ Á¦ÀÛ¿¡¼­ CSSÀÇ ÀÚÀ¯·Î¿î »ç¿ëÀÌ °¡´ÉÇÏ°Ô µÇ¾ú´Ù.

±×·¯³ª, ÀÌ ¾ç ´ë ºê¶ó¿ìÀú°¡ CSS»Ó ¾Æ´Ï¶ó HTML¿¡¼­µµ Ç¥ÁØ ¾ÈÀ» ÀüÀûÀ¸·Î µû¸£°í ÀÖÁö ¾Ê±â ¶§¹®¿¡ ÀÏ¹Ý Á¦ÀÛÀÚµéÀÌ ¹®¼­¸¦ ¸¸µå´Â µ¥¿¡ ¾î·Á¿ò°ú È¥¶õÀ» ¾È°Ü ÁÖ°í ÀÖ´Ù.
ÇöÀç Á¦¾ÈµÇ¾î ÀÖ´Â ¿µ¹® CSS2´Â ¾ç ´ë ºê¶ó¿ìÀú°¡ Àç´ë·Î Áö¿øÇÏÁö ¾Ê¾Æ, ¿©±â¿¡¼­´Â ExplorerÀ» ±âÁØÀ¸·Î ÇÏ¿© CSS1¸¦ Áß½ÉÀ¸·Î ¼Ò°³ÇÏ¿´°í ÀϺΠCSS2µµ »ç¿ëÇÏ¿´´Ù.

ÀÌ°÷¿¡¼­´Â
  • Á¦¾È µÈ CSS¿Í ¾ç´ë ºê¶ó¿ìÀú°¡ Áö¿øÇÏ´Â CSSÀÇ ³»¿ë°ú Çü½ÄµéÀ» ¾Ë¾Æº¸°í
  • ºê¶ó¿ìÀú¿Í °ü°è¾øÀÌ »ç¿ëµÇ´Â ¹®¼­¸¦ ÀÛ¼ºÇÏ´Â ¹æ¹ýÀ» ¾Ë¾Æº¸°í
  • CSSÀÇ ´Ù¾ç ÇÑ È°¿ë ¹æ¹ýÀ» °øºÎÇÏ¿© È¿°úÀûÀÎ µðÀÚÀÎÀ» ÇÒ ¼ö ÀÖµµ·Ï µµ¿òÀ» ÁÖ±â À§ÇÏ¿©
    ÀÚ¼¼ÇÏ°Ô ¼³¸íÀ» ¼ö·ÏÇÑ´Ù.

CSS(Cascading Style Sheet) ÀÇ ÀåÁ¡
  • ±â´É È®À强</span>: HTML ÀÇ ±â´ÉÀ» È®ÀåÇÑ´Ù.
    HTMLÀÇ ´ëºÎºÐÀÇ ¿ä¼ÒµéÀÇ ´Ü¼øÇÑ ±â´É¿¡ ´Ù¾çÇÑ ±â´ÉÀ» Ãß°¡ÇÒ ¼ö ÀÖÀ¸¸ç, ½ÉÁö¾î´Â ±â´ÉÀÇ º¯°æ±îÁö °¡´ÉÇÏ´Ù. ÀÌ·¸°Ô ÇÔÀ¸·Î½á ¹®¼­Á¦ÀÛÀÚ´Â µ¶Æ¯ ÇÑ ¹®¼­Çü½ÄÀ» ¼³°è ÇÒ ¼ö ÀÖ´Ù.
    ¶Ç ÇÑ HTML¿¡¼­ Áö¿øÇÏÁö ¾Ê´Â ´Ù¾ç ÇÑ ÆùÆ® »çÀÌÁî µîÀÇ ±â´Éµµ »ç¿ë ÇÒ ¼ö ÀÖ°Ô µÈ´Ù.

  • ¾ç½ÄÀÇ ¸ðµâÈ­: È帧ÀÌ °°Àº ¹®¼­¾ç½ÄÀ¸·Î Àüü¸¦ ±¸¼º ÇÒ ¼ö ÀÖ´Ù.
    HTML¿¡¼­´Â ¹®¼­ÀÇ Àü¹ÝÀûÀΠƲ¿¡¼­ºÎÅÍ ¼¼ºÎ Ç׸ñ±îÁö ¸Þ¹ø ÀÏÀÏÀÌ ÁöÁ¤ ÇØ ÁÖ¾î¾ß ¸¸ ÇÑ´Ù.
    ±×·¯³ª ½ºÅ¸ÀÏ ½ÃÆ®¸¦ HTML¿¡ ºÎ°¡ÀûÀ¸·Î È°¿ë ÇÔÀ¸·Î½á ÀÏÁ¤ ÇÑ ¾ç½ÄÀ» CSS·Î ÀÛ¼ºÇØ ³õ°í »ç¿ë ÇÒ ¶§ ºÎ¸£±â ¸¸ ÇÏ¸é °°Àº ¾ç½ÄÀ¸·Î Ç¥Çö µÈ´Ù
    ¶Ç ÇÑ CSS¸¦ º¯°æ ÇÔÀ¸·Î½á ¸ðµç °ü·Ã ¹®¼­µéÀÇ Ç¥Çö Çü½ÄÀÌ µ¿½Ã¿¡ º¯°æ µÈ´Ù.

  • °£Æí¼º: ¹®¼­ÀÇ Çü½ÄÀ» ¼Õ ½±°Ô ´Ù¾çÇÏ°Ô ±¸¼ºÇÒ ¼ö ÀÖ´Ù.
    HTML·Î º¹Àâ ÇÑ Ç¥¸¦ ¸¸µå´Â µ¥¿¡ »ó´ç ÇÑ ³ë·ÂÀ» ÇÊ¿ä·Î ÇÑ´Ù. ½ºÅ¸ÀÏ ½ÃÆ®¿¡´Â À̸¦ ±Øº¹ÇÒ ¼ö ÀÖ´Â ´Ù¾çÇÑ ¹æ¹ýÀÌ ÀÖ´Ù. ¹®¼­ÀÇ ÀϺθ¦ Á¦ÀÛÀÚ°¡ ¿øÇÏ´Â À§Ä¡¿¡ ºñ±³Àû ÀÚÀ¯·Ó°Ô ¹èÄ¡ ÇÒ ¼ö ÀÖ´Ù.
    ¶Ç ÇÑ ¹®¹ýÀÌ ¾ÆÁÖ ½¬¿ö ¿ø¸¸ ÇÑ Á¦ÀÛÀÚ´Â ½±°Ô ÀÍÈú ¼ö ÀÖ´Â ÀÕÁ¡ÀÌ ÀÖ´Ù.

  • ÀÏ°ü¼º: »ç¿ë ȯ°æÀÇ ¿µÇâÀ» ¹ÞÁö ¾Ê´Â´Ù.
    HTML¿¡¼­´Â °°Àº ¹®¼­¶óµµ »óȲ¿¡ µû¶óÀÚµ¿ Á¶Àý ±â´É¿¡ ÀÇ ÇØ Flexible ÇÏ°Ô Ç¥ÇöµÇ¾î Æí ÇÒ ¶§µµ ÀÖÁö ¸¸ Á¦ÀÛÀÚ°¡ ÀǵµÇÏÁö ¾ÊÀº ¹æÇâÀ¸·Î Ç¥Çö µÇ´Â °æ¿ì°¡ ¸¹´Ù.
    CSS¸¦ »ç¿ë ÇÑ ¹®¼­´Â ÀÏ°ü¼ºÀÌ ÇöÀúÈ÷ Áõ°¡ µÈ´Ù.

CSS(Cascading Style Sheet) ÀÇ ´ÜÁ¡
  • ¾ç´ë ºê¶ó¿ìÀú°¡ ´Ù¸¥ ¹æ½ÄÀ¸·Î Áö¿ø: °¡Àå Å« °É¸²µ¹Àº Netscape Communicator ¿Í Explorer °¡ ¼­·Î ´Ù¸¥ ¹æ½ÄÀ¸·Î ½ºÅ¸ÀÏ ½ÃÆ®¸¦ Áö¿øÇÏ°í Àֱ⠶§¹®¿¡ ¹®Á¦°¡ ÀÖ¾î ÀÎÅÍ³Ý ¹®¼­ÀÇ Ç¥ÁØÈ­¿¡ Å« °É¸²µ¹ÀÌ µÇ°í ´õ¿í º¸ÆíÈ­ µÇÁö ¸øÇÏ°í ÀÖ´Â °ÍÀÌ´Ù.
    ¹®Á¦Á¡À» ÃÖ¼ÒÈ­Çϱâ À§Çؼ­´Â ¾ç´ë ºÎ¶ó¿ìÀú°¡ °øÅëÀûÀ¸·Î »ç¿ëÇÏ´Â ¹æ½Ä ¸¸À» »ç¿ë ÇÏ´Â °ÍÀÌ ÁÁ´Ù.
  • ±×·¯³ª ¿¹¹ÎÇÑ Ç¥Çö¿¡¼­´Â ¿©·¯°¡Áö·Î ¹®Á¦°¡ ¹ß»ýµÇ´Ï, ¹è¿ì´Â »ç¶÷µéÀº ÇÑ°¡Áö¸¦ ÁßÁ¡ÀûÀ¸·Î °øºÎÇÑ ´ÙÀ½ ´Ù¸¥ ºê¶ó¿ìÀú·Îµµ ¹Ù¸£°Ô Ç¥ÇöÇÏ´Â ¹æ¹ýÀ» Ãß°¡ ÇØ ³ª°¡´Â °ÍÀÌ ÁÁ´Ù. ÀÌ°÷¿¡¼­´Â ´Ù¼Ò º¹ÀáÇϱâ´Â ÇÏÁö¸¸ µÎ°¡Áö ºê¶ó¿ìÀú¸¦ ¼ö¿ëÇϵµ·Ï ³ë·ÂÇÏ¿´À¸³ª, Netscape¿¡¼­´Â »êµíÇÏ°Ô Ç¥Çö µÈÁö ¾Ê´Â °æ¿ì°¡ ¸¹ÀÌ ¹ß»ýÇÑ´Ù.

»ç¿ë¹ý Âü°í
Àû¿ëº¯¼ö
±æÀÌ, ¹éºÐÀ², ...
ÃʱⰪ: µðÆúÆ®(default)
°¡´ÉÇÑ °ªÀ̳ª Ư¼ºÀº ÇöÀç »ö»óÀ¸·Î, µðÆúÆ®(default)´Â ±½°Ô Ç¥Çö Çß½¿.

¼Ò°³ ÀÏ¹Ý ÅؽºÆ® ÆùÆ® ¹Ú½º »ö»ó ¸ñ·Ï »öÀÎ ¿¹Á¦
¹ø¿ª¹® ¼ÒÀ¯ÀÚ - Trio ȨÆäÀÌÁö Á¦°ø
ÀÌ ¹®¼­(http://trio.co.kr/webrefer/css/cssintro.html)´Â
ÀÚÀ¯·ÎÀÌ ¿¬°á »ç¿ëÀÌ °¡´ÉÇÔ.
¿¹Á¦ ¸Þ´º·Î