Ã¥ ¼Ò°³
¼º°øÀûÀÎ À¥ »çÀÌÆ®¸¦ Á¦ÀÛÇϱâ À§ÇÑ ¡ºÀ¥ Ç¥ÁØ¡»°ú ¡º¹æÅºÀ¥¡»À» Çϳª·Î ¹­¾ú´Ù.

¡ºÀ¥ 2.0À» À̲ô´Â ¹æÅºÀ¥¡»Àº Ç¥ÁØÈ­¸¦ ¾î¶»°Ô ½ÃÀÛÇÏ°í ¹«¾ùÀ» Ç¥ÁØÈ­ ½ÃÄÑ¾ß ÇÏ´ÂÁö ¾Ë·ÁÁÖ´Â °¡ÀÌµå ºÏÀ¸·Î ±âÁ¸ÀÇ À¥ »çÀÌÆ®µéÀ» »ç·Ê·Î µé¾î ¹®Á¦Á¡À» ÁöÀûÇÏ¿© ºÐ¼®Çϰí ÀÖ´Ù.
¡ºÀ¥Ç¥ÁØ¡»¿¡¼­´Â ¿©·¯ °¡Áö À¥ Ç¥ÁØ °³³äÀÇ À̷аú ½Ç½ÀÀ» ´Ù·ç¸ç, ½±°Ô ÀÌÇØÇÒ ¼ö ÀÖµµ·Ï ¹®Á¦¿¡ ´ëÇØ ¿©·¯ °¡Áö ´Ù¸¥ ÇØ°á¹æ¹ýÀ» º¸¿©ÁØ´Ù. °¢ ¹æ¹ý¿¡ ´ëÇØ¼­´Â ÀåÁ¡°ú ´ÜÁ¡À» µûÁ®°¡¸ç »ó¼¼ÇÏ°Ô ¼³¸íÇÏ¸ç ¶Ç °¢ ÀåÀÇ ¸¶Áö¸· ºÎºÐ¿¡´Â ½ÉÈ­ ÇнÀÀ» Á¦°øÇØ ±× Àå¿¡¼­ ¼³¸íÇÑ ³»¿ë°ú °ü·ÃµÈ °í±Þ ¸¶Å©¾÷°ú CSS¿¡ ´ëÇØ¼­ ¼Ò°³Çϰí ÀÖ´Ù.


[ SET ±¸¼º: Àü 2±Ç ]

1)¡º½Ç¿ë ¿¹Á¦·Î ¹è¿ì´Â À¥ Ç¥ÁØ¡»
2)¡ºÀ¥ 2.0À» À̲ô´Â ¹æÅºÀ¥¡»


[ ¡º½Ç¿ë ¿¹Á¦·Î ¹è¿ì´Â À¥ Ç¥ÁØ¡» ¼Ò°³ ]

À¥ Ç¥ÁØÀ» ÀÌ¿ëÇØ »çÀÌÆ®¸¦ ±¸ÇöÇÏ¸é ¾î¶² ÀåÁ¡ÀÌ ÀÖÀ»±î?
ÀÌ Ã¥Àº À¥ Ç¥ÁØÀÇ ÀåÁ¡À» ÀÌÇØÇϱâ À§ÇÑ Çʼö ¾È³»¼­ÀÔ´Ï´Ù.


XHTML°ú CSS °°Àº À¥ Ç¥ÁØÀº ÀÌ¹Ì ¸¹ÀÌ ¾Ë·ÁÁø ±â¼úÀÔ´Ï´Ù. À¥ °ü·Ã Á÷Á¾¿¡ ÀÖ´Ù¸é À¥ Ç¥ÁØ¿¡ ´ëÇØ¼­ µé¾îºÃÀ» °ÍÀÔ´Ï´Ù. ÇÏÁö¸¸ À¥ Ç¥ÁØÀ» Áö¿øÇÏ´Â À¥ ºê¶ó¿ìÀú°¡ Á¡Â÷ ´Ã¾î°¡°í ÀÖ°í, À¥ µðÀÚÀÌ³Ê¿Í À¥ °³¹ßÀÚ°¡ À¥ Ç¥ÁØÀÌ ÁÖ´Â ½ÇÁúÀûÀÎ ÀÌÁ¡À» ÀÌÇØÇϰí À̸¦ ÁؼöÇÏ·Á°í ÇÏ´Â ¿òÁ÷ÀÓÀÌ ¸¹¾ÆÁö°í´Â ÀÖÁö¸¸, À¥ Ç¥ÁØÀ¸·Î »çÀÌÆ®¸¦ ±¸ÃàÇÏ´Â °ÍÀº ¾ÆÁ÷±îÁö ½¬¿î ÀÏÀº ¾Æ´Õ´Ï´Ù. À¥ Ç¥ÁØÀÇ ÇýÅÃÀ» ¿Ïº®ÇÏ°Ô ÀÌÇØÇϰí À¥ Ç¥ÁØÀ» ÀÌ¿ëÇØ È¿À²ÀûÀ¸·Î »çÀÌÆ®¸¦ ±¸ÇöÇØ¾ß¸¸ ºñ·Î¼Ò À¥ Ç¥ÁØÀÇ Áø¼ö¸¦ ¾Æ´Â °ÍÀÔ´Ï´Ù.

À¥ Ç¥ÁØ °¡À̵å´Â 16Àå°ú ºÎ·ÏÀ¸·Î ±¸¼ºµÅÀÖ½À´Ï´Ù. °¢ Àå¿¡¼­´Â ¿©·¯ °¡Áö À¥ Ç¥ÁØ °³³äÀÇ À̷аú ½Ç½ÀÀ» ´Ù·ç¸ç, ½±°Ô ÀÌÇØÇÒ ¼ö ÀÖµµ·Ï ¹®Á¦¿¡ ´ëÇØ ¿©·¯ °¡Áö ´Ù¸¥ ÇØ°á¹æ¹ýÀ» º¸¿©ÁÝ´Ï´Ù. ÀÌ Ã¥À» ÅëÇØ ´Ù´Ü ·¹À̾ƿô, À̹ÌÁö ¹Ù²ãÄ¡±â, Å×À̺í°ú ¸®½ºÆ® Á¦´ë·Î »ç¿ëÇϱ⠵îÀÇ ¹æ¹ýÀ» ¹è¿ï ¼ö ÀÖ½À´Ï´Ù. ÀÌ·± Á¢±Ù¹æ¹ýÀ» ÅëÇØ¼­ À¥ Ç¥ÁØÀÇ ÇٽɻçÇ×À» ºü¸£°Ô ÀÌÇØÇÏ°í ¼ÒÈ­ÇØ Á¦´ë·Î Ȱ¿ëÇÒ ¼ö ÀÖÀ» °ÍÀÔ´Ï´Ù.

- XHTML ¼Ò½º¸¦ °¡º±°í ÃÖÀûÈ­½ÃÄÑ ÀÌÇØÇϱ⠽±°Ô ÀÛ¼ºÇÏ´Â ¿Ã¹Ù¸¥ ¹æ¹ý
- À¥ ÆäÀÌÁö¸¦ ±¸¼ºÇÏ´Â ¿¤¸®¸ÕÆ®¸¦ ´Ù¾çÇÏ°Ô ²Ù¹Ð ¼ö ÀÖ´Â CSS Ȱ¿ë¹ý
- ½±°í È¿À²ÀûÀÎ À¥ ÆäÀÌÁö ·¹À̾ƿô ±¸¼º¹æ¹ý
- µ¿ÀÏÇÑ °á°ú¹°À» ¸¸µé¾î ³»´Â ´Ù¾çÇÑ ±¸Çö ¹æ¹ý
- ÃֽŠÀ¥ µðÀÚÀÎ Å×Å©´Ð°ú ±×¿¡ µû¸¥ À¯ÀÇÁ¡ ¼Ò°³


[ ¡ºÀ¥ 2.0À» À̲ô´Â ¹æÅºÀ¥¡»¼Ò°³ ]

¸µÅ©¸¦ Ŭ¸¯ÇϽøé Ã¥¿¡ ½Ç¸° ¿¹Á¦ È­¸éÀ» º¼ ¼ö ÀÖ½À´Ï´Ù. ±âÁ¸¿¡ ¿ì¸®°¡ ¾î¶»°Ô Çϰí ÀÖ¾ú´ÂÁö, ¿Ö ±×°Ô À߸øµÆ´ÂÁö, À̸¦ ¹æÁöÇÏ·Á¸é ¾î¶»°Ô ÇØ¾ß ÇÏ´ÂÁö¿¡ ´ëÇÑ ÀÚ¼¼ÇÑ ³»¿ëÀº Ã¥¿¡¼­ »ìÆì º¸½Ã±â ¹Ù¶ø´Ï´Ù.

1Àå. ÀÚÀ¯·Î¿î ±Û²Ã Å©±â (¿µ¹® / ÇÑ±Û )
2Àå. Å©±âÁ¶ÀýÀÌ µÇ´Â ³»ºñ°ÔÀÌ¼Ç ¸Þ´º¹Ù (¿µ¹® / ÇÑ±Û )
3Àå. ³ô³·À̰¡ Á¶ÀýµÇ´Â Çà ¸¸µé±â (¿µ¹® / ÇÑ±Û )
4Àå. ³ª¸¸ÀÇ float Ȱ¿ëºñ¹ý (¿µ¹® / ÇÑ±Û )
5Àå. ±úÁöÁö ¾Ê´Â »óÀÚ ¸¸µé±â (¿µ¹® / ÇÑ±Û )
6Àå. À̹ÌÁö, CSS ¾øÀ̵µ º¼ ¼ö ÀÖ°Ô ¸¸µé±â (¿µ¹® / ÇÑ±Û )
7Àå. ½±°Ô º¯È¯ÇÒ ¼ö ÀÖ´Â Å×ÀÌºí ¸¸µé±â (¿µ¹® / ÇÑ±Û )
8Àå. À¯µ¿ÀûÀÎ ·¹À̾ƿô ¸¸µé±â 2´Ü(¿µ¹® / ÇÑ±Û ) 3´Ü (¿µ¹® / ÇÑ±Û )
9Àå. Á¾ÇտϰáÆí (¿µ¹® / ÇÑ±Û )


[ ÀÌ Ã¥ÀÇ ÁÖ¿ä ³»¿ë ]

¢À »ç¿ëÀÚ°¡ Á÷Á¢ ±Û²Ã Å©±â¸¦ Á¶ÀýÇÒ ¼ö ÀÖµµ·Ï Ű¿öµå¿Í ÆÛ¼¾Æ®°ªÀ» »ç¿ëÇÏ´Â ¹æ¹ý
¢À ÅØ½ºÆ® ºÐ·®°ú ±Û²Ã Å©±â¿¡ µû¶ó ´Ã¾î³ª´Â ³»ºñ°ÔÀÌ¼Ç ¸Þ´º¹Ù¸¦ ¸¸µå´Â ¹æ¹ý
¢À °¡·ÎÇü µðÀÚÀÎ ¿ä¼Ò°¡ ¼¼·Î¹æÇâÀ¸·Î È®ÀåµÉ ¼ö ÀÖ°Ô ÇÏ´Â ¹æ¹ý
¢À °ÝÀÚÇü µðÀÚÀÎÀ» ¸¸µé±â À§ÇØ floatÀ» Ȱ¿ëÇÏ´Â ¹æ¹ý
¢À ¿¹»óÄ¡ ¸øÇÑ »óȲ±îÁö ´ëºñÇÒ ¼ö ÀÖ´Â ¹Ú½º ÇüÅ µðÀÚÀÎ ¹æ¹ý
¢À À̹ÌÁö³ª CSS°¡ ¾øÀ» °æ¿ì¿¡µµ ³»¿ëÀ» ¹«¸® ¾øÀÌ ÀÐÀ» ¼ö ÀÖ´Â ÆäÀÌÁö Á¦ÀÛ ¹æ¹ý
¢À µ¥ÀÌÅÍ Å×ÀÌºí ¾È¿¡ ÀÖ´Â ¸ð¾ç ²Ù¹Ì±â¿ë Äڵ带 °È¾î³»°í CSS·Î ´ëÄ¡ÇÏ´Â ¹æ¹ý
¢À ÀÚÀ¯ÀÚÀç·Î ´Ã¾î³µ´Ù ÁÙ¾îµé¾ú´Ù ÇÏ´Â ´Ù¾çÇÑ ÆäÀÌÁö ·¹À̾ƿôÀ» ¸¸µå´Â ¹æ¹ý


¹æÅºÀ¥À̶õ

¿Ïº®ÇÑ ¹æÅºÀÌ µÇ´Â ¹æÅºÁ¶³¢¸¦ ¸¸µé±â À§Çؼ­ Áö¼ÓÀûÀ¸·Î ³ë·ÂÇÏÁö¸¸, ¹æÅºÁ¶³¢°¡ 100ÆÛ¼¾Æ® ¿Ïº®ÇÏ°Ô ½Åº¯º¸È£¸¦ º¸ÀåÇØ ÁÖÁö´Â ¾Ê½À´Ï´Ù. ÇÏÁö¸¸ ¹æÅºÁ¶³¢¸¦ ÀÔ´Â °Í°ú ÀÔÁö ¾Ê´Â °ÍÀ» ºñ±³ÇÒ ¼ö´Â ¾øÀ» °Ì´Ï´Ù. À¥ »çÀÌÆ® ±¸Ãà °ü·Ã ±â¹ý¿¡¼­µµ ÀÌ ±ÔÄ¢Àº ±×´ë·Î Àû¿ëµË´Ï´Ù. ÃÖ´ëÇÑ ´Ù¾çÇÑ Á¶°Ç¿¡¼­µµ Àß º¸ÀÌ´Â À¯¿¬ÇÑ À¥ ÆäÀÌÁö¸¦ ¸¸µé±â À§ÇØ ÇÊ¿äÇÑ ´Ü°è¸¦ Á¦´ë·Î ¹â¾Æ³ª°¥ ¶§ Á¤¸» È®¿¬È÷ ´Ù¸¥ °á°ú¹°À» ¸¸µé ¼ö ÀÖ½À´Ï´Ù. Áï Áö¼ÓÀûÀÎ °úÁ¤À̶ó´Â °ÍÀÔ´Ï´Ù. À̸¦ ÅëÇØ Àǹ̸¦ »ì¸° XHTML°ú CSS °°Àº À¥ Ç¥ÁØÀ» Ȱ¿ëÇÑ ¸ÚÁø µðÀÚÀÎÀ» Á» ´õ ½±°Ô ÇÒ ¼ö ÀÖ½À´Ï´Ù.

ÃÖ±Ù ¸î ³â°£ CSSÀ¸·Î ·¹À̾ƿôÀ» ¸¸µç »çÀÌÆ®°¡ ¸¹¾ÆÁö¸é¼­ CSS¸¦ Á¦´ë·Î Ȱ¿ëÇÏ´Â ¹æ¹ý¿¡ ´ëÇÑ °ü½Éµµ ³ô¾ÆÁö°í ÀÖ½À´Ï´Ù. ÀÌ·¸°Ô CSS ±â¹ÝÀÇ µðÀÚÀÎÀ» ÇÏ´Â ¸ñÀûÀº ÀûÀº ÄÚµå¾ç, ³ôÀº Á¢±Ù¼º°ú À¯Áöº¸¼ö¼º µî µðÀÚÀÎ °üÁ¡¿¡¼­ ÃëÇÒ ¼ö ÀÖ´Â ±â¼úÀûÀÎ ÀåÁ¡À» ¾ò°íÀÚ ÇÏ´Â µ¥ ÀÖ½À´Ï´Ù. ÇÏÁö¸¸ ´ÜÁö CSS¿Í XHTMLÀ» »ç¿ëÇÑ´Ù°í ÇØ¼­ ÀúÀý·Î ¸ðµç °ÍÀÌ ÁÁ¾ÆÁöÁö´Â ¾Ê½À´Ï´Ù. ÇÙ½É ³»¿ë°ú µðÀÚÀÎÀ» ºÐ¸®ÇÏ¿© ³ôÀº À¯¿¬¼ºÀ» Ãß±¸ÇÒ ¶§, À¥À» ÀÌ¿ëÇÏ´Â ¸ðµç »ç¶÷µé¿¡°Ô Á» ´õ ³ªÀº µðÀÚÀÎÀ» Á¦°øÇÒ ¼ö ÀÖ½À´Ï´Ù.

¿Ö Áß¿äÇѰ¡

ÀÌ Ã¥À» óÀ½ ±¸»óÇÒ ÁîÀ½ ÈǸ¢ÇÑ À¥ µðÀÚÀÎÀº µÎ °¡Áö ¿ä¼Ò¸¦ °®Ãç¾ß ÇÑ´Ù´Â »ý°¢ÀÌ µé¾ú½À´Ï´Ù. ÇÑ °¡Áö ¿ä¼Ò´Â ¿Ï¼ºµÈ ÆäÀÌÁö¸¦ ÅëÇØ¼­ ¹æ¹®ÀÚµéÀÌ º¸°Ô µÉ ºñÁÖ¾óÇÑ ±¸¼º¿ä¼ÒÀÔ´Ï´Ù. ÀÌ´Â µðÀÚÀ̳ʰ¡ Á¶È­·Ó°Ô ¸¸µç ±×·¡ÇÈ À̹ÌÁö, »ö»ó, ŸÀÌÆ÷±×·¡ÇÇ·Î ±¸¼ºµË´Ï´Ù. CSS Á¨ °¡µç(www.csszengarden.com)¿¡ ¹æ¹®Çغ¸½Ã¸é XHTML°ú CSS¸¦ ÀÌ¿ëÇØ¼­ ¾ó¸¶³ª ¸ÚÁø ºñÁÖ¾ó µðÀÚÀÎÀ» °®Ãâ ¼ö ÀÖ´ÂÁö ½±°Ô ¾Ë ¼ö ÀÖÀ» °ÍÀÔ´Ï´Ù.

ÈǸ¢ÇÑ À¥ µðÀÚÀÎÀ» ±¸¼ºÇÏ´Â µÎ¹øÂ° ¿ä¼Ò´Â ¹æÅºÀ¥ Ư¼ºÀ» °®µµ·Ï ±¸ÃàÇÏ´Â °ÍÀÔ´Ï´Ù. ¹Ù·Î ÀÌ Á¡ÀÌ ÀÌ Ã¥¿¡¼­ ÁßÁ¡ÀûÀ¸·Î ´Ù·ç°íÀÚ ÇÏ´Â ¿ä¼ÒÀ̱⵵ ÇÕ´Ï´Ù. XHTML°ú CSS¸¦ ¾²¸é ÀÌ·± ÀåÁ¡À» ½±°Ô ¾òÀ» ¼ö ÀÖ½À´Ï´Ù. ¶ÇÇÑ À¯¿¬Çϸ鼭µµ ½±°Ô ÁÖº¯È¯°æ¿¡ ÀûÀÀ°¡´ÉÇϰí Á¢±Ù¼ºÀÌ ³ôÀ¸¸é¼­µµ ¸ÚÁø ¸ð¾çÀ» °®´Â À¥ µðÀÚÀÎÀ» Çϱâ À§ÇØ À¥ Ç¥ÁØÀÇ ÀåÁ¡À» ÀÌ¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù.

XHTML°ú CSS °°Àº À¥ Ç¥ÁØ µµÀÔÀÌ ºü¸£°Ô È®»êµÇ¸é¼­ Ç¥ÁØÀÇ ¿Ã¹Ù¸¥ Ȱ¿ë¹ý°ú, °¡Àå ÀûÇÕÇÑ ±¸Çö ¹æ¹ý¿¡ ´ëÇØ¼­ ¼³¸íÇÏ´Â ÀÚ·á¿¡ ´ëÇÑ Çʿ伺µµ Á¡Á¡ ´õ ³ô¾ÆÁö°í ÀÖ½À´Ï´Ù.


[ ÀÌ Ã¥ÀÇ ±¸¼º ]

ÀÌ Ã¥Àº °¢ À帶´Ù ¹æÅºÀ¥À» ¸¸µå´Â ¹æ¹ý¿¡ ´ëÇØ¼­ ¼Ò°³ÇÕ´Ï´Ù. ÇöÀç Á¸ÀçÇϰí ÀÖ´Â À¥ »çÀÌÆ®ÀÇ µðÀÚÀÎÀ» »ìÆìº¸°í, ±âÁ¸ ¹æ½ÄÀÇ ¹®Á¦Á¡¿¡ ´ëÇØ¼­ ¸ÕÀú »ìÆìº¾´Ï´Ù. ±×·¯°í³ª¼­ XHTML°ú CSS¸¦ Ȱ¿ëÇØ À¯¿¬¼ºÀÌ ³ôÀ¸¸é¼­µµ ÀûÀº ¾çÀÇ Äڵ带 ÀÛ¼ºÇÕ´Ï´Ù.

´ëºÎºÐÀÇ ¿¹Á¦µéÀº ÆäÀÌÁö¿¡ µé¾î°¡´Â µðÀÚÀÎ ±¸¼º¿ä¼ÒµéÀÔ´Ï´Ù. °¢ ±¸¼º¿ä¼ÒµéÀÌ ¾î¶»°Ô ¹æÅºÀ¥À» ±¸¼ºÇذ¡´ÂÁö ½±°Ô º¼ ¼ö ÀÖÀ» °ÍÀÔ´Ï´Ù. ¸¶Áö¸· ÀåÀº ¾Õ¼­ »ìÆìº» °³º° ¿¹Á¦µéÀ» ÀÌ¿ëÇØ¼­ ¿Ïº®ÇÑ ÇÑ ÆäÀÌÁö¸¦ ±¸¼ºÇغ¼ °ÍÀÔ´Ï´Ù. °¢ ¿¹Á¦ÀÇ ±â¹ýµéÀ» ´Ù½Ã Çѹø º¹½ÀÇϸ鼭 °¢°¢À» Çѵ¥ ¸ðÀº ÆäÀÌÁö¸¦ ¸¸µé¾î º¸°Ú½À´Ï´Ù.

°¢ ¿¹Á¦µéÀº ´Ü°èº°·Î ±¸¼ºµÇ¾î À־ XHTML°ú CSS Ãʺ¸ÀÚ¶óµµ ½±°Ô µû¶óÇÒ ¼ö ÀÖÀ» °ÍÀÔ´Ï´Ù. ÀÌ·± °úÁ¤À» ÅëÇØ¼­ À¥ Ç¥ÁØÀÌ °¡Á®´Ù ÁÖ´Â ÀÌÁ¡°ú °¢ ÁöħµéÀ» ÁؼöÇÒ ¶§ Á» ´õ °ß°íÇÑ ¹æÅºÀ¥ÀÌ µÇ´Â ÀÌÀ¯¿¡ ´ëÇØ¼­ ¼³¸íÇϰڽÀ´Ï´Ù.