|
|
|
The Book of CSS3 : ÀÎÅÍ·¢Æ¼ºê À¥À» ±¸ÇöÇϱâ À§ÇÑ CSS3ÀÇ ¿ø¸®¿Í ÇÙ½É
|
|
|
¿¡ÀÌÄÜ À¥ ÇÁ·ÎÆä¼Å³Î ½Ã¸®Áî1
¤Ó ÇÇÅÍ °³½ºÅë(Peter Gasston), µ¿ÁØ»ó
¤Ó
¿¡ÀÌÄÜÃâÆÇ
¤Ó
The Book of CSS3
|
|
|
|
- Á¦ÈÞ¸ô ÁÖ¹® ½Ã °í°´º¸»ó, ÀϺΠÀ̺¥Æ® Âü¿© ¹× ÁõÁ¤Ç° ÁõÁ¤, ÇÏ·ç/´çÀÏ ¹è¼Û¿¡¼ Á¦¿ÜµÇ¹Ç·Î Âü°í ¹Ù¶ø´Ï´Ù.
-
-
-
[The Book of CSS3]Àº ÇÔÃàÀûÀÎ ±â¼ú¾ð¾î·Î ÀÛ¼ºµÈ CSS3 ¸í¼¼¼ÀÇ ³»¿ëÀ» ÀÌÇØÇϱ⠽¬¿î ¹æ½ÄÀ¸·Î ¼³¸íÇÏ°í, Áö±Ý ´çÀå ¸ðµç ºê¶ó¿ìÀú¿¡¼ CSS3·Î ÇÒ ¼ö ÀÖ´Â ÀÏÀ» ÇÑ´«¿¡ º¸¿©ÁØ´Ù. ¾Æ¿ï·¯ ÇöÀå°¨ ³ÑÄ¡´Â ¿¹Á¦¿Í ÁÁÀº µðÀÚÀο¡ ´ëÇÑ ¿øÄ¢À» ¹ÙÅÁÀ¸·Î CSS È°¿ë ´É·ÂÀ» È®Àå½ÃÄѼ Æò¹üÇÑ ¸¶Å©¾÷ ¹®¼¸¦ ³î¶øµµ·Ï ½ºÅ¸ÀÏÀÌ »ì¾ÆÀÖ´Â À¥ ÆäÀÌÁö·Î ¹Ù²Ü ¼ö ÀÖ´Â ¹æ¹ýÀ» ¼³¸íÇÑ´Ù.
-
-
¡Ú ¿ä¾à ¡Ú
CSS3¸¦ ½Ç¹«¿¡ »ç¿ëÇÒ À¥ µðÀÚÀÌ³Ê¿Í °³¹ßÀÚ¸¦ À§ÇÑ Ã¥. À̷аú ½Ç¹«¸¦ °âºñÇÑ 15³â °æ·ÂÀÇ CSS3 ºÐ¾ßÀÇ Àü¹®°¡ÀÎ ÀúÀÚ´Â ¹Ìµð¾îÄõ¸®, CSS ¼±ÅÃÀÚ, ¸ðÁ¶ Ŭ·¡½º, ´ÙÁß Ä®·³, CSS ¾Ö´Ï¸ÞÀÌ¼Ç µî Çö´ë À¥ µðÀÚÀο¡¼ °Á¶µÇ´Â CSS3ÀÇ ÁÖ¿ä ±â¹ýÀ» »ó¼¼È÷ ¼³¸íÇÏ°í, ±× ¸ðµç ½Ã°¢ÀûÀÎ °á°ú¸¦ »ó¼¼È÷ º¸¿©ÁØ´Ù. ¶Ç, Ç÷º¼ºí ¹Ú½º ·¹À̾ƿô, ÅÛÇø´ ·¹À̾ƿô, CSS °è»êÇÔ¼ö¿Í »çÀÌŬ, À̹ÌÁö ½ºÇÁ¶óÀÌÆ® µî ½ÇÇèÀûÀÌÁö¸¸ ÀÌ¹Ì ±¸ÇöµÇ°í ÀÖ´Â ¹Ì·¡ ÁöÇâÀûÀÎ ½ºÅ¸ÀÏ Á¤ÀÇ ±â¹ýÀ» ¿¹Á¦¿Í ÇÔ²² ¾Ë±â ½±°Ô ¼Ò°³ÇÑ´Ù.
¡Ú ÀÌ Ã¥¿¡¼ ´Ù·ç´Â ³»¿ë ¡Ú
ÀÌ Ã¥Àº ÇÔÃàÀûÀÎ ±â¼ú¾ð¾î·Î ÀÛ¼ºµÈ CSS3 ¸í¼¼¼ÀÇ ³»¿ëÀ» ÀÌÇØÇϱ⠽¬¿î ¹æ½ÄÀ¸·Î ¼³¸íÇÏ°í, Áö±Ý ´çÀå ¸ðµç ºê¶ó¿ìÀú¿¡¼ CSS3·Î ÇÒ ¼ö ÀÖ´Â ÀÏÀ» ÇÑ´«¿¡ º¸¿©ÁØ´Ù. ¾Æ¿ï·¯ ÇöÀå°¨ ³ÑÄ¡´Â ¿¹Á¦¿Í ÁÁÀº µðÀÚÀο¡ ´ëÇÑ ¿øÄ¢À» ¹ÙÅÁÀ¸·Î ¿©·¯ºÐÀÇ CSS È°¿ë ´É·ÂÀ» È®Àå½ÃÄѼ Æò¹üÇÑ ¸¶Å©¾÷ ¹®¼¸¦ ³î¶øµµ·Ï ½ºÅ¸ÀÏÀÌ »ì¾ÆÀÖ´Â À¥ ÆäÀÌÁö·Î ¹Ù²Ü ¼ö ÀÖ´Â ¹æ¹ýÀ» ¼³¸íÇÑ´Ù.
ÀÌ Ã¥À» ÅëÇØ ÀÍÈú ¼ö ÀÖ´Â ÃֽŠCSS3 ±â´ÉÀº ´ÙÀ½°ú °°´Ù.
¡á ¿Ü°û¼±, ±×¸²ÀÚ µå¸®¿ì±â, ±âŸ ½Ã°¢ È¿°ú¸¦ »ç¿ëÇؼ ÅؽºÆ®¿¡ ½ºÅ¸ÀÏ ºÎ¿©
¡á ¹è°æ À̹ÌÁöÀÇ »ý¼º°ú ¼¼¹ÐÇÑ À§Ä¡ ¼³Á¤, Å©±â Á¶Àý ±â¹ý
¡á À̺¥Æ®¿¡ ÀÇÇÑ Àüȯ È¿°ú¿Í ¾Ö´Ï¸ÞÀÌ¼Ç ±¸ÇöÀ¸·Î À¥ ÆäÀÌÁö¿¡ »ýµ¿°¨ ºÎ¿©
¡á ÅؽºÆ®¿Í À̹ÌÁö¿¡ 2D¿Í 3D º¯È¯ È¿°ú Àû¿ë
¡á ºÎµå·¯¿î »ö»óÀÇ Àüȯ È¿°ú¸¦ Àû¿ëÇؼ ¸¸µå´Â ¼±Çü, ¿øÇü °èÁ¶ »ö»ó
¡á ½º¸¶Æ®Æù°ú ÅÂºí¸´ µîÀÇ ±â±â¸¦ À§ÇÑ ¸ð¹ÙÀÏ À¥»çÀÌÆ® ±¸Çö
¡Ú ÀÌ Ã¥ÀÇ ±¸¼º ¡Ú
ÀÌ Ã¥ÀÇ Ãʹݺδ ¸¹Àº ºê¶ó¿ìÀú¿¡¼ Á¤»óÀûÀ¸·Î ±¸ÇöµÇ°í, ÀÏ»óÀûÀ¸·Î È°¿ëÇÒ ¼ö ÀÖ´Â CSS ¼Ó¼ºÀ» ÁÖ·Î ´Ù·ð°í, Ã¥ÀÇ Á߹ݺηΠ³Ñ¾î°¡¸é¼ ´Ù¼Ò ½ÇÇèÀûÀ̰ųª ÇâÈÄ Ã¤ÅÃµÉ °¡´É¼ºÀÌ ÀÖ´Â ±â¼úÀ» ¼Ò°³Çß´Ù. ±×¸®°í ¸¶Áö¸· ¸î °³ ÀåÀº ¾ÆÁ÷ ÀϹÝÀûÀ¸·Î ±¸ÇöµÇÁö ¾Ê¾ÒÁö¸¸ ¸ÓÁö¾ÊÀº Àå·¡¿¡ ±¸ÇöµÉ ¼Ó¼ºÀÇ ÀÛµ¿ ¹æ½Ä¿¡ ´ëÇØ CSS3 ¸í¼¼¸¦ Ç®¾î¼ ¼³¸íÇϱ⵵ Çß´Ù.
ÀÌ Ã¥ÀÇ ³¡ ºÎºÐ¿¡´Â º»¹® ³»¿ëÀ¸·Î ´Ù·çÁö ¸øÇÑ, Á» ´õ ¼¼ºÎÀûÀÎ ÀڷḦ ´ãÀº 2°³ÀÇ ºÎ·ÏÀÌ ÀÖ´Ù. ºÎ·Ï A¿¡´Â CSS3ÀÇ °¢Á¾ ±â´É ±¸Çö ¿©ºÎ¸¦ ´Ù¾çÇÑ ºê¶ó¿ìÀú¿¡¼ Å×½ºÆ®Çؼ ÇÑ´«¿¡ º¼ ¼ö ÀÖ°Ô Á¤¸®ÇÑ Âü°íÀڷḦ ¼ö·ÏÇß°í, ºÎ·Ï B¿¡´Â CSS3 È°¿ë¿¡ µµ¿òÀ» ÁÙ ¿Â¶óÀÎ ÀÚ·á, ±âŸ À¯¿ëÇÑ µµ±¸, ±×¸®°í Èï¹Ì¸¦ ²ô´Â ½Ã¿¬ ¿¹Á¦¸¦ ´ã¾Ò´Ù.
ÀÌ Ã¥ÀÇ µ¶ÀÚ¸¦ À§ÇØ ¸¶·ÃµÈ À¥»çÀÌÆ®ÀÎ http://www.thebookofcss3.com/¿¡¼ ÀÌ Ã¥¿¡ ¼ö·ÏµÈ ¸ðµç ¿¹Á¦¿Í ½Ã¿¬ °á°ú, ºÎ·Ï µîÀ» ÃֽŠ¹öÀüÀ¸·Î °»½ÅÇÑ Á¤º¸¸¦ º¼ ¼ö ÀÖ´Ù.
¡Ú ÃßõÀÇ ±Û ¡Ú
¿À·£ ±â°£ µ¿¾È ÀÎÅÍ³Ý »ê¾÷¿¡ Á¾»çÇØ¿Â »ç¶÷µé¿¡°Ô CSS3´Â Å« ÈÁ¬°Å¸®¿´´Ù. Áö³ 2006³â ³ª´Â CSS3.info¸¦ ½ÃÀÛÇߴµ¥, ÇÇÅÍ´Â ¿©±â¼ Ç¥ÁؾÈÀÇ °³¹ß°ú ÀÌ°ÍÀÌ ºê¶ó¿ìÀú¿¡¼ ½ÇÁ¦·Î ¾î¶»°Ô º¸ÀÌ´ÂÁö¿¡ ´ëÇØ ±ÛÀ» ¾²±â ½ÃÀÛÇß´Ù. CSS3.info »çÀÌÆ®¸¦ ¿î¿µÇϸé¼, ±× ´©±¸º¸´Ùµµ ¿Á¤ÀûÀ¸·Î CSS3¿¡ ´ëÇØ ½ÇÇèÇÏ°í ±ÛÀ» ¾²´Â ÇÇÅÍÀÇ ¸ð½ÀÀ» ÃæºÐÈ÷ º¼ ¼ö ÀÖ¾ú±â¿¡, ÀÌ Ã¥¿¡ ´ëÇÑ Ãßõ»ç¸¦ ´Ù¸¥ »ç¶÷ÀÌ ¾Æ´Ñ ³»°¡ ¾²´Â °Ç ¾î¼¸é ´ç¿¬ÇÑ ÀÏÀÌ ¾Æ´Ò±î »ý°¢ÇÑ´Ù.
CSS3´Â ¸¶Ä§³» ÁÖ·ùÀÇ ´ë¿¿¡ µé¾î¼¹´Ù. ½Å¼¼´ë ºê¶ó¿ìÀú(ÆÄÀ̾îÆø½º 4, ±¸±Û Å©·Ò, ÀÎÅÍ³Ý ÀͽºÇ÷η¯ 9 µî)ÀÇ µîÀå°ú ÇÔ²² À¥ µðÀÚÀÎ Ä¿¹Â´ÏƼ¿¡ ¼ÓÇÑ ¿ì¸® °°Àº »ç¶÷µéÀÌ ¿À·£ ±â´Ù¸²¿¡ ´ëÇÑ º¸»óÀ» ¹Þ°Ô µÈ °ÍÀÌ´Ù. ÀÌÁ¦´Â CSS3ÀÇ °·ÂÇÔ°ú À¯¿¬¼º¿¡ ÈûÀÔ¾î ´Ù¾çÇÑ ºê¶ó¿ìÀú¿¡¼ ¹Ìµð¾î Äõ¸®¸¦ ÀÌ¿ëÇÒ ¼ö ÀÖ°í, ÀÌÀüº¸´Ù ¶È¶ÈÇØÁø ¹è°æ À̹ÌÁö¸¦ »ç¿ëÇÒ ¼ö ÀÖÀ¸¸ç, À¥ ÆùÆ® ¿ª½Ã ¼Õ½±°Ô Àû¿ëÇÒ ¼ö ÀÖ´Ù.
°ð CSS3¸¦ »ç¿ëÇÒ °³¹ßÀÚ¿¡°Ô ÀÌ ...Ã¥Àº ÃÖ°íÀÇ ±³º»ÀÌ µÉ °ÍÀ̶ó »ý°¢ÇÑ´Ù. ÀÌ Ã¥À» ÅëÇØ ¿©·¯ºÐÀº ¾î¶² ±â´ÉÀÌ ÀÛµ¿ÇÏ´ÂÁö, ¶Ç ¾î¶² ±â´ÉÀÌ ±¸ÇöµÇÁö ¾Ê´ÂÁö¸¦ ¾Ë ¼ö ÀÖ°í, ¸í¼¼¼ÀÇ Å©°í ÀÛÀº ¸ðµç ¼öÁ¤»çÇ×µµ È®ÀÎÇÒ ¼ö ÀÖ´Ù. ƯÈ÷ ÀÌ Ã¥À» ÅëÇØ ¿©Å¸ ÀÚ·á¿¡¼´Â Á¢Çϱ⠾î·Á¿î CSS3ÀÇ Àüȯ È¿°ú¿Í 2D, 3D º¯È¯¿¡ ´ëÇؼµµ ÀÚ¼¼È÷ »ìÆ캼 ¼ö ÀÖ´Ù.
ÀÌ Ã¥¿¡¼µµ ¼Ò°³ÇÏ°í ÀÖ´Â ¸ÅÆ®¸¯½º ÇÔ¼ö °°Àº ³»¿ëÀº ´©±¸³ª ½±°Ô ÀÌÇØÇÒ ¼ö ÀÖ´Â ³»¿ëÀº ¾Æ´ÏÁö¸¸, ÇÇÅÍ´Â º¹ÀâÇÑ ¸ÅÆ®¸¯½º ÇÔ¼ö¸¦ ´ë½ÅÇؼ ÀÌÇØÇϱ⠽±°í »ç¿ëÇϱ⵵ ÈξÀ °£ÆíÇÑ CSS3ÀÇ ÇÔ¼ö¸¦ ¼Ò°³ÇÏ°í À̸¦ È°¿ëÇÒ ¼ö ÀÖ´Â ¿¹Á¦±îÁö »ó¼¼È÷ ¼Ò°³ÇÏ°í ÀÖÀ¸´Ï, ÀÌ´Â ´ë´ÜÇÑ ¾÷ÀûÀ̶ó ÇÒ ¸¸ÇÏ´Ù.
CSS3´Â À¥ µðÀÚÀ̳ÊÀÇ ÀÛ¾÷À» Áö¿øÇϱâ À§ÇØ Ç×»ó »õ·Î¿î Á¦¾ÈÀ» ¹Þ¾ÆµéÀÌ°í, ±× ¿µ¿ªÀ» È®ÀåÇÏ°í ÀÖ´Â ÇÁ¸®Á¨Å×ÀÌ¼Ç ¹®¼ÀÇ Ç¥ÁØÀÌ´Ù. µðÀÚÀ̳ÊÀÇ ÇÑ »ç¶÷À¸·Î¼, ³ª ¿ª½Ã CSS3°¡ ¾ÕÀ¸·Î ¾î¶² »õ·Î¿î ±âȸ¸¦ °¡Á®´Ù ÁÙÁö ±â´ë°¡ Å©´Ù. ÇÏÁö¸¸ Áö±ÝÀº ¹«¾ùº¸´Ùµµ ÀÌ Ã¥À» ÅëÇØ CSS3¿¡ ¼û°ÜÁø °ªÁø º¸¹°À» ã¾Æ ³ª¼³ ¶§´Ù.
- ÁÖ½ºÆ® µå ¹ÙÅ©(Joost de Valk) / Yoast.comÀÇ Ã¢¾÷ÀÚ, ´ëÇ¥ÀÌ»ç
¡Ú ÀúÀÚ ¼¹® ¡Ú
ÀÌ Ã¥Àº Áö³ 5³â°£ À¥°ú Àμ⠺оßÀÇ CSS3¿¡ ´ëÇØ ¾´ ±ÛÀ» ¸ðÀº °á°ú¹°ÀÌ´Ù. ºê¶ó¿ìÀú¿Í CSS¸¦ µÑ·¯½Ñ ȯ°æÀº ´Ü±â°£¿¡ ¸¹Àº º¯È¸¦ °Þ¾ú°í, ¹Ìó µû¶ó°¡±â Èûµé Á¤µµ·Î ¸¹Àº ±â´É°ú ±¸Çö ±â¹ýÀÌ Áö¼ÓÀûÀ¸·Î µîÀåÇÏ°í ÀÖ´Ù. CSS3 ¸í¼¼¼´Â ÃÖÁ¾ »ç¿ëÀÚ°¡ ¾Æ´Ñ ºê¶ó¿ìÀú Á¦ÀÛ»ç °°Àº ±¸Çö ´ã´çÀÚ¸¦ ¿ì¼±ÀûÀ¸·Î °í·ÁÇؼ ÇÔÃàÀûÀÎ ±â¼ú ¾ð¾î·Î ÀÛ¼ºµÆ±â ¶§¹®¿¡ ÀÏ»óÀûÀÎ Âü°í¿ë ÀÚ·á·Î »ç¿ëÇϱ⿡ ¾î·Á¿òÀÌ ÀÖ¾ú´Ù. ±×·¡¼ ³ª´Â ÀÌ Ã¥À» ¾²¸é¼ ¸í¼¼¼¿Í À¥ °³¹ßÀÚ »çÀÌÀÇ °£°ÝÀ» Á¼Çôº¸°Ú´Ù´Â ÀÇÁö¸¦ ´ÙÁ³´Ù.
ÀÌ Ã¥ÀÇ Ãʹݺδ ¸¹Àº ºê¶ó¿ìÀú¿¡¼ Á¤»óÀûÀ¸·Î ±¸ÇöµÇ°í, ÀÏ»óÀûÀ¸·Î È°¿ëÇÒ ¼ö ÀÖ´Â CSS ¼Ó¼ºÀ» ÁÖ·Î ´Ù·ð°í, Ã¥ÀÇ Á߹ݺηΠ³Ñ¾î°¡¸é¼ ´Ù¼Ò ½ÇÇèÀûÀ̰ųª ÇâÈÄ Ã¤ÅÃµÉ °¡´É¼ºÀÌ ÀÖ´Â ±â¼úÀ» ¼Ò°³Çß´Ù. ±×¸®°í ¸¶Áö¸· ¸î °³ÀÇ ÀåÀº ¾ÆÁ÷ ÀϹÝÀûÀ¸·Î ±¸ÇöµÇÁö ¾Ê¾ÒÁö¸¸ ¸ÓÁö¾ÊÀº Àå·¡¿¡ ±¸ÇöµÉ ¼Ó¼ºÀÇ ÀÛµ¿ ¹æ½Ä¿¡ ´ëÇØ CSS3 ¸í¼¼¼¸¦ Ç®¾î¼ ¼³¸íÇϱ⵵ Çß´Ù. Ã¥ÀÇ ³»¿ë °¡¿îµ¥ Ȥ½Ã ½Ç¼ö°¡ ÀÖ´Ù¸é, ÀÌ´Â ¼øÀüÈ÷ ³ªÀÇ ÀÌÇØ ºÎÁ·¿¡ µû¸¥ °ÍÀÌ´Ù.
CSS3 ¸í¼¼¼ ¿Ü¿¡µµ À¥°ú °ü·ÃµÈ ¹æ´ëÇÑ ÀÚ·á¿øÀÎ ¸ðÁú¶ó °³¹ßÀÚ ³×Æ®¿öÅ©(Mozilla Developer Network, https://developer.mozilla.org/)¿¡¼ ±â¼ú ¼±µµÀÚÀÇ °æÇè°ú ½ÇÇèÀÇ °á°ú¿¡¼ ¿ì·¯³ª¿Â Âü½ÅÇÏ°íµµ ¼ÒÁßÇÑ ÀڷḦ ¸¹ÀÌ ¾òÀ» ¼ö ÀÖ¾ú´Ù. ÄÚµå ¿¹Á¦¿¡ »ç¿ëµÈ ´Ù¾çÇÑ ÅؽºÆ®´Â ¿ÀÇ ºÏ ¼ºñ½º¸¦ ¿î¿µÇÏ´Â ±¸ÅÙº£¸£±× Àç´Ü(http://www.gutenberg.org/)ÀÇ °ø°³ ÀÚ·á¿¡¼ °¡Á®¿Ô´Ù. ¶ÇÇÑ ÀÌ Ã¥¿¡ »ç¿ëµÈ À̹ÌÁö °¡¿îµ¥ ³»°¡ Á÷Á¢ ÀÛ¼ºÇÏÁö ¾ÊÀº À̹ÌÁö´Â ÇØ´ç ºÎºÐ¿¡ ÀÛ¼ºÀÚÀÇ À̸§°ú Ãâó¸¦ Ç¥½ÃÇß´Ù.
¡Ú ¿Å±äÀÌÀÇ ¸» ¡Ú
¼Ò¼È°ú ¸ð¹ÙÀÏ ½Ã´ë¸¦ ¸Â¾Æ, µðÀÚÀ̳ʷμ, ȤÀº UI °³¹ßÀڷμ ÀÍÇô¾ß ÇÒ ³»¿ëÀÌ ³¡ ¾øÀÌ ½ñ¾ÆÁö°í ÀÖ½À´Ï´Ù. ½ºÅ¸ÀÏÀ» ´ã´çÇÏ´Â CSS3´Â °´Ã¼ÁöÇâÀûÀÎ ½ºÅ¸ÀÏ Á¤ÀÇ ±â¹ý°ú Sass °°Àº ÀͽºÅÙ¼Ç, ±×¸®°í À̸¦ ±¸ÇöÇϱâ À§ÇÑ Compass µîÀÇ ÇÁ·¹ÀÓ¿öÅ©¸¦ Àû±Ø µµÀÔÇÏ´Â ºÐÀ§±âÀÔ´Ï´Ù.
¶Ç, Áö³ ¸î ³â°£ ¾ÖÇø®ÄÉÀÌ¼Ç Áß½ÉÀÇ ÇÁ·Î±×·¡¹Ö ÀÛ¾÷ÀÌ ´ëÁßÈ µÇ¸é¼ CSS3 ¿ª½Ã µ¶ÀÚÀûÀÎ ½ºÅ¸ÀÏ Á¤ÀÇ ±â¹ýº¸´Ù´Â HTML5 API, ÀÚ¹Ù½ºÅ©¸³Æ® ÇÁ·¹ÀÓ¿öÅ©¿Í ¿¬°áÇؼ DOM ¿ä¼Ò¸¦ Á÷Á¢ Á¶ÀÛÇϰųª, ½ºÅ¸ÀÏ ¿ä¼Ò¸¦ µ¿ÀûÀ¸·Î ¹ÙÀεù ÇÏ´Â µî, ÇÁ·Î±×·¡¹Ö¿¡ °¡±î¿î ½ºÅ¸ÀÏ Á¤ÀÇ ±â¹ýÀÌ ³Î¸® »ç¿ëµÇ°í ÀÖ½À´Ï´Ù.
ÀÌ·¯ÇÑ »óȲ¿¡¼, CSS3¸¦ ½Ç¹«ÀûÀ¸·Î È°¿ëÇÏ·Á¸é ½ºÅ¸ÀÏ Á¤ÀÇ Àü¹Ý¿¡ ´ëÇÑ ³»¿ë°ú ƯÁ¤ÇÑ ½Ã°¢ È¿°ú¸¦ ±¸ÇöÇϱâ À§ÇÑ ¼¼ºÎ ³»¿ëÀ» ²Ï »ó¼¼È÷ ¾Ë°í ÀÖ¾î¾ß ÇÕ´Ï´Ù. »ç¿ëÀÚ ¹®¸Æ°ú °¨Á¤À» °í·ÁÇÏ°í, ÄÜÅÙÃ÷ È帧À» ¹Ý¿µÇÑ µðÀÚÀÎÀ» Çϱâ À§Çؼ´Â ¸ÕÀú CSS3ÀÇ ¼¼ºÎ ¿ä¼Ò°¡ ½Ã°¢ÀûÀ¸·Î ¾î¶² Àǹ̰¡ ÀÖ´ÂÁö ÆľÇÇØ ³ª°¥ ÇÊ¿ä°¡ ÀÖ´Â °ÍÀÔ´Ï´Ù.
ÇÇÅÍ °³½ºÅëÀº ÀÌ Ã¥À» ÅëÇØ Çö´ë À¥ µðÀÚÀο¡¼ °Á¶µÇ´Â CSS3ÀÇ ÁÖ¿ä ±â¹ýÀ» »ó¼¼È÷ ¼³¸íÇÏ°í, ±× ¸ðµç ½Ã°¢ÀûÀÎ °á°ú¸¦ ³¹³¹ÀÌ º¸¿©ÁÖ°í ÀÖ½À´Ï´Ù.
¸ð¹ÙÀÏ ½Ã´ë¿Í ÇÔ²² Àü¼º±â¸¦ ¸ÂÀº ¹Ìµð¾î Äõ¸®, ½ºÅ¸ÀÏ Á¤ÀÇÀÇ ±âÃÊÀÌÀÚ UI °³¹ßÀÇ ´Ü¼°¡ µÉ ¼±ÅÃÀÚ, ±×¸®°í ÁöĪÇϱâ Èûµç ´ë»óÀ» ½±°Ô °¡¸®Å³ ¼ö ÀÖ°Ô ÇØÁÖ´Â ¸ðÁ¶ Ŭ·¡½º¿Í ¸ðÁ¶ ¿ä¼Ò´Â ÄÚµå ±â¹ÝÀÇ À¥ µðÀÚÀÎÀ» À§ÇÑ Çʼö ¿ä¼Ò¶ó ÇÒ ¼ö ÀÖ½À´Ï´Ù.
iOS 7°ú ¾Èµå·ÎÀ̵å ŶĹ ÀÌÈÄ °Á¶µÇ°í ÀÖ´Â À¥ ÆùÆ®¿Í µ¿ÀûÀ¸·Î Àû¿ë °¡´ÉÇÑ ÅؽºÆ® È¿°ú¿Í ŸÀÌÆ÷±×·¡ÇÇ ½ºÅ¸ÀÏ, À¥Àº ¹°·Ð, ÀÎ¼â µî ´Ùä·Î¿î ·¹À̾ƿô ±¸¼ºÀ» À§ÇÑ ´ÙÁß Ä®·³µµ ¼Ò¼È°ú ¸ð¹ÙÀÏ ÄÜÅÙÃ÷ ½Ã´ë¿¡ ¸Å¿ì Áß¿äÇÑ ¿ä¼ÒÀÔ´Ï´Ù.
ÃÖ±Ù À¥ µðÀÚÀÎÀÇ ÁÖ¿ä Æ®·»µå¶ó°í ÇÒ ¼ö ÀÖ´Â Æз²·¢½º(Parallax) µðÀÚÀο¡¼ °ÅÀÇ ºüÁü ¾øÀÌ »ç¿ëµÇ´Â Àüȯ È¿°ú¿Í ¾Ö´Ï¸ÞÀ̼Ç, ´Ù¾çÇÑ È¸é Å©±â¿¡ ´ëÀÀÇϱâ À§ÇÑ ¶Ç ´Ù¸¥ Àü·«ÀÎ À¯µ¿ÀûÀÎ ¹Ú½º ·¹À̾ƿô, ½ÇÇèÀûÀÌÁö¸¸ ¿ÜºÎ ÇÁ·¹ÀÓ¿öÅ©¿ÍÀÇ ¿¬°áÀ» ÅëÇØ À¯¿¬¼ºÀ» ±Ø´ëÈÇÑ ÅÛÇø´ ·¹À̾ƿô¿¡ ´ëÇؼµµ »ó¼¼È÷ ¼³¸íÇÕ´Ï´Ù.
Ã¥ÀÇ Á¾¹ÝºÎ¿¡´Â »ó´ëÁÂÇ¥ Áß½ÉÀÇ ¸ð¹ÙÀÏ ·¹À̾ƿô ÀÛ¾÷¿¡ À¯¿ëÇÏ°Ô »ç¿ëÇÒ ¼ö ÀÖ´Â °è»êÇÔ¼ö, ¹Ýº¹ÀûÀÎ ÀÛ¾÷À» ´ë½ÅÇØ ÁÙ »çÀÌŬ, À¥ ±â¹Ý °ÔÀÓ ±¸Çö¿¡ Àû±Ø »ç¿ëµÉ À̹ÌÁö ½ºÇÁ¶óÀÌÆ® µî ´ÜÆíÀûÀÎ °Ë»ö¸¸À¸·Î´Â °áÄÚ Ã£À» ¼ö ¾ø´Â ±íÀÌ ÀÖ´Â ½ºÅ¸ÀÏ Á¤ÀÇ ±â¹ýÀ» ¼Ò°³ÇÕ´Ï´Ù.
CSS3¸¦ ½Ç¹«¿¡ È°¿ëÇÒ µ¶ÀÚ¸¦ À§ÇØ ²Ä²ÄÈ÷ ½á ³»·Á°£ ÀÌ Ã¥Àº °áÄÚ °¡º±´Ù°í ÇÒ ¼ö ¾ø´Â ºÐ·®°ú ³»¿ëÀÌÁö¸¸, À¥ µðÀÚÀ̳ʷμ, ±×¸®°í UI °³¹ßÀڷμ Â÷º°ÈµÈ °æÀï·ÂÀ» °®Ãß´Â µ¥ Å« µµ¿òÀÌ µÇ¸®¶ó »ý°¢ÇÕ´Ï´Ù.
-
-
1Àå CSS3 ¼Ò°³
__CSS3¶õ ¹«¾ùÀ̸ç, ¾î¶»°Ô Áö±ÝÀÇ ¸ð½ÀÀ» °®Ãß°Ô µÆ´Â°¡
____CSS3ÀÇ °£·«ÇÑ ¿ª»ç
____CSS3´Â ¸ðµâ Çü½ÄÀÌ´Ù
____¸ðµâº° ÁøÇà »óȲ°ú Ãßõ ÀýÂ÷
____CSS3´Â HTML5°¡ ¾Æ´Ï´Ù
__½ÃÀÛÇϱâ: CSSÀÇ ¹®¹ý ¼Ò°³
____ºê¶ó¿ìÀú ÁöÁ¤ Á¢µÎ»ç
____½ÇÇèÀûÀÌ¸é¼ ¹Ì·¡±îÁö ´ëºñÇÏ´Â CSS
__½ÃÀÛÇϱâ
2Àå ¹Ìµð¾î Äõ¸®
__¹®¹ý
__¹Ìµð¾î Äõ¸®ÀÇ ÀåÁ¡
__¹Ìµð¾î ÇÇó
____°¡·Î¿Í ¼¼·Î ±æÀÌ
____±â±âÀÇ °¡·Î, ¼¼·Î ±æÀÌ
____°³¹ß ½Ç¹«¿¡¼ ¹Ìµð¾î Äõ¸®ÀÇ »ç¿ë
____±â±â ȸÀü
____È¸é ºñÀ²
____Çȼ¿ ºñÀ²
____´ÙÁß ¹Ìµð¾î ÇÇó
____¸ðÁú¶ó¸¸À» À§ÇÑ ¹Ìµð¾î ÇÇó
____Á¤¸®
____¹Ìµð¾î Äõ¸®: ºê¶ó¿ìÀú Áö¿ø ÇöȲ
3Àå ¼±ÅÃÀÚ
__¼Ó¼º ¼±ÅÃÀÚ
__CSS3ÀÇ »õ·Î¿î ¼Ó¼º ¼±ÅÃÀÚ
____½ÃÀÛ ÇÏÀ§¹®ÀÚ¿ ¼Ó¼º °ª ¼±ÅÃÀÚ
____¸¶Áö¸· ÇÏÀ§¹®ÀÚ¿ ¼Ó¼º °ª ¼±ÅÃÀÚ
____ÀÓÀÇ ÇÏÀ§¹®ÀÚ¿ ¼Ó¼º °ª ¼±ÅÃÀÚ
____´ÙÁß ¼Ó¼º ¼±ÅÃÀÚ
__¹ü¿ë ÇüÁ¦ ¿ä¼Ò °áÇÕ ¼±ÅÃÀÚ
__Á¤¸®
__¼±ÅÃÀÚ: ºê¶ó¿ìÀú Áö¿ø ÇöȲ
4Àå ¸ðÁ¶ Ŭ·¡½º¿Í ¸ðÁ¶ ¿ä¼Ò
__±¸Á¶ÀûÀÎ ¸ðÁ¶ Ŭ·¡½º
____nth-* ¸ðÁ¶ Ŭ·¡½º
____first-of-ty...pe, last-child, last-of-type
____only-child¿Í only-of-type
__±× ¹ÛÀÇ ¸ðÁ¶ Ŭ·¡½º
____target
____empty
____root
____not
____UI ¿ä¼ÒÀÇ »óÅ ¼±ÅÃÀÚ
__¸ðÁ¶ ¿ä¼Ò
____selection ¸ðÁ¶ ¿ä¼Ò
__Á¤¸®
__DOM°ú ¼Ó¼º ¼±ÅÃÀÚ: ºê¶ó¿ìÀú Áö¿ø ÇöȲ
5Àå À¥ ÆùÆ®
__@font-face ±ÔÄ¢
____´Ù¸¥ ÆùÆ® Á¤ÀÇÇϱâ
____½ÇÁ¦ ÆùÆ® ÆäÀ̽º¿Í ÀΰøÀûÀÎ ÆùÆ® ÆäÀ̽º
__±¸Çü ºê¶ó¿ìÀú¿¡¼µµ ÅëÇÏ´Â @font-face ¹®¹ý
____·ÎÄà ÆùÆ®ÀÇ »ç¿ë
____ÆùÆ® Æ÷¸Ë
____¸¶Áö¸· ¹æź ¹®¹ý
____ÆùÆ®½ºÇÁ¸µ ¹æź ¹®¹ý
__À¥ ÆùÆ® »ç¿ë ¶óÀ̼±½º
__±× ¹ÛÀÇ ÆùÆ® ¼Ó¼º
____font-size-adjust
____font-stretch
__½Ç¹«¿¡¼ »ç¿ëµÇ´Â À¥ ÆùÆ® »ç·Ê
__¿ÀÇŸÀÔÀÇ Æ¯Â¡
__Á¤¸®
__À¥ ÆùÆ®: ºê¶ó¿ìÀú Áö¿ø ÇöȲ
6Àå ÅؽºÆ® È¿°ú¿Í ŸÀÌÆ÷±×·¡ÇÇ ½ºÅ¸ÀÏ
__ÁÂÇ¥Ãà°ú ÁÂÇ¥°è¿¡ ´ëÇÑ ÀÌÇØ
__ÅؽºÆ®¿¡ ¿Ü°û¼± Ãß°¡Çϱâ: text-outline°ú text-stroke
__±× ¹ÛÀÇ ÅؽºÆ® ¼Ó¼º
____±ÛÀÚ ³Ñħ Á¦ÇÑÇϱâ
____¿ä¼ÒÀÇ Å©±â Á¶Àý
____ÅؽºÆ® Á¤·Ä
____ÅؽºÆ® °¨½Î±â
____ÅؽºÆ® ·»´õ¸µ ¿É¼Ç ¼³Á¤
____±¸µÎÁ¡ ¼Ó¼º Àû¿ë
__ÀÔüÀûÀÎ È¿°ú Àû¿ë: text-shadow
____´ÙÁß À½¿µ È¿°ú
____·¹ÅÍÇÁ·¹½º È¿°ú
__Á¤¸®
__ÅؽºÆ® È¿°ú: ºê¶ó¿ìÀú Áö¿ø ÇöȲ
7Àå ´ÙÁß Ä®·³
__Ä®·³ °£°Ý(Á¾´ë°£°Ý)°ú Ä®·³ ±âµÕ(´ÜÁÖ)
__Ä®·³ ·¹À̾ƿô ¹æ¹ý
____Ä®·³ ¼ö ÁöÁ¤ ¹æ½Ä: column-count
____µ¿ÀûÀÎ Ä®·³ ÁöÁ¤ ¹æ½Ä: column-width
____°¡µ¶¼ºÀ» ³ôÀ̱â À§ÇÑ Àü·«
____ÆÄÀ̾îÆø½º¿Í À¥Å¶¿¡ Àû¿ëµÇ´Â °¢±â ´Ù¸¥ ºÐ¹è ¹æ½Ä
____column-count¿Í column-widthÀÇ ¿¬°á
__Ä®·³¿¡ À̹ÌÁö µîÀÇ ¿ä¼Ò ´ã±â
____¿©·¯ °³ÀÇ Ä®·³¿¡ °ÉÃÄ ³ªÅ¸³ª´Â ¿ä¼Ò
____¿©·¯ °³ÀÇ Ä®·³¿¡ °ÉÃÄ ÀÖ´Â ¿ä¼Ò ºÐ¸®Çϱâ
__Á¤¸®
__´ÙÁß Ä®·³: ºê¶ó¿ìÀú Áö¿ø ÇöȲ
8Àå ¹è°æ À̹ÌÁö¿Í ±âŸ Àå½ÄÀûÀÎ ¼Ó¼º
__¹è°æ À̹ÌÁö
____´ÙÁß ¹è°æ À̹ÌÁö
____¹è°æ À̹ÌÁöÀÇ Å©±â
____¹è°æ Ŭ¸³°ú ¹è°æ ¿øÁ¡
____background-repeat
____¹è°æ À̹ÌÁö ÀÚ¸£±â
__¹è°æ À̹ÌÁö: ºê¶ó¿ìÀú Áö¿ø ÇöȲ
__À̹ÌÁö ¸¶½ºÅ©
__Á¤¸®
__¹è°æ À̹ÌÁö: ºê¶ó¿ìÀú Áö¿ø ÇöȲ
9Àå ¿Ü°û¼±°ú ¹Ú½º È¿°ú
__¿Ü°û¼± ¸ð¼¸®¸¦ µÕ±Û°Ô ¸¸µé±â
____border-radiusÀÇ Ãà¾àÇü ¹®¹ý
____Å©·Î½º ºê¶ó¿ìÀú ȯ°æ¿¡¼ ³ªÅ¸³ª´Â ±¸Çö °á°úÀÇ Â÷ÀÌ
__¿Ü°û¼±¿¡ À̹ÌÁö Àû¿ëÇϱâ
__´ÙÁß »ö»ó ¿Ü°û¼±
__¹Ú½º ¿ä¼Ò¿¡ ±×¸²ÀÚ Ãß°¡Çϱâ
__Á¤¸®
__¿Ü°û¼±°ú ¹Ú½º È¿°ú: ºê¶ó¿ìÀú Áö¿ø ÇöȲ
10Àå »ö»ó°ú Åõ¸íµµ
__opacity ¼Ó¼ºÀ» ÀÌ¿ëÇÑ Åõ¸íµµ ¼³Á¤
__»õ·ÎÀÌ Ãß°¡µÈ »ö»ó °ª
____¾ËÆÄ Ã¤³Î
____»ö»ó, äµµ, ¸íµµ
____HSLA
____»ö»ó º¯¼ö: currentColor
__¿î¿µÃ¼Á¦ÀÇ ½ºÅ¸ÀÏ¿¡ ¾î¿ï¸®°Ô ¸¸µé±â
__Á¤¸®
__»ö»ó°ú Åõ¸íµµ: ºê¶ó¿ìÀú Áö¿ø ÇöȲ
11Àå °èÁ¶ »ö»ó
__¼±Çü °èÁ¶ »ö»ó
____ÆÄÀ̾îÆø½ºÀÇ ¼±Çü °èÁ¶ »ö»ó
____À¥Å¶ÀÇ ¼±Çü °èÁ¶ »ö»ó
____¼±Çü °èÁ¶ »ö»ó »ç¿ë
____color-stop °ª Ãß°¡
__¿øÇü °èÁ¶ »ö»ó
____ÆÄÀ̾îÆø½ºÀÇ ¿øÇü °èÁ¶ »ö»ó ±¸Çö
____À¥Å¶ÀÇ ¿øÇü °èÁ¶ »ö»ó ±¸Çö
____¿øÇü °èÁ¶ »ö»ó »ç¿ë
____´ÙÁß color-stop Àû¿ë
____°èÁ¶ ±¸Çö¿¡ ÀÖ¾î À¥Å¶ ¹®¹ýÀÇ ÀåÁ¡
__´ÙÁß °èÁ¶ »ö»ó
__ÆÄÀ̾îÆø½ºÀÇ °èÁ¶ »ö»ó ¹Ýº¹ È¿°ú
____¼±Çü °èÁ¶ »ö»ó ¹Ýº¹
____¿øÇü °èÁ¶ »ö»ó ¹Ýº¹
__Á¤¸®
__°èÁ¶ »ö»ó: ºê¶ó¿ìÀú Áö¿ø ÇöȲ
12Àå 2D º¯È¯
__º¯È¯ ¼Ó¼º
__ȸÀü
____¹®¼ È帧¿¡¼ÀÇ À§Ä¡
____º¯È¯ÀÇ ¿øÁ¡: transform-origin ¼Ó¼º
__À§Ä¡ À̵¿
__±â¿ï±â Á¶Àý
__Å©±â Á¶Àý
__´ÙÁß º¯È¯
__¸ÅÆ®¸¯½º¸¦ ÀÌ¿ëÇÑ ¿ä¼ÒÀÇ º¯È¯
__À¥Å¶ÀÇ ¹Ý»ç È¿°ú ±¸Çö
__Á¤¸®
__2D º¯È¯ È¿°ú: ºê¶ó¿ìÀú Áö¿ø ÇöȲ
13Àå Àüȯ È¿°ú¿Í ¾Ö´Ï¸ÞÀ̼Ç
__Àüȯ È¿°ú
____Àüȯ ¼Ó¼º
____Àüȯ ±â°£
____½Ã°£ ÇÔ¼ö
____Áö¿¬ ¼Ó¼º
____Ãà¾àÇü ¹®¹ý
____¿Ï¼ºµÈ Àüȯ È¿°úÀÇ ¿¹Á¦ ÄÚµå
____´ÙÁß Àüȯ È¿°ú
____Àüȯ È¿°ú¸¦ ¹ß»ý½ÃÅ°´Â À̺¥Æ®
__Á» ´õ º¹ÀâÇÑ ¾Ö´Ï¸ÞÀ̼ÇÀÇ ±¸Çö
____Å° ÇÁ·¹ÀÓ
____¾Ö´Ï¸ÞÀÌ¼Ç ¼Ó¼º
____¿Ï¼ºµÈ ¾Ö´Ï¸ÞÀÌ¼Ç ¿¹Á¦
____´ÙÁß ¾Ö´Ï¸ÞÀ̼Ç
__Á¤¸®
__Àüȯ È¿°ú¿Í ¾Ö´Ï¸ÞÀ̼Ç: ºê¶ó¿ìÀú Áö¿ø ÇöȲ
14Àå 3D º¯È¯
__CSS¿¡¼ÀÇ 3D ¿ä¼Ò
__º¯È¯ ½ºÅ¸ÀÏ ¼Ó¼º
__º¯È¯ ¿øÁ¡
__º¯È¯ ÇÔ¼ö
____ÁÂÇ¥Ãà Áß½ÉÀÇ È¸Àü
____ÁÂÇ¥Ãà Áß½ÉÀÇ À̵¿
____Å©±â Á¶Àý
____º¯È¯ ¸ÅÆ®¸¯½º
____3Â÷¿ø °üÂû ½ÃÁ¡
__°üÂû ½ÃÁ¡°ú °üÂû ½ÃÁ¡ÀÇ ¿øÁ¡ ¼Ó¼º
__ÈÄ¸é º¸À̱â¿Í °¨Ãß±â
__Á¤¸®
__3Â÷¿ø º¯È¯: ºê¶ó¿ìÀú Áö¿ø ÇöȲ
15Àå À¯µ¿ ¹Ú½º ·¹À̾ƿô
__À¯µ¿ ¹Ú½º ·¹À̾ƿô È£Ãâ
____ÆÄÀ̾îÆø½º¿¡¼ÀÇ box °ª
____ÀζóÀÎ ¹Ú½º
__¹Ú½º ¿ä¼Ò¿¡ À¯µ¿¼º Àû¿ëÇϱâ
____Â÷µî ºñ·Ê
____box-flex: 0ÀÇ ÀÇ¹Ì¿Í ÆÄÀ̾îÆø½ºÀÇ ·¹À̾ƿô
__À¯µ¿ÀûÀÎ ¹Ú½º ¿ä¼ÒÀÇ ±×·ìÈ
__»óÇÏ, ÁÂ¿ì ¹æÇâÀÇ º¯°æ
__À¯µ¿ÀûÀÎ ¹Ú½ºÀÇ ¼ø¼ º¯°æ
____¼ø¼ ¿ªÀü
____Á» ´õ ¼¼¹ÐÇÑ ¼ø¼ Á¶Á¤
__¿ä¼ÒÀÇ Á¤·Ä
__µ¿ÀÏÇÑ Ãà¿¡¼ ¿ä¼ÒÀÇ Á¤·Ä
__Å©·Î½º ºê¶ó¿ìÀú ȯ°æ¿¡¼ ÀÚ¹Ù½ºÅ©¸³Æ®·Î À¯µ¿ ¹Ú½º ±¸Çö
__¿©·¯ °³ÀÇ Çà°ú ¿
__±ÛÀ» ¸¶Ä¥ ÁîÀ½ ¹ßÇ¥µÈ »õ·Î¿î ¹®¹ý
__Á¤¸®
__À¯µ¿ ¹Ú½º ·¹À̾ƿô: ºê¶ó¿ìÀú Áö¿ø ÇöȲ
16Àå ÅÛÇø´ ·¹À̾ƿô
__ÀÚ¹Ù½ºÅ©¸³Æ® ¼³Á¤
__position°ú display ¼Ó¼ºÀ» »ç¿ëÇØ Çà ¸¸µé±â
__¿©·¯ °³ÀÇ Çà
__½½·Ô°ú ::slot() ¸ðÁ¶ ¿ä¼Ò
__ºó ½½·Ô ¸¸µé±â
__Çà°ú ¿ÀÇ ³ôÀÌ¿Í Æø ¼³Á¤
____°¡·Î ±æÀ̸¦ ³ªÅ¸³»´Â Å°¿öµå °ª
____ÇàÀÇ ³ôÀÌ¿Í ¿ÀÇ ÆøÀ» ÇÑ ¹ø¿¡ ¼³Á¤Çϱâ
__±âº» ¼³Á¤ ÄÁÅÙÆ®: @ ±âÈ£
__Á¤¸®
__ÅÛÇø´ ·¹À̾ƿô: ºê¶ó¿ìÀú Áö¿ø ÇöȲ
17Àå CSSÀÇ ¹Ì·¡
__¼öÇÐ ¿¬»ê
____°è»ê ÇÔ¼ö
____»çÀÌŬ
__±×¸®µå À§Ä¡ ¼³Á¤ ¸ðµâ
____¾Ï½ÃÀû ±×¸®µå¿Í ¸í½ÃÀû ±×¸®µå
____±×¸®µåÀÇ ´ÜÀ§(gr)
____float ¼Ó¼ºÀÇ È®Àå
__À̹ÌÁö È°¿ëÀ» À§ÇÑ ±â´ÉÀÇ È®Àå
____À̹ÌÁö ´©¶ôÀÇ ´ëºñ
____À̹ÌÁö ºÐÇÒ
____À̹ÌÁö ½ºÇÁ¶óÀÌÆ®
__±×·ì ¼±ÅÃÀÚ
__CSSÀÇ »ó¼ö¿Í º¯¼ö
__À¥Å¶ CSSÀÇ È®Àå
____CSS º¯¼ö
____mixin ±ÔÄ¢À» È°¿ëÇÑ º¯¼öÀÇ È®Àå
____CSS ¸ðµâ
____ÄÚµå »ðÀÔ ±ÔÄ¢
__ÅÍÄ¡ µ¿ÀÛ¿¡ ´ëÇÑ ¹ÝÀÀ
__Á¤¸®
__CSSÀÇ ¹Ì·¡: ºê¶ó¿ìÀú Áö¿ø ÇöȲ
ºÎ·Ï A ÁÖ¿ä ºê¶ó¿ìÀú¿¡¼ÀÇ CSS3 Áö¿ø ÇöȲ
ºÎ·Ï B CSS3 ¿Â¶óÀÎ ÀÚ·á
__CSS ¸ðµâ
__ºê¶ó¿ìÀú
____À¥Å¶
____ÆÄÀ̾îÆø½º
____¿ÀÆä¶ó
____ÀÎÅÍ³Ý ÀͽºÇ÷η¯
__ºê¶ó¿ìÀú Áö¿ø
____When Can I Use
____Quirks Mode
____Find Me By IP
__±â´É Ž»ö°ú ½Ã¹Ä·¹À̼Ç
__Perfection Kills
____Modernizr
____CSS3 Pie
__ÄÚµå »ý¼º µµ±¸
____CSS3, Please!
____CSS3 Generator
____CSS3 Gradient Generator
____Type Folly
__À¥ ÆùÆ®
____ŸÀÔŶ
____ÆùÆ®µ¦
____ÆùÆ®´åÄÄ À¥ ÆùÆ®
____±¸±Û ÆùÆ® API
____Web FontFonts
____ÆùÆ® ½ºÄõ·²
____ÆùÆ®½ºÆ®¸µ
__±âŸ ÀÚ·á
____CSS3.info
____CSS3 Watch
____CSS3 Cheat Sheet
-
-
|
ÇÇÅÍ °³½ºÅë(Peter Gasston) [Àú]
|
|
-
´åÄÄ °ÅÇ°ÀÌ ÀÏ´ø ½Ã±â¿¡ À¥¿¡ ¶Ù¾îµé¾î Áö³ 11³â µ¿¾È Àü¹®ÀûÀÎ À¥ °³¹ßÀÚ·Î È°µ¿ÇØ¿Ô´Ù. ±×°£ ¿À·»Áö(Orange), ½ºÄ«ÀÌÇÁ(Skype), ½Ã½ºÄÚ ½Ã½ºÅÛ½º(Cisco Systems)¿Í, ÆÒÀ̱⵵ ÇÑ ¾Æ½º³¯(Arsenal) Ã౸ÆÀ µîÀÇ °í°´À» À§ÇØ ¿¡ÀÌÀü½Ã¿Í ±â¾÷ÀÇ ÀÏ¿øÀ¸·Î, ȤÀº ÇÁ¸®·£¼·Î ÇÁ·ÎÁ§Æ®¿¡ Âü¿©Çß´Ù. Áö±ÝÀº ·±´øÀÇ ¼î¾îµðÄ¡¿¡ ÀÖ´Â Æ÷Å©(Poke) µðÁöÅÐ ¿¡ÀÌÀü½Ã¿¡¼ ÀÏÇÑ´Ù.
ÁÖ·Î HTML, CSS, ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ ÀÌ¿ëÇØ »ç¿ëÀÚ Ãø °³¹ßÀ» Àü¹®ÀûÀ¸·Î ¼öÇàÇϸç, À¥ Ç¥ÁØ°ú ½Ã¸Çƽ ¸¶Å©¾÷¿¡ ´ëÇØ ÇعÚÇÑ Áö½ÄÀ» °®°í ÀÖ´Ù. ÀÚ½ÅÀÇ ºí·Î±× http://www.broken-links.com/¿¡ À¥ ±â¼ú °ü·Ã ±ÛÀ» ¾²°í ÀÖ´Â ÇÇÅÍ °³½ºÅëÀº ¿À·£ ±â°£ http://www.css3.info/¿¡ ±ÛÀ» ±â°íÇØ¿ÔÀ¸¸ç, Dev.Opera¿Í ¿µ±¹ÆÇ ´å³Ý ¸Å°ÅÁø(¹Ì±¹¿¡¼´Â ½Ç¿ëÀûÀÎ À¥ µðÀÚÀÎÀ¸·Î À¯¸í)¿¡¼µµ ÁýÇÊÁøÀ¸·Î È°µ¿Çß´Ù. ·±´øÀÇ À¥ °³¹ßÀÚ Ä¿¹Â´ÏƼ ȸÇÕ°ú ´Ù¸¥ °ø°ø Çà»ç¿¡¼ ¿¬»ç·Î Âü¿©ÇßÀ¸¸ç, ¹Ì·¡¿£ Á» ´õ ¸¹Àº ±â°í¿Í °¿¬À» ÇÒ °èȹÀÌ´Ù.
ºê¸®½ºÅç¿¡¼ žÁö¸¸ ·±´ø¿¡¼ 16³âÀ» »ì¾Ò°í, ÃÖ±Ù 7³â°£Àº ±×ÀÇ ¾Æ³» ¾Ö³ª¿Í ÇÔ²²ÇÏ°í ÀÖ´Ù. µ¶¼¸¦ ÁÁ¾ÆÇؼ ¼ø¼ö ¹®ÇÐ ÀÛÇ°°ú ¿ª»ç´Â ¹°·Ð, ½É¸®ÇÐ ¼Àû±îÁö Áñ°Ü ÀÐÀ¸¸ç µ¶¸³ ¸¸È¿Í µ¶¸³ ¿µÈÀÇ ¿·ÄÇÑ ÆÒÀ̱⵵ ÇÏ´Ù.
-
|
µ¿ÁØ»ó [Àú]
|
|
-
Ŭ¶ó¿ìµå, ÀΰøÁö´É ºÎ¹® °¿¬ÀÚÀÌÀÚ ÄÁ¼³ÅÏÆ®À̸ç, AWS Å×Å©³î·ÎÁö ÆÄÆ®³Ê, Çѱ¹»ý»ê¼ºº»ºÎ ÀΰøÁö´É Àü¹®°¡À§¿øÀÌ´Ù. Çѱ¹»ý»ê¼ºº»ºÎ, ¼¿ï´ëÇб³, »ï¼ºÀüÀÚ, °í·Á´ëÇб³, ±¹°¡Á¤º¸ÀÚ¿ø°ü¸®¿ø, Æ÷Ç×°ø´ë¿¡¼ °ü·Ã ÁÖÁ¦·Î °¿¬À» Çß´Ù.
¼ÒÇÁÆ®¿þ¾î ¿£Áö´Ï¾î¸µ°ú ¿ÀǼҽº¿¡ °ü½ÉÀÌ ¸¹°í ¿¡ÀÌÄÜÃâÆǻ翡¼ Ãâ°£ÇÑ ¡ºAWS °øÀÎ ¼Ö·ç¼Ç½º ¾ÆÅ°ÅØÆ® ¿ÃÀοø ½ºÅ͵𠰡À̵å - ¾î¼Ò½Ã¿¡ÀÌÆ®¡»(2020), ¡º±â¾÷¿ë ºí·ÏüÀΡ»(2019), ¡ºÀÚ¹Ù ¸Ó½Å ·¯´× ¸¶½ºÅÍ¡»(2019), ¡º½ºÀ§ÇÁÆ® µ¥ÀÌÅÍ ±¸Á¶¿Í ¾Ë°í¸®Áò¡»(2017) ¿Ü ½Ê¿© ±ÇÀ» ¹ø¿ªÇß´Ù.
-
-
Àüü 0°³ÀÇ ±¸¸ÅÈıⰡ ÀÖ½À´Ï´Ù.
|
ÀÎÅÍÆÄÅ©µµ¼´Â °í°´´ÔÀÇ ´Ü¼ø º¯½É¿¡ ÀÇÇÑ ±³È¯°ú ¹ÝÇ°¿¡ µå´Â ºñ¿ëÀº °í°´´ÔÀÌ ÁöºÒÄÉ µË´Ï´Ù.
´Ü, »óÇ°À̳ª ¼ºñ½º ÀÚüÀÇ ÇÏÀÚ·Î ÀÎÇÑ ±³È¯ ¹× ¹ÝÇ°Àº ¹«·á·Î ¹ÝÇ° µË´Ï´Ù. |
|
±³È¯ ¹× ¹ÝÇ°ÀÌ °¡´ÉÇÑ °æ¿ì |
»óÇ°À» °ø±Þ ¹ÞÀº ³¯·ÎºÎÅÍ 7ÀÏÀ̳» °¡´É
°ø±Þ¹ÞÀ¸½Å »óÇ°ÀÇ ³»¿ëÀÌ Ç¥½Ã, ±¤°í ³»¿ë°ú ´Ù¸£°Å³ª ´Ù¸£°Ô ÀÌÇàµÈ °æ¿ì¿¡´Â °ø±Þ¹ÞÀº ³¯·ÎºÎÅÍ 3°³¿ù À̳», ȤÀº ±×»ç½ÇÀ» ¾Ë°Ô µÈ ³¯ ¶Ç´Â ¾Ë ¼ö ÀÖ¾ú´ø ³¯·ÎºÎÅÍ 30ÀÏ À̳»
»óÇ°¿¡ ¾Æ¹«·± ÇÏÀÚ°¡ ¾ø´Â °æ¿ì ¼ÒºñÀÚÀÇ °í°´º¯½É¿¡ ÀÇÇÑ ±³È¯Àº »óÇ°ÀÇ Æ÷Àå»óÅ µîÀÌ ÀüÇô ¼Õ»óµÇÁö ¾ÊÀº °æ¿ì¿¡ ÇÑÇÏ¿© °¡´É |
|
±³È¯ ¹× ¹ÝÇ°ÀÌ ºÒ°¡´ÉÇÑ °æ¿ì |
±¸¸ÅÈ®Á¤ ÀÌÈÄ(¿ÀǸ¶ÄÏ»óÇ°¿¡ ÇÑÇÔ)
°í°´´ÔÀÇ Ã¥ÀÓ ÀÖ´Â »çÀ¯·Î »óÇ° µîÀÌ ¸ê½Ç ¶Ç´Â ÈÑ¼ÕµÈ °æ¿ì
(´Ü, »óÇ°ÀÇ ³»¿ëÀ» È®ÀÎÇϱâ À§ÇÏ¿© Æ÷Àå µîÀ» ÈѼÕÇÑ °æ¿ì´Â Á¦¿Ü)
½Ã°£ÀÌ Áö³²¿¡ µû¶ó ÀçÆǸŰ¡ °ï¶õÇÒ Á¤µµ·Î ¹°Ç°ÀÇ °¡Ä¡°¡ ¶³¾îÁø °æ¿ì
Æ÷Àå °³ºÀµÇ¾î »óÇ° °¡Ä¡°¡ ÈÑ¼ÕµÈ °æ¿ì |
|
´Ù¹è¼ÛÁöÀÇ °æ¿ì ¹ÝÇ° ȯºÒ |
´Ù¹è¼ÛÁöÀÇ °æ¿ì ´Ù¸¥ Áö¿ªÀÇ ¹ÝÇ°À» µ¿½Ã¿¡ ÁøÇàÇÒ ¼ö ¾ø½À´Ï´Ù.
1°³ Áö¿ªÀÇ ¹ÝÇ°ÀÌ ¿Ï·áµÈ ÈÄ ´Ù¸¥ Áö¿ª ¹ÝÇ°À» ÁøÇàÇÒ ¼ö ÀÖÀ¸¹Ç·Î, ÀÌÁ¡ ¾çÇØÇØ Áֽñ⠹ٶø´Ï´Ù. |
|
Áß°í»óÇ°ÀÇ ±³È¯ |
Áß°í»óÇ°Àº Á¦ÇÑµÈ Àç°í ³»¿¡¼ ÆǸŰ¡ ÀÌ·ç¾îÁö¹Ç·Î, ±³È¯Àº ºÒ°¡´ÉÇÕ´Ï´Ù. |
|
¿ÀǸ¶ÄÏ »óÇ°ÀÇ È¯ºÒ |
¿ÀǸ¶ÄÏ»óÇ°¿¡ ´ëÇÑ Ã¥ÀÓÀº ¿øÄ¢ÀûÀ¸·Î ¾÷ü¿¡°Ô ÀÖÀ¸¹Ç·Î, ±³È¯/¹ÝÇ° Á¢¼ö½Ã ¹Ýµå½Ã ÆǸÅÀÚ¿Í ÇùÀÇ ÈÄ ¹ÝÇ° Á¢¼ö¸¦ ÇϼžßÇϸç, ¹ÝÇ°Á¢¼ö ¾øÀÌ ¹Ý¼ÛÇϰųª, ¿ìÆíÀ¸·Î º¸³¾ °æ¿ì »óÇ° È®ÀÎÀÌ ¾î·Á¿ö ȯºÒÀÌ ºÒ°¡´ÉÇÒ ¼ö ÀÖÀ¸´Ï À¯ÀÇÇϽñ⠹ٶø´Ï´Ù. |
|
|
|
¹è¼Û¿¹Á¤ÀÏ ¾È³» |
ÀÎÅÍÆÄÅ© µµ¼´Â ¸ðµç »óÇ°¿¡ ´ëÇØ ¹è¼Û¿Ï·á¿¹Á¤ÀÏÀ» À¥»çÀÌÆ®¿¡ Ç¥½ÃÇÏ°í ÀÖ½À´Ï´Ù.
|
<ÀÎÅÍÆÄÅ© Á÷¹è¼Û »óÇ°> |
»óÇ°Àº ¿ù~Åä¿äÀÏ ¿ÀÀü 10½Ã ÀÌÀü ÁÖ¹®ºÐ¿¡ ´ëÇÏ¿© ´çÀÏ Ãâ°í/´çÀÏ ¹è¼Û¿Ï·á¸¦ º¸ÀåÇÏ´Â »óÇ°ÀÔ´Ï´Ù. |
»óÇ°Àº ¼¿ïÁö¿ª/ÆòÀÏ ÁÖ¹®ºÐÀº ´çÀÏ Ãâ°í/ÀÍÀÏ ¹è¼Û¿Ï·á¸¦ º¸ÀåÇϸç,
¼¿ï¿ÜÁö¿ª/ÆòÀÏ ÁÖ¹®ºÐÀÇ °æ¿ì´Â ¿ÀÈÄ 6½Ã±îÁö ÁÖ¹®ºÐ¿¡ ´ëÇÏ¿© ÀÍÀÏ ¹è¼Û¿Ï·á¸¦ º¸ÀåÇÏ´Â »óÇ°ÀÔ´Ï´Ù.
(´Ü, ¿ù¿äÀÏÀº 12½Ã±îÁö ÁÖ¹®¿¡ ÇÑÇÔ)
|
»óÇ°Àº, ÀÔ°í¿¹Á¤ÀÏ(Á¦Ç°Ãâ½ÃÀÏ)+Åùè»ç¹è¼ÛÀÏ(1ÀÏ)¿¡ ¹è¼Û¿Ï·á¸¦ º¸ÀåÇÕ´Ï´Ù. |
~
»óÇ°Àº À¯ÅëƯ¼º»ó ÀÎÅÍÆÄÅ©¿¡¼ Àç°í¸¦ º¸À¯ÇÏÁö ¾ÊÀº »óÇ°À¸·Î ÁÖ¹®ÀÏ+±âÁØÃâ°íÀÏ+Åùè»ç¹è¼ÛÀÏ(1ÀÏ)¿¡ ¹è¼Û¿Ï·á¸¦ º¸ÀåÇÕ´Ï´Ù.(Åä/°øÈÞÀÏÀº ¹è¼Û±â°£¿¡ Æ÷ÇÔµÇÁö ¾Ê½À´Ï´Ù.)
¡Ø±âÁØÃâ°íÀÏ:ÀÎÅÍÆÄÅ©°¡ »óÇ°À» ¼ö±ÞÇÏ¿© ¹°·ùâ°í¿¡¼ Æ÷Àå/Ãâ°íÇϱâ±îÁö ¼Ò¿äµÇ´Â ½Ã°£
|
|
<¾÷ü Á÷Á¢¹è¼Û/¿ÀǸ¶ÄÏ »óÇ°> |
~
»óÇ°Àº ¾÷ü°¡ ÁÖ¹®À» È®ÀÎÇÏ°í, Ãâ°íÇϱâ±îÁö °É¸®´Â ½Ã°£ÀÔ´Ï´Ù. ÁÖ¹®ÀÏ+±âÁØÃâ°íÀÏ+Åùè»ç¹è¼ÛÀÏ(2ÀÏ)¿¡ ¹è¼Û¿Ï·á¸¦ º¸ÀåÇÕ´Ï´Ù.(Åä/°øÈÞÀÏÀº ¹è¼Û±â°£¿¡ Æ÷ÇÔµÇÁö ¾Ê½À´Ï´Ù.)
¡Ø5ÀÏÀ̳» Ãâ°í°¡ ½ÃÀÛµÇÁö ¾ÊÀ»½Ã, ¿ÀǸ¶ÄÏ »óÇ°Àº ÀÚµ¿À¸·Î ÁÖ¹®ÀÌ Ãë¼ÒµÇ¸ç, °í°´´Ô²² Ç°Àýº¸»ó±ÝÀ» Áö±ÞÇØ µå¸³´Ï´Ù.
|
|
|
¹è¼Ûºñ ¾È³» |
µµ¼(Áß°íµµ¼ Æ÷ÇÔ)¸¸ ±¸¸ÅÇϽøé : ¹è¼Ûºñ 2,000¿ø (1¸¸¿øÀÌ»ó ±¸¸Å ½Ã ¹«·á¹è¼Û) À½¹Ý/DVD¸¸ ±¸¸ÅÇϽøé : ¹è¼Ûºñ 1,500¿ø (2¸¸¿øÀÌ»ó ±¸¸Å ½Ã ¹«·á¹è¼Û)
ÀâÁö/¸¸È/±âÇÁÆ®¸¸ ±¸¸ÅÇϽøé : ¹è¼Ûºñ 2,000¿ø (2¸¸¿øÀÌ»ó ±¸¸Å ½Ã ¹«·á¹è¼Û)
µµ¼¿Í À½¹Ý/DVD¸¦ ÇÔ²² ±¸¸ÅÇϽøé : ¹è¼Ûºñ 1,500¿ø 1¸¸¿øÀÌ»ó ±¸¸Å ½Ã ¹«·á¹è¼Û)
µµ¼¿Í ÀâÁö/¸¸È/±âÇÁÆ®/Áß°íÁ÷¹è¼Û»óÇ°À» ÇÔ²² ±¸¸ÅÇϽøé : 2,000¿ø (1¸¸¿øÀÌ»ó ±¸¸Å ½Ã ¹«·á¹è¼Û)
¾÷üÁ÷Á¢¹è¼Û»óÇ°À» ±¸¸Å½Ã : ¾÷üº°·Î »óÀÌÇÑ ¹è¼Ûºñ Àû¿ë
* ¼¼Æ®»óÇ°ÀÇ °æ¿ì ºÎºÐÃë¼Ò ½Ã Ãß°¡ ¹è¼Ûºñ°¡ ºÎ°úµÉ ¼ö ÀÖ½À´Ï´Ù.
* ºÏÄ«Æ®¿¡¼ ¹è¼Ûºñ¾ø¾Ö±â ¹öÆ°À» Ŭ¸¯Çϼż, µ¿ÀϾ÷ü»óÇ°À» Á¶±Ý ´õ ±¸¸ÅÇϽøé, ¹è¼Ûºñ¸¦ Àý¾àÇÏ½Ç ¼ö ÀÖ½À´Ï´Ù.
|
|
Çؿܹè¼Û ¾È³» |
ÀÎÅÍÆÄÅ©µµ¼¿¡¼´Â ±¹³»¿¡¼ ÁÖ¹®ÇϽðųª ÇØ¿Ü¿¡¼ ÁÖ¹®ÇÏ¿© ÇØ¿Ü·Î ¹è¼ÛÀ» ¿øÇÏ½Ç °æ¿ì DHL°ú Ư¾àÀ¸·Î Ã¥Á¤µÈ ¿ä±ÝÇ¥¿¡
ÀÇÇØ °³ÀÎÀÌ ÀÌ¿ëÇÏ´Â °æ¿ìº¸´Ù ¹è¼Û¿ä±ÝÀ» Å©°Ô ³·Ã߸ç DHL(www.dhl.co.kr)·Î Çؿܹè¼Û ¼ºñ½º¸¦ Á¦°øÇÕ´Ï´Ù.
Çؿܹè¼ÛÀº µµ¼/CD/DVD »óÇ°¿¡ ÇÑÇØ ¼ºñ½ºÇÏ°í ÀÖÀ¸¸ç, ´Ù¸¥ »óÇ°À» ºÏÄ«Æ®¿¡ ÇÔ²² ´ãÀ¸½Ç °æ¿ì Çؿܹè¼ÛÀÌ ºÒ°¡ÇÕ´Ï´Ù.
ÇØ¿ÜÁÖ¹®¹è¼Û ¼ºñ½º´Â ÀÎÅÍÆÄÅ© µµ¼ ȸ¿ø °¡ÀÔÀ» Çϼž߸¸ ½Åû °¡´ÉÇÕ´Ï´Ù. |
|
¾Ë¾ÆµÎ¼¼¿ä!!! |
µµ¸Å»ó ¹× Á¦ÀÛ»ç »çÁ¤¿¡ µû¶ó Ç°Àý/ÀýÆÇ µîÀÇ »çÀ¯·Î Ãë¼ÒµÉ ¼ö ÀÖ½À´Ï´Ù.
¿ÀǸ¶ÄϾ÷üÀÇ ¹è¼ÛÁö¿¬½Ã ÁÖ¹®ÀÌ ÀÚµ¿À¸·Î Ãë¼ÒµÉ ¼ö ÀÖ½À´Ï´Ù.
Ãâ°í°¡´É ½Ã°£ÀÌ ¼·Î ´Ù¸¥ »óÇ°À» ÇÔ²² ÁÖ¹®ÇÒ °æ¿ì Ãâ°í°¡´É ½Ã°£ÀÌ °¡Àå ±ä ±âÁØÀ¸·Î ¹è¼ÛµË´Ï´Ù.
À¯ÅëÀÇ Æ¯¼º»ó Ãâ°í±â°£Àº ¿¹Á¤º¸´Ù ¾Õ´ç°ÜÁö°Å³ª ´ÊÃçÁú ¼ö ÀÖ½À´Ï´Ù.
Åùè»ç ¹è¼ÛÀÏÀÎ ¼¿ï ¹× ¼öµµ±ÇÀº 1~2ÀÏ, Áö¹æÀº 2~3ÀÏ, µµ¼, »ê°£, ±ººÎ´ë´Â 3ÀÏ ÀÌ»óÀÇ ½Ã°£ÀÌ ¼Ò¿äµË´Ï´Ù. |
|
|
|
|