|
|
|
|
|
Programming Insight(ÇÁ·Î±×·¡¹Ö ÀλçÀÌÆ®)1
¤Ó ºê¶óÀ̾ð È£°Ç(Brian P. Hogan), ÇѼ±¿ë
¤Ó
ÀλçÀÌÆ®
¤Ó
HTML5 and CSS3
|
|
|
|
- Á¦ÈÞ¸ô ÁÖ¹® ½Ã °í°´º¸»ó, ÀϺΠÀ̺¥Æ® Âü¿© ¹× ÁõÁ¤Ç° ÁõÁ¤, ÇÏ·ç/´çÀÏ ¹è¼Û¿¡¼ Á¦¿ÜµÇ¹Ç·Î Âü°í ¹Ù¶ø´Ï´Ù.
-
-
-
¡ºHTML5 CSS3¡»Àº HTML5¿Í CSS3ÀÇ ´Ù¾çÇÑ ±â´É°ú ÇÔ²², ±âÁ¸ ºê¶ó¿ìÀú¿¡¼µµ ÃֽŠºê¶ó¿ìÀú¿Í °ÅÀÇ °°Àº »ç¿ëÀÚ °æÇèÀ» Á¦°øÇÏ´Â ¹æ¹ýÀ» ¾Ë·ÁÁØ´Ù. ±×µ¿¾È ºê¶ó¿ìÀú ȣȯ¼º ¹®Á¦·Î HTML5¿Í CSS3À» µµÀÔÇϱ⠲¨·ÁÇß´ø À¥ °³¹ßÀÚ¸¦ À§ÇØ ÀÌ Ã¥¿¡¼´Â ¸íÄèÇÏ°Ô ÇØ°áÃ¥À» Á¦½ÃÇÑ´Ù.
-
-
¡°HTML5³ª CSS3ÀÌ ÁÁÀº °Ç ¾Ë°ÚÁö¸¸, »ç¿ëÀÚÀÇ ºê¶ó¿ìÀú°¡ Áö¿øÇÏÁö ¸øÇÏ´Â °É?¡±
HTML5¿Í CSS3À» µµÀÔÇÏ¿© »ç¿ëÀÚ °æÇèÀ» °ÈÇÏ·Á°í Çصµ, ¸·»ó »ç¿ëÀÚÀÇ ºê¶ó¿ìÀú°¡ À̸¦ Áö¿øÇÏÁö ¸øÇÏ´Â Çö½Ç¿¡ ÁÂÀýÇϱⰡ ½Ê»óÀÌ´Ù. ÀÌ Ã¥Àº HTML5¿Í CSS3ÀÇ ´Ù¾çÇÑ ±â´É°ú ÇÔ²², ±âÁ¸ ºê¶ó¿ìÀú¿¡¼µµ ÃֽŠºê¶ó¿ìÀú¿Í °ÅÀÇ °°Àº »ç¿ëÀÚ °æÇèÀ» Á¦°øÇÏ´Â ¹æ¹ý(Æú¹é)À» ¾Ë·ÁÁØ´Ù. ±×µ¿¾È ºê¶ó¿ìÀú ȣȯ¼º ¹®Á¦·Î HTML5¿Í CSS3À» µµÀÔÇϱ⠲¨·ÁÇß´ø À¥ °³¹ßÀÚ¶ó¸é, ÀÌ Ã¥¿¡¼ ¸íÄèÇÑ ÇØ°áÃ¥À» ¾òÀ» ¼ö ÀÖÀ» °ÍÀÌ´Ù.
ÀÌ Ã¥ÀÇ ³»¿ë
1ºÎ¿¡¼´Â »ç¿ëÀÚ ÀÎÅÍÆäÀ̽º¿Í °ü·ÃµÈ ű×, À¥ Æû, Á¢±Ù¼º ºÎºÐÀ» ´Ù·ç¸ç, 2ºÎ¿¡¼´Â ĵ¹ö½º, ºñµð¿À/¿Àµð¿À ÀÓº£µù µîÀÇ º¸°í µéÀ» ¼ö ÀÖ´Â ±â¼ú, ¸¶Áö¸· 3ºÎ¿¡¼´Â HTML5´Â ¾Æ´ÏÁö¸¸ °ü·Ã ÀÖ´Â À¥ ±â¼úÀÎ À¥½ºÅ丮Áö, À¥¼ÒÄÏ, Áö¿À·ÎÄÉÀ̼Ç(Geolocation) µîÀ» ¼Ò°³ÇÑ´Ù. °¢ ÀåÀÇ ¸¶Áö¸·¿¡¼´Â °¢ ±â¼úµéÀÌ °¡±î¿î ¹Ì·¡¿¡ ¾î¶»°Ô ¹ßÀüÇÒÁöµµ °£·«ÇÏ°Ô »ìÆ캻´Ù.
ÀÌ Ã¥¿¡ ¼ö·ÏµÈ ¸ðµç ¿¹Á¦ ÄÚµå´Â ÃâÆÇ»ç ½ºÇÁ¸µ³ëÆ®ÀÎ http://insightbook.springnote.com/pages/7669159¿¡¼ ´Ù¿î¹ÞÀ» ¼ö ÀÖ½À´Ï´Ù.
-
-
¿Å±äÀÌÀÇ ±Û
ÁöÀºÀÌÀÇ ±Û
¡¡HTML5: Ç÷§Æû vs ¸í¼¼
¡¡Ã¥ÀÇ ±¸Á¶
¡¡ÀÌ Ã¥¿¡¼ ´Ù·ç´Â °Í
¡¡¸ÕÀú ¾Ë¾Æ¾ß ÇÒ °Í
¡¡¿Â¶óÀÎ ÀÚ¿ø
¡¡°¨»çÀÇ ±Û
1Àå HTML5¿Í CSS3ÀÇ °³¿ä
¡¡1.1 À¥ °³¹ßÀÇ Ç÷§Æû
¡¡¡¡´õ ºÐ¸íÇÑ ¸¶Å©¾÷
¡¡¡¡Ç÷¯±×Àο¡ ´ú ÀÇÁ¸ÇÏ´Â ¸ÖƼ¹Ìµð¾î
¡¡¡¡´õ ³ªÀº ¾ÖÇø®ÄÉÀ̼Ç
¡¡¡¡¡¡¹®¼ °£ µ¥ÀÌÅÍ ±³È¯
¡¡¡¡¡¡À¥ ¼ÒÄÏ
¡¡¡¡¡¡Å¬¶óÀ̾ðÆ® Ãø ½ºÅ丮Áö
¡¡¡¡´õ ÁÁÀº ÀÎÅÍÆäÀ̽º
¡¡¡¡¡¡´õ ÁÁÀº Æû
¡¡¡¡¡¡Çâ»óµÈ Á¢±Ù¼º
¡¡¡¡¡¡°³¼±µÈ ¼±ÅÃÀÚ
¡¡¡¡¡¡½Ã°¢ È¿°ú
¡¡1.2 ÇÏÀ§ ȣȯ¼º
¡¡1.3 ¾ÆÁ÷ °É¸²µ¹ÀÌ ³²¾Æ ÀÖ½À´Ï´Ù
¡¡¡¡ÀÎÅÍ³Ý ÀͽºÇ÷η¯
¡¡¡¡Á¢±Ù¼º
¡¡¡¡Æó±âµÈ ű׵é
¡¡¡¡È¸»çµéÀÇ ÀÌÇØ °ü°è
¡¡¡¡HTML5¿Í CSS3Àº ¾ÆÁ÷ ÁøÇà ÁßÀÎ ¸í¼¼ÀÔ´Ï´Ù
<1ºÎ »ç¿ëÀÚ ÀÎÅÍÆäÀ̽º °³¼±>
2Àå »õ·Î¿î ±¸Á¶Àû ÅÂ±×¿Í ¼Ó¼º
¡¡Tip 1) ½Ã¸Çƽ ¸¶Å©¾÷À¸·Î ºí·Î±× ¸®´º¾óÇϱâ
¡¡¡¡¸ðµç °ÍÀº ¿Ã¹Ù¸¥ µ¶Å¸ÀÔ¿¡¼ ½ÃÀÛÇÕ´Ï´Ù
¡¡¡¡¡¡ÇìÅÍ
¡¡¡¡¡¡ÇªÅÍ
¡¡¡¡³»ºñ°ÔÀ̼Ç
¡¡¡¡³»¿ë°ú ¼½¼Ç
¡¡¡¡article
¡¡¡¡¡¡aside¿Í »çÀ̵å¹Ù
¡¡¡¡¡¡aside´Â ÆäÀÌÁöÀÇ »çÀ̵å¹Ù°¡ ¾Æ´Õ´Ï´Ù
¡¡¡¡½ºÅ¸Àϸµ
¡¡¡¡Áö¿øµÇÁö ¾ÊÀ» ¶§´Â...
¡¡Tip 2) Ä¿½ºÅÒ µ¥ÀÌÅÍ ¼Ó¼ºÀ» »ç¿ëÇÑ Æ˾÷
¡¡¡¡³»¿ë°ú µ¿ÀÛÀÇ ºÐ¸®, ¶Ç´Â ¿ÂŬ¸¯ÀÌ ¿Ö ³ª»ÛÁö
¡¡¡¡¡¡Á¢±Ù¼ºÀ» °³¼±ÇØ¾ß ÇÕ´Ï...´Ù
¡¡¡¡¡¡onclickÀ» ¾ø¾Û´Ï´Ù
¡¡¡¡Ä¿½ºÅÒ µ¥ÀÌÅÍ ¼Ó¼ºÀÌ ¿ì¸®¸¦ ±¸¿øÇÕ´Ï´Ù!
¡¡¡¡Áö¿øµÇÁö ¾ÊÀ» ¶§´Â...
¡¡¡¡¹Ì·¡¿¡´Â
3Àå »ç¿ëÀÚ Áß½ÉÀÇ À¥ Æû ¸¸µé±â
¡¡Tip 3) »õ·Î¿î ÀÔ·Â Çʵå·Î µ¥ÀÌÅÍ ¼³¸íÇϱâ
¡¡¡¡AwesomeCoÀÇ ÇÁ·ÎÁ§Æ® Æû °³¼±
¡¡¡¡¡¡±âº»ÀûÀÎ Æû
¡¡¡¡¡¡range·Î ½½¶óÀÌ´õ ¸¸µé±â
¡¡¡¡¡¡¼ýÀÚ¿Í ½ºÇɹڽº ´Ù·ç±â
¡¡¡¡¡¡³¯Â¥
¡¡¡¡¡¡À̸ÞÀÏ
¡¡¡¡URL
¡¡¡¡¡¡»ö±ò
¡¡¡¡Áö¿øµÇÁö ¾ÊÀ» ¶§´Â...
¡¡¡¡¡¡»ö»ó ¼±Åñ⠱³Ã¼
¡¡¡¡¡¡¸ð´õ³ªÀÌÀú
¡¡Tip 4) autofocus: ÀÚµ¿ Æ÷Ä¿½º À̵¿
¡¡¡¡Áö¿øµÇÁö ¾ÊÀ» ¶§´Â...
¡¡Tip 5) placeholder ¼Ó¼ºÀ¸·Î ÈùÆ® Á¦°øÇϱâ
¡¡¡¡°£´ÜÇÑ È¸¿ø°¡ÀÔ Æû
¡¡¡¡¡¡ÀÚµ¿¿Ï¼º ¹æÁö
¡¡¡¡Áö¿øµÇÁö ¾ÊÀ» ¶§´Â...
¡¡Tip 6) contenteditableÀ» ÀÌ¿ëÇÑ Áï¼® ÆíÁý
¡¡¡¡ÇÁ·ÎÇÊ Æû
¡¡¡¡µ¥ÀÌÅÍ À¯Áö
¡¡¡¡Áö¿øµÇÁö ¾ÊÀ» ¶§´Â...
¡¡¡¡¡¡ÆíÁý ÆäÀÌÁö¸¦ ¸¸µì´Ï´Ù
¡¡¡¡¹Ì·¡¿¡´Â
4Àå CSS3·Î ´õ ³ªÀº »ç¿ëÀÚ ÀÎÅÍÆäÀ̽º ¸¸µé±â
¡¡Tip 7) °¡»ó Ŭ·¡½º·Î Å×ÀÌºí¿¡ ½ºÅ¸ÀÏ ÁÖ±â
¡¡¡¡ÁÖ¹®¼ °³¼±
¡¡¡¡¡¡:nth-of-typeÀ¸·Î ½ºÆ®¶óÀÌÇÁ ¸¸µé±â
¡¡¡¡¡¡¿¿¡ µû¶ó Á¤·ÄÇϱâ :nth-child
¡¡¡¡¡¡¸¶Áö¸· ÇàÀ» ±½°Ô Çϱâ :last-child
¡¡¡¡¡¡°Å²Ù·Î ã±â :nth-last-child
¡¡¡¡Áö¿øµÇÁö ¾ÊÀ» ¶§´Â...
¡¡¡¡¡¡HTML ¸¶Å©¾÷ º¯°æ
¡¡¡¡¡¡ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ ¾²¼¼¿ä
¡¡Tip 8) ¸µÅ© ÁÖ¼Ò ÇÁ¸°Æ® - :after, content
¡¡¡¡CSS
¡¡¡¡Áö¿øµÇÁö ¾ÊÀ» ¶§´Â...
¡¡Tip 9) ´Ù´Ü ·¹À̾ƿô ¸¸µé±â
¡¡¡¡´Ü ³ª´©±â
¡¡¡¡Áö¿øµÇÁö ¾ÊÀ» ¶§´Â...
¡¡Tip 10) ¹Ìµð¾î Äõ¸®¸¦ ÀÌ¿ëÇØ ¸ð¹ÙÀÏ ÀÎÅÍÆäÀ̽º ¸¸µé±â
¡¡¡¡Áö¿øµÇÁö ¾ÊÀ» ¶§´Â...
¡¡¡¡¹Ì·¡¿¡´Â
5Àå Á¢±Ù¼º Çâ»ó½ÃÅ°±â
¡¡Tip 11) ARIA ¿ªÇÒÀ» ÀÌ¿ëÇØ ³»ºñ°ÔÀÌ¼Ç ÈùÆ® ÁÖ±â
¡¡¡¡Ç¥ÁöÆÇ(landmark) ¿ªÇÒ
¡¡¡¡¹®¼ ±¸Á¶ ¿ªÇÒ
¡¡¡¡Áö¿øµÇÁö ¾ÊÀ» ¶§´Â...
¡¡Tip 12) °»½ÅÇÒ ¼ö ÀÖ´Â ¿µ¿ªÀ» Á¢±Ù¼º ÀÖ°Ô ¸¸µé±â
¡¡¡¡ÆäÀÌÁö ¸¸µé±â
¡¡¡¡¡¡°ø¼ÕÇÕ ¾÷µ¥ÀÌÆ® ´ë °í¾ÐÀû ¾÷µ¥ÀÌÆ®
¡¡¡¡¡¡Àüü ¾÷µ¥ÀÌÆ®
¡¡¡¡¿µ¿ª ¼û±â±â
¡¡¡¡Áö¿øµÇÁö ¾ÊÀ» ¶§´Â...
¡¡¡¡¹Ì·¡¿¡´Â
<2ºÎ º¸´Â °Í°ú µè´Â °ÍÀ» »õ·Ó°Ô>
6Àå ĵ¹ö½º¿¡ ±×¸®±â
¡¡Tip 13) ·Î°í ±×¸®±â
¡¡¡¡·Î°í ±×¸®±â
¡¡¡¡ÅؽºÆ® ³Ö±â
¡¡¡¡¼± ±×¸®±â
¡¡¡¡½ÃÀÛÁ¡ ¿Å±â±â
¡¡¡¡»öÄ¥Çϱâ
¡¡¡¡Áö¿øµÇÁö ¾ÊÀ» ¶§´Â...
¡¡Tip 14) RGraph ¶óÀ̺귯¸®·Î Åë°è ±×·¡ÇÁ ±×¸®±â
¡¡¡¡HTML·Î µ¥ÀÌÅÍ Ç¥Çö
¡¡¡¡HTMLÀ» ¸·´ë±×·¡ÇÁ·Î ¹Ù²Ù±â
¡¡¡¡´ëü ³»¿ë º¸¿©ÁÖ±â
¡¡¡¡Áö¿øµÇÁö ¾ÊÀ» ¶§´Â...
¡¡¡¡¹Ì·¡¿¡´Â
7Àå ¿Àµð¿À¿Í ºñµð¿À
¡¡7.1 ¿ª»ç
¡¡7.2 ÄÁÅ×ÀÌ³Ê¿Í ÄÚµ¦
¡¡¡¡ºñµð¿À ÄÚµ¦
¡¡¡¡¡¡ÄÚµ¦°ú Áö¿ø ºê¶ó¿ìÀú
¡¡¡¡¡¡H.264
¡¡¡¡¡¡Å׿À¶ó
¡¡¡¡¡¡VP8
¡¡¡¡¿Àµð¿À ÄÚµ¦
¡¡¡¡¡¡ÄÚµ¦°ú Áö¿ø ºê¶ó¿ìÀú
¡¡¡¡¡¡AAC
¡¡¡¡¡¡Vorbis (OGG)
¡¡¡¡¡¡MP3
¡¡¡¡ÄÁÅ×ÀÌ³Ê¿Í ÄÚµ¦
¡¡Tip 15) ¿Àµð¿À ´Ù·ç±â
¡¡¡¡°£´ÜÇÑ ¸®½ºÆ® ¸¸µé±â
¡¡¡¡Áö¿øµÇÁö ¾ÊÀ» ¶§´Â...
¡¡Tip 16) ºñµð¿À ´Ù·ç±â
¡¡¡¡Áö¿øµÇÁö ¾ÊÀ» ¶§´Â...
¡¡¡¡HTML5 ºñµð¿ÀÀÇ ÇÑ°è
¡¡¡¡¿Àµð¿À, ºñµð¿À, Á¢±Ù¼º
¡¡¡¡¹Ì·¡¿¡´Â
8Àå ´«À» Áñ°Ì°Ô
¡¡Tip 17) Å׵θ®¸¦ µÕ±Û°Ô
¡¡¡¡·Î±×ÀÎ ÆûÀ» ºÎµå·´°Ô
¡¡¡¡¡¡ºê¶ó¿ìÀú Àü¿ë ±ÔÄ¢
¡¡Áö¿øµÇÁö ¾ÊÀ» ¶§´Â...
¡¡¡¡¡¡ºê¶ó¿ìÀú Áö¿ø È®ÀÎ
¡¡¡¡¡¡jQuery Corners
¡¡¡¡¡¡formCorners Ç÷¯±×ÀÎÀ» ¸¸µé¾îº¾½Ã´Ù
¡¡¡¡¡¡µÕ±Û°Ô µÕ±Û°Ô
¡¡¡¡¡¡¹Ì¼¼ Á¶Á¤
¡¡Tip 18) ±×¸²ÀÚ, ±×·¡µð¾ðÆ®, º¯Çü ´Ù·ç±â
¡¡¡¡±âº»ÀûÀÎ ±¸Á¶
¡¡¡¡¡¡±×·¡µð¾ðÆ® ³Ö±â
¡¡¡¡¡¡±×¸²ÀÚ ³Ö±â
¡¡¡¡¡¡À̸§Ç¥ ȸÀü
¡¡¡¡¡¡¹ÝÅõ¸íÇÑ ¹è°æ
¡¡¡¡Áö¿øµÇÁö ¾ÊÀ» ¶§´Â...
¡¡¡¡¡¡È¸Àü
¡¡¡¡¡¡±×·¡µð¾ðÆ®
¡¡¡¡¡¡Åõ¸íµµ
¡¡¡¡¡¡ÇÕÄ¡±â
¡¡Tip 19) ÁøÂ¥ ¼Ã¼ »ç¿ëÇϱâ
¡¡¡¡@font-face
¡¡¡¡¡¡¡¡¼Ã¼ Æ÷¸Ë
¡¡¡¡¡¡¡¡Çü½Ä°ú Áö¿ø ºê¶ó¿ìÀú
¡¡¡¡¡¡¡¡¼Ã¼ ¹Ù²Ù±â
¡¡¡¡¡¡Áö¿øµÇÁö ¾ÊÀ» ¶§´Â...
¡¡¡¡¡¡¹Ì·¡¿¡´Â
<3ºÎ HTML5¸¦ ³Ñ¾î¼>
9Àå Ŭ¶óÀ̾ðÆ® Ãø µ¥ÀÌÅÍ·Î ÀÛ¾÷Çϱâ
¡¡Tip 20) localStorage·Î »ç¿ëÀÚ ¼³Á¤ ÀúÀåÇϱâ
¡¡¡¡»ç¿ëÀÚ ¼³Á¤ Æû ¸¸µé±â
¡¡¡¡¡¡¼³Á¤ ÀúÀåÇÏ°í ºÎ¸£±â
¡¡¡¡¡¡¼³Á¤ Àû¿ëÇϱâ
¡¡¡¡¡¡Áö¿øµÇÁö ¾ÊÀ» ¶§´Â...
¡¡¡¡¡¡¼¹ö¿¡ º¸°ü
¡¡¡¡¡¡ÄíÅ°¿Í ÀÚ¹Ù½ºÅ©¸³Æ®
¡¡Tip 21) Ŭ¶óÀ̾ðÆ® Ãø °ü°èÇü µ¥ÀÌÅͺ£À̽º
¡¡¡¡ºê¶ó¿ìÀú¿¡¼ CRUD
¡¡¡¡³ëÆ® ÀÎÅÍÆäÀ̽º
¡¡¡¡µ¥ÀÌÅͺ£À̽º ¿¬°áÇϱâ
¡¡¡¡³ëÆ® Å×ÀÌºí ¸¸µé±â
¡¡¡¡³ëÆ® ºÒ·¯¿À±â
¡¡¡¡¡¡Æ¯Á¤ ·¹ÄÚµå °¡Á®¿À±â
¡¡¡¡·¹ÄÚµåÀÇ »ðÀÔ, ¾÷µ¥ÀÌÆ®, »èÁ¦
¡¡¡¡°¨½Î±â
¡¡¡¡Áö¿øµÇÁö ¾ÊÀ» ¶§´Â...
¡¡Tip 22) ¿ÀÇÁ¶óÀÎÀ¸·Î ÀÛ¾÷Çϱâ
¡¡¡¡¸Å´ÏÆ佺Ʈ·Î ij½Ã Á¤ÀÇÇϱâ
¡¡¡¡¸Å´ÏÆ佺Ʈ¿Í ij½Ã
¡¡¹Ì·¡¿¡´Â
10Àå ´Ù¸¥ API ÀÌ¿ëÇϱâ
¡¡Tip 23) È÷½ºÅ丮 º¸Á¸Çϱâ
¡¡¡¡ÇöÀç »óÅ ÀúÀåÇϱâ
¡¡¡¡ÀÌÀü »óÅ ºÒ·¯¿À±â
¡¡¡¡ÃʱâÈ
¡¡¡¡Áö¿øµÇÁö ¾ÊÀ» ¶§´Â...
¡¡Tip 24) µµ¸ÞÀÎ »çÀÌÀÇ ´ëÈ
¡¡¡¡°í°´Áö¿ø ¸®½ºÆ®
¡¡¡¡¸Þ½ÃÁö ÀÛ¼º
¡¡¡¡°í°´Áö¿ø »çÀÌÆ®
¡¡¡¡¡¡¸Þ½ÃÁö ¹Þ±â
¡¡¡¡Áö¿øµÇÁö ¾ÊÀ» ¶§´Â...
¡¡Tip 25) äÆðú À¥¼ÒÄÏ
¡¡¡¡Ã¤Æà ÀÎÅÍÆäÀ̽º
¡¡¡¡¼¹ö¿¡°Ô ¸»Çϱâ
¡¡¡¡Áö¿øµÇÁö ¾ÊÀ» ¶§´Â...
¡¡¡¡¡¡¼ÒÄÏ.. ¹¹¶ó°í¿ä?
¡¡¡¡¡¡¼¹ö
¡¡Tip 26) Áö¿À·ÎÄÉÀ̼Ç: ¿©±ä ¾îµò°¡
¡¡¡¡AwesomeCenter ã¾Æ°¡±â
¡¡¡¡»ç¿ëÀÚ Ã£±â
¡¡¡¡Áö¿øµÇÁö ¾ÊÀ» ¶§´Â...
¡¡¡¡¹Ì·¡¿¡´Â
11Àå °ð ¿ì¸® °çÀ¸·Î ¿Ã °Í
¡¡11.1 CSS3 Æ®·£Áö¼Ç
¡¡¡¡Å¸ÀÌ¹Ö ÇÔ¼ö
¡¡11.2 À¥ ¿öÄ¿
¡¡11.3 ³»ÀåµÈ µå·¡±× ¾Ø µå·Ó Áö¿ø
¡¡¡¡µå·¡±× ¾Ø µå·Ó À̺¥Æ®
¡¡¡¡¿ä¼Ò µå·ÓÇϱâ
¡¡¡¡½ºÅ¸ÀÏ ¹Ù²Ù±â
¡¡¡¡ÆÄÀÏ µå·¡±ë
¡¡¡¡Á¦´ë·Î µÇ´Â °Ô ¾ø½À´Ï´Ù
¡¡11.4 WebGL
¡¡11.5 »öÀÎµÈ µ¥ÀÌÅͺ£À̽º API
¡¡11.6 Æû À¯È¿¼º °Ë»ç
¡¡11.7 ¾ÆÁ÷ °É¸²µ¹ÀÌ ³²¾Æ ÀÖ½À´Ï´Ù
ºÎ·Ï A ±â´É »öÀÎ
¡¡A.1 »õ·Î¿î ¿ä¼Ò
¡¡A.2 ¼Ó¼º
¡¡A.3 Æû
¡¡A.4 Æû ÇÊµå ¼Ó¼º
¡¡A.5 Á¢±Ù¼º
¡¡A.6 ¸ÖƼ¹Ìµð¾î
¡¡A.7 CSS3
¡¡A.8 Ŭ¶óÀ̾ðÆ® Ãø ½ºÅ丮Áö
¡¡A.9 ±âŸ API
ºÎ·Ï B jQuery ±âÃÊ
¡¡B.1 jQuery ºÒ·¯¿À±â
¡¡B.2 jQuery ±âº»
¡¡B.3 ³»¿ëÀ» ¼öÁ¤ÇÏ´Â ¸Þ¼µå
¡¡¡¡hide¿Í show
¡¡¡¡html, val, attr
¡¡¡¡append, prepend, wrap
¡¡¡¡CSS¿Í Ŭ·¡½º
¡¡¡¡Ã¼ÀÎ
¡¡B.4 ¿ä¼Ò ¸¸µé±â
¡¡B.5 À̺¥Æ®
¡¡¡¡bind
¡¡¡¡¿ø·¡ À̺¥Æ®
¡¡B.6 ¹®¼°¡ ÁغñµÇ¾úÀ» ¶§
ºÎ·Ï C ¿Àµð¿À¿Í ºñµð¿À ÀÎÄÚµù
¡¡C.1 À½¾Ç ÀÎÄÚµù
¡¡C.2 µ¿¿µ»ó ÀÎÄÚµù
ºÎ·Ï D Âü°í ÀÚ·á
¡¡D.1 À¥
-
-
|
ºê¶óÀ̾ð È£°Ç(Brian P. Hogan) [Àú]
|
|
-
À¥ ÇÁ·Î±×·¡¹Ö ºÐ¾ß¿¡¼ ÀÏÇÏ´Â °³¹ßÀÚ·Î, µ¿ÀÏ ºÐ¾ß¿¡¼ Àú¼ú ¹× °»ç È°µ¿µµ ÇÏ°í ÀÖ´Ù. ´ëÇп¡¼ ÇÁ·Î±×·¡¹Ö ÀÔ¹® °úÁ¤À» °¡¸£Ä¡°í ÀÖÀ¸¸ç, ¼º´É ±â¹Ý ÇнÀ ºÐ¾ß¿¡ °ü½ÉÀ» °®°í ÀÖ´Ù. Àú¼·Î´Â [À¥ °³¹ß ·¹½ÃÇÇ], [HTML5 & CSS3], [°³¹ßÀÚ, À¥ µðÀÚÀο¡ ¶Ù¾îµé´Ù] µîÀÌ ÀÖ´Ù.
-
|
ÇѼ±¿ë [Àú]
|
|
-
À¥ Ç¥ÁØ°ú ÀÚ¹Ù½ºÅ©¸³Æ®¿¡ °ü½ÉÀÌ ¸¹Àº ¹ø¿ª°¡ÀÔ´Ï´Ù. 2008³âºÎÅÍ À¥ °ü·Ã ÀÏÀ» ÇßÀ¸¸ç, ¡®WCAG 2.0À» À§ÇÑ ÀϹÝÀû Å×Å©´Ð¡¯ µîÀÇ ¹®¼¸¦ ¹ø¿ªÇØ À¥¿¡ ¿Ã·È½À´Ï´Ù. ¹ø¿ª¼·Î ¡¶ÆÄÀ̽ãÀ¸·Î À¥ Å©·Ñ·¯ ¸¸µé±â(2ÆÇ)¡· ¡¶ÇÁ·Î±×·¡¸Ó ù°ÉÀ½¡· ¡¶·¯´× ÀÚ¹Ù½ºÅ©¸³Æ®¡·, ¡¶¿¡¸¯ ¸¶À̾îÀÇ CSS ³ëÇÏ¿ì¡· ¡¶HTML5&CSS3: ¿À´Ã ±¸ÇöÇÏ´Â ³»ÀÏÀÇ À¥ Ç¥ÁØ¡· ¡¶ÇÁ·ÐÆ®¿£µå °³¹ßÀÚ¸¦ À§ÇÑ ÀÚ¹Ù½ºÅ©¸³Æ® ÇÁ·Î±×·¡¹Ö¡· µîÀÌ ÀÖ½À´Ï´Ù.
-
-
Àüü 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ÀÏ ÀÌ»óÀÇ ½Ã°£ÀÌ ¼Ò¿äµË´Ï´Ù. |
|
|
|
|