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°¡ ¼·Î ´Ù¸¥ ¹æ½ÄÀ¸·Î ½ºÅ¸ÀÏ ½ÃÆ®¸¦ Áö¿øÇϰí Àֱ⠶§¹®¿¡ ¹®Á¦°¡ ¸¹½À´Ï´Ù.
ÀÌ·¯ÇÑ ¹®Á¦Á¡À» ÃÖ¼ÒÈÇϱâ À§Çؼ´Â ¾ç´ë ºÎ¶ó¿ìÀú°¡ °øÅëÀûÀ¸·Î »ç¿ëÇÏ´Â ¹æ½Ä¸¸À» »ç¿ë ÇÏ´Â °ÍÀÌ ÁÁÀ¸¸ç,
ÀÏ´Ü ÇÑ ºê¶ó¿ìÀú¸¦ Áß½ÉÀ¸·Î Á¦ÀÛÇÑ ´ÙÀ½ ´Ù¸¥ ºê¶ó¿ìÀú¿¡¼µµ ¹«³ÇÏ°Ô Ç¥ÇöµÉ ¼ö ÀÖµµ·Ï
¾à°£ÀÇ ¼öÁ¤ º¸¿ÏÀ» ÇØ Áִ°ÍÀÌ ÃÖ¼±ÀÇ ¹æ¹ýÀÌ ¾Æ´Ò±î »ý°¢ÇÕ´Ï´Ù.
Ãâó : ´ÙÀ½±îÆä-¹Ì³×¸£¹ÙÀÇȨÆäÀÌÁö»ç¶û