|
|
|
|
|
¾Æ¸§´Ù¿î À¥»çÀÌÆ® ¸¸µé±â ½Ã¸®Áî1
¤Ó Á¦·¹¹Ì Å°½º(Jeremy Keith), ±èÁßö
¤Ó
À¥¾×Ãò¾ó¸®ÄÚ¸®¾Æ
¤Ó
HTML5 FOR WEB DESIGNERS second edition
|
|
|
|
- Á¦ÈÞ¸ô ÁÖ¹® ½Ã °í°´º¸»ó, ÀϺΠÀ̺¥Æ® Âü¿© ¹× ÁõÁ¤Ç° ÁõÁ¤, ÇÏ·ç/´çÀÏ ¹è¼Û¿¡¼ Á¦¿ÜµÇ¹Ç·Î Âü°í ¹Ù¶ø´Ï´Ù.
-
-
-
¡ºÀ¥µðÀÚÀ̳ʸ¦ À§ÇÑ HTML5¡»´Â À¥ °³¹ßÀÚÀÌÀÚ Àú¼ú°¡·Î ¾Ë·ÁÁø Á¦·¹¹Ì Å°½º¿Í À̹ø¿¡ Âü¿©ÇÑ ·¹ÀÌö ¾Øµå·çÀÇ °øÀú·Î [HTML5 FOR WEB DESIGNERS, second edition]À» ¹ø¿ªÇÑ °³Á¤ÆÇÀÌ´Ù. HTML5ÀÇ ±× ±âº» ¿ø¸®¿Í ±âÃÊ ¹®¹ýÀ» Àϸñ¿ä¿¬ÇÏ°Ô ¹è¿ï ¼ö ÀÖ´Ù. ¶ÇÇÑ Á¢±Ù¼º°ú ÄÜÅÙÃ÷ Áß½ÉÀÇ À¥ Ç¥ÁØ¿¡ ÀÔ°¢ÇÏ¿© À¥µðÀÚÀÌ³Ê¿Í °³¹ßÀÚµéÀÇ Àǹ®°ú ¿À·ù¸¦ ÇØ°áÇØÁØ´Ù.
-
-
[À¥µðÀÚÀ̳ʸ¦ À§ÇÑ HTML5]°¡ Ãâ°£µÈ Áö 5³â ¸¸¿¡ »õ·Ó°Ô ¾÷µ¥ÀÌÆ®µÇ¼ ³ª¿Ô´Ù. ÀÌ Ã¥Àº ÃÊÆÇ ¶§ ´Üµ¶ ÀúÀÚ¿´´ø À¥ °³¹ßÀÚÀÌÀÚ Àú¼ú°¡·Î ¾Ë·ÁÁø Á¦·¹¹Ì Å°½ºJeremy Keith¿Í À̹ø¿¡ Âü¿©ÇÑ ·¹ÀÌö ¾Øµå·çRachel AndrewÀÇ °øÀú·Î [HTML5 FOR WEB DESIGNERS, second edition]À» ¹ø¿ªÇÑ °³Á¤ÆÇÀÌ´Ù. ÀÌ µÎ ÀúÀÚ´Â ¿ì¸®°¡ À¥ µðÀÚÀÎ ¿ª»çÀÇ ¾î¶² ¼ø°£¿¡ ÀÖ´ÂÁö ´Ü ÇÑ ¼ø°£µµ ÀØÁö ¾Ê°í, ´Ù¾çÇÑ È¯°æÀÇ »ç¿ëÀÚ¸¦ °í·ÁÇÏ´Â ÀÏÀÌ À¥À» ¾ó¸¶³ª dz¿ä·Ó°Ô ÇÏ´ÂÁö ÀÌ Ã¥À» ÅëÇØ ¸»ÇÏ°í ÀÖ´Ù. ÀÌ Ã¥ÀÌ ÀÌ·¸°Ô °·ÂÇØÁú ¼ö ÀÖ¾ú´ø °ÍÀº ¹Ù·Î À̵éÀÌ °¡Áø HTML°ú »ç¶÷À» ¹è·ÁÇÏ´Â ¸¶À½¿¡ ÀÖÀ» °ÍÀÌ´Ù.
HTML5´Â HTML Áß¿¡¼µµ °¡Àå ±ä ½ºÆåÀ» ÀÚ¶ûÇÑ´Ù. ±â´ÉÀº Ź¿ùÇÏÁö¸¸ º¹ÀâÇϱ⵵ ÇÏ´Ù. ±×·± ÀÌÀ¯µµ ÇѸòÇÏ¿© 2011³â¿¡ À¥¾×Ãò¾ó¸®ÄÚ¸®¾Æ°¡ ÀÌ Ã¥ÀÇ ÃÊÆÇÀ» ¹ßÇàÇÑ ÀÌÈÄ ¼ö ¸¹Àº HTML5 µµ¼µéÀÌ Ãâ°£µÇ¾î ¿Ô´Ù. »ó¼¼ÇÑ ±â¼úÀûÀÎ ³»¿ëµéÀÌ ¼¼úµÇ¾î ÀÖ°í, º¸°í º£³¢¸é ´çÀåÀÌ¶óµµ À¥»çÀÌÆ® Çϳª°¡ ¶ÒµüÇÏ°í ¸¸µé¾îÁú °Í °°Àº ¿¹Á¦µé·Î °¡µæ Â÷ ÀÖ´Ù. ÀÌ·± Ã¥µéÀ» º¸´Ù°¡ ÀÌ Ã¥À» Á¢ÇÏ°Ô µÇ¸é ¡®ÀÌ°Ç ?¹Ì? ÀÌ Å©±â¿¡ ÀÌ µÎ²²´Â? HTML5 Ã¥ ¸Â¾Æ?¡¯ ¶ó´Â Àǹ®ÀÌ µé °ÍÀÌ´Ù.
±×·¸´Ù. [À¥µðÀÚÀ̳ʸ¦ À§ÇÑ HTML5 (°³Á¤ÆÇ)]Àº ¾ã°í, ÀÛÀº Ã¥ÀÌ´Ù. ÇÏÁö¸¸, ±× ¾È¿¡¼ ´Ù¸¥ Ã¥µé¿¡¼´Â ãÀ» ¼ö ¾ø¾ú´ø ¡®¿Ö?¡¯¶ó´Â ±Ùº»ÀûÀÎ Áú¹®¿¡ ´ëÇÑ ´äÀ» ¾òÀ» ¼ö ÀÖ´Ù. Áö±Ý±îÁö À¥¾×Ãò¾ó¸®ÄÚ¸®¾Æ¿¡¼ Ãâ°£ÇØ ¿Ô´ø ¸ðµç ¼ÀûµéÀ» °üÅëÇÏ´Â, ´Ü¼øÈ÷ ¡®±â¼úÀ» À§ÇÑ ±â¼ú¡¯ÀÌ ¾Æ´Ñ ¡®»ç¶÷¿¡ ´ëÇÑ °í¹ÎÀ» ÇÏ´Â ±â¼ú¡¯À̶ó´Â Å« È帧ÀÌ »ì¾ÆÀֱ⿡ ÀÌ Ã¥ÀÇ Ãâ°£À» ¸Á¼³ÀÌÁö ¾Ê°í °ÇàÇÒ ¼ö ÀÖ¾ú´Ù.
ÀÌ Áú¹®ÀÇ Á߿伺Àº ¸¹Àº »ç¿¬°ú ±¼°îÀ» µó°í ¼¼»ó¿¡ ³ª¿Â HTML5ÀÇ ¼³°è ¿øÄ¢ ¡°Ãæµ¹ÀÌ ¹ß»ýÇÒ °æ¿ì, ÀÌ·ÐÀûÀÎ ¼ø¼ö¼ºº¸´Ù´Â ±â¼ú ¸í¼¼¸¦, ±â¼ú ¸í¼¼º¸´Ù´Â ±¸ÇöÇÏ´Â »ç¶÷À», ±×¸®°í ±¸ÇöÇÏ´Â »ç¶÷ º¸´Ù´Â °³¹ßÀÚ¸¦, ¶ÇÇÑ °³¹ßÀÚº¸´Ù´Â »ç¿ëÀÚ¸¦ °í·ÁÇ϶󡱴 ÀǹÌÀÇ ¡°»ç¿ë ±â¹Ý ¿ì¼±±Ç¡±¿¡¼ ´Ù½Ã ÇÑ ¹ø È®ÀεȴÙ.
HTML5ÀÇ ¾ÐµµÀûÀÎ ±â¼ú ¸í¼¼¸¦ ¾Õ¿¡ µÐ °³¹ßÀÚ, µðÀÚÀ̳ʵéÀÇ ´ëºÎºÐÀº ¾î·Á¿î ¼öÇÐ ¹®Á¦¸¦ Ç®¾î¾ß ÇÒ ¶§¿Í ºñ½ÁÇÑ ´À³¦À» ¹ÞÀ» °ÍÀÌ´Ù. »ç¶÷µéÀÌ ¼öÇÐÀ» ¾î·Á¿öÇÏ´Â °¡Àå Å« ÀÌÀ¯´Â ±× ±âº» ¿ø¸®¿¡ ´ëÇÑ ÃæºÐÇÑ ÀÌÇØ°¡ ºÎÁ·Çϱ⠶§¹®ÀÌ´Ù. ±âº» ¿ø¸®¸¦ ±ú´Ý°Ô µÇ´Â ¼ø°£, ¾î·Á¿î ¼öÇÐ ¹®Á¦´Â Àç¹ÌÀÖ´Â ÆÛÁñ °ÔÀÓÀ¸·Î º¯ÇÒ ¼öµµ ÀÖ´Ù.
ÀÌ Ã¥À» ÅëÇؼ ¿©·¯ºÐµéÀº HTML5ÀÇ ±× ±âº» ¿ø¸®¿Í ±âÃÊ ¹®¹ýÀ» Àϸñ¿ä¿¬ÇÏ°Ô ¹è¿ï ¼ö ÀÖÀ» °ÍÀÌ´Ù. HTML5°¡ »ý°¢ÇÏ´Â °Íº¸´Ù ÈξÀ °£°áÇÏ°í, ´Ü¼øÇÏ°Ô ¼³°èµÇ¾î ÀÖÀ½À» ¾Ë ¼ö ÀÖ°í, ±×¿¡ ´ëÇÑ ÀÌÇظ¦ ¹ÙÅÁÀ¸·Î ¿©·¯ºÐÀÌ »ó»óÇÒ ¼ö ÀÖ´Â °·ÂÇÏ°í ´Ù¾çÇÑ ÀÀ¿ëÇÁ·Î±×·¥°ú À¥»çÀÌÆ®¸¦ ¸¸µå´Âµ¥ ÇÑ °ÉÀ½ ´õ ³ª¾Æ°¥ ¼ö ÀÖÀ» °ÍÀÌ´Ù.
ÀÌ Ã¥Àº źźÇÑ µðÀÚÀÎ ¿øÄ¢À» ±â¹ÝÀ¸·Î ¸¸µé¾îÁ³°í, ÃÖ±Ù °¡Àå ÇÖÇÑ ±â¼ú·Î ¾²ÀÌ´Â ¹ÝÀÀÇü µðÀÚÀΰú °³¹ßÀÇ ¼±µÎ¸¦ ¸ñÇ¥·Î ´Ùµë¾îÁ® ÀÖ´Ù. ¶ÇÇÑ Á¢±Ù¼º°ú ÄÜÅÙÃ÷ Áß½ÉÀÇ À¥ Ç¥ÁØ¿¡ ÀÔ°¢ÇÏ¿© À¥µðÀÚÀÌ³Ê¿Í °³¹ßÀÚµéÀÇ Àǹ®°ú ¿À·ù¸¦ ÇØ°áÇØÁØ´Ù. ±×·¸±â ¶§¹®¿¡ µðÀÚÀ̳Ê, °³¹ßÀÚ ¸ðµÎ´Â HTML5¸¦ ¾î¶»°Ô »ç¿ëÇÏ¿© ¾î¶² ±â¼úµé°ú Á¢±Ù¹ýÀ» ÅëÇÏ¿© ¿øÇÏ´Â °á°ú¹°À» ¸¸µé¾î ³¾ ¼ö ÀÖÀ»Áö ¹è¿ï ¼ö ÀÖÀ» °ÍÀÌ´Ù. ¶ÇÇÑ ¼·Î¸¦ Á» ´õ ÀÌÇØÇÒ ¼ö ÀÖ´Â °è±â°¡ µÇ¾î, HTML5°¡ ³²°ÜÁØ ¡®¹®¹ý¿¡¼ Á¤ÇØÁÖÁö ¾ÊÀº ¹®Á¦´Â ½º½º·Î, ÆÀ°ú °³ÀÎÀÇ ¸òÀ¸·Î¡¯¶ó´Â Äù½ºÆ®¸¦ ÇÔ²² Ç®¾î³ª°¥ Å« ¿øµ¿·ÂÀ» ¾ò°Ô µÉ °ÍÀÌ´Ù.
ÀÌ Ã¥Àº À¥ »ê¾÷¿¡ ¶Ù¾îµç Áö ¾ó¸¶ ¾È µÈ ȤÀº ¸ñÇ¥·Î »ï°í ÀÖ´Â »õ³»±âµé°ú À¥ »ê¾÷ÀÇ Ç³ÆÄ·Î ¸Á¸Á´ëÇظ¦ ¶°µµ´À¶ó ÇÑ ¹øµµ ¡®¿Ö?¡¯ Áú¹®À» ½º½º·Î ´øÁ® º¸Áö ¸øÇß´ø À̵鿡°Ô´Â HTML5°¡ ¹«¾ùÀÎ...Áö, ¿Ö HTML5¸¦ »ç¿ëÇØ¾ß ÇÏ´ÂÁö¸¦ ¾Ë·ÁÁÜ°ú µ¿½Ã¿¡ ¾ÕÀ¸·Î ÇìÃijª°¡¾ß ÇÒ À¥ »ê¾÷À̶ó´Â ÅÂdz ¼Ó¿¡¼µµ Èçµé¸®Áö ¾ÊÀ» ´Ü´ÜÇÑ »Ñ¸®¸¦ ¸¸µé ¼ö ÀÖµµ·Ï ÇØÁÙ °ÍÀÌ´Ù.
ÀÌ·± ÀÌÀ¯·Î ´Ü¾ðÄÁ´ë [À¥µðÀÚÀ̳ʸ¦ À§ÇÑ HTML5 (°³Á¤ÆÇ)]Àº Á¦¸ñ°ú´Â ´Þ¸® À¥µðÀÚÀ̳ʸ¸À» À§ÇÑ Ã¥ÀÌ ¾Æ´Ï¶ó, À¥ »ê¾÷¿¡¼ °í±ººÐÅõÇÏ°í ÀÖ´Â ¸ðµç À̵éÀ» À§ÇÑ Ã¥ÀÌ´Ù.
Ã¥ ¼ÓÀ¸·Î
1Àå. ¸¶Å©¾÷ ¾ð¾îÀÇ °£·«ÇÑ ¿ª»ç
¸í½Éº¸°¨¿¡¼ À̸£±æ ¡°¹Ì·¡¸¦ ¾Ë·Á°Åµç ¸ÕÁö Áö³ª°£ ÀÏÀ» »ìÇÇ¶ó¡± Çß½À´Ï´Ù. ÃÖÃÊÀÇ °ø½ÄÀûÀΠǥÁØ HTML 2.0¿¡¼ ½ÃÀÛµÈ HTMLÀÇ Åº»ý°ú À̾îÁö´Â ºÐ¿°ú È¥¶õ, ±×¸®°í XMLÀÇ °ø½ÄÀûÀÎ Á×À½. ±× °úÁ¤µé ¼Ó¿¡¼ ¿ì¸®°¡ ¹è¿ö¾ß ÇÒ ±³ÈÆ°ú HTML5ÀÇ ÇöÀ縦 ¹Ù¶óº¾´Ï´Ù.
2Àå. HTML5ÀÇ ¼³°è
¡°Ãæµ¹ÀÌ ¹ß»ýÇÏ´Â °æ¿ì, ÀÌ·ÐÀûÀÎ ¼ø¼ö¼ºº¸´Ù´Â ±â¼ú ¸í¼¼¸¦, ±â¼ú ¸í¼¼º¸´Ù´Â ±¸ÇöÇÏ´Â »ç¶÷À», ±×¸®°í ±¸ÇöÇÏ´Â »ç¶÷º¸´Ù´Â °³¹ßÀÚ¸¦, ¶ÇÇÑ °³¹ßÀÚº¸´Ù´Â »ç¿ëÀÚ¸¦ °í·ÁÇ϶󡱴 ¡°»ç¿ëÀÚ ±â¹Ý ¿ì¼±±Ç¡±À̶ó´Â HTML5ÀÇ ¼³°è ¿øÄ¢À» °¡Áö°í, ¾î¶»°Ô Çö½Ç°ú µ¿¶³¾îÁöÁö ¾Ê°Ô ´Ü¼øÇÔÀ» À¯ÁöÇÏ¿© ¼³°èµÇ¾î ÀÖ´ÂÁö, ±×¸®°í »ç¶óÁø °Íµé°ú »õ·Î¿î º¯È´Â ¹«¾ùÀÎÁö¸¦ ¾Ë¾Æº¾´Ï´Ù.
3Àå. ¸®Ä¡ ¹Ìµð¾î
³¯·Î ´Ã¾î°¡´Â »ç¿ëÀÚµéÀÇ ¸®Ä¡ ¹Ìµð¾î¿¡ ´ëÇÑ ¿ä±¸¿¡ ºÎÀÀÇÏ¿© HTML5´Â ¸®Ä¡ ¹Ìµð¾î ¿ä¼Ò·Î Ç÷¯±×ÀÎÀÇ ¿äû ¾øÀÌ ºê¶ó¿ìÀú¿¡¼ ±âº»ÀûÀ¸·Î ±â´ÉÀ» Áö¿øÇÏ´Â ´ë¾ÈÀ» ¸¶·ÃÇß½À´Ï´Ù. ¹ÝÀÀÇü À̹ÌÁö, µ¿ÀûÀÎ À̹ÌÁö¸¦ ¸¸µå´Â ¹æ¹ý°ú ¿Àµð¿À, ºñµð¿À¸¦ °£´ÜÇÏ°Ô »ðÀÔ ¹Ìµð¾î·Î ¸¸µé ¼ö ÀÖ´Â ¹æ¹ýÀ» ¾Ë¾Æº¾´Ï´Ù.
4Àå. WEB FORMS 2.0
HTML5°¡ ÇöÀç ÁøÇàÇü ¸¶Å©¾÷(markup) ¾ð¾îÀ̱⿡ CSSµµ ±×¿¡ ¹ß¸ÂÃß¾î ÀÚ¹Ù½ºÅ©¸³Æ® ¹æ½ÄÀ» ¼±¾ðÀûÀÎ ¹æ½ÄÀ¸·Î ÁøȽÃÅ°°í ÀÖÁö¸¸, CSS¸¦ ÀÌ¿ëÇÏ¿© formÀ» Çâ»ó½ÃÅ°´Â µ¥¿¡´Â ¾Æ¹«·¡µµ ÇÑ°è°¡ ÀÖ½À´Ï´Ù. ÀÌ¿¡ HTML5´Â »õ·Ó°Ô Çâ»óµÈ formµéÀ» µµÀÔÇÏ°í ÀÖ½À´Ï´Ù. À¥»çÀÌÆ®¿¡¼ ÇʼöºÒ°¡°áÇÑ Æû ¿ä¼Òµé °¢°¢À» »ìÆ캸°í, ¾ÕÀ¸·ÎÀÇ Àü¸Áµµ ÇÔ²² »ý°¢ÇØ º¾´Ï´Ù.
5Àå. HTML Àǹ̷Ð
À©½ºÅÏ Ã³Ä¥ÀÇ ¸í¾ðÀ» ÀοëÇÏ¸é ¡°¹ÎÁÖÁÖÀÇ´Â °¡Àå ³ª»Û ÇüÅÂÀÇ Á¤ºÎÀÌÁö¸¸ ±×º¸´Ù ³ªÀº °ÍÀ» ³ª´Â ¾ÆÁ÷ º¸Áö ¸øÇß´Ù¡±°í Çß½À´Ï´Ù. HTMLÀº ÃÖ¾ÇÀÇ ¸¶Å©¾÷ ¾ð¾îÀÌÁö¸¸ ¿ª½Ã ±×º¸´Ù ³ªÀº °ÍÀº ¾ø´Ù°í ÇÒ ¼ö ÀÖ½À´Ï´Ù. À̸¦ ±Øº¹Çϱâ À§ÇØ ¾î¶°ÇÑ ¹æ¹ýÀ¸·Î È®À强À» °¡Áú ¼ö ÀÖ´ÂÁö, ±×¸®°í »õ·Î¿î ¸¶Å©¾÷ ¿ä¼Ò¿Í ±¸Á¶µé, ÄÜÅÙÃ÷ ¸ðµ¨¿¡ °üÇÏ¿© »ìÆ캾´Ï´Ù.
6Àå. Áö±Ý HTML5¸¦ »ç¿ëÇÏ·Á¸é
¿©·¯ºÐÀÌ HTML5¸¦ »ç¿ëÇÏ°íÀÚ ÇÑ´Ù¸é, ºê¶ó¿ìÀú Áö¿ø ¿©ºÎ°¡ °áÁ¤ÀûÀÔ´Ï´Ù. À̸¦ ÇØ°áÇϱâ À§ÇØ ¾î¶»°Ô Àü·«À» ¼¼¿ö¾ß ÇÏ´ÂÁö, ¾î¶² ±â¼ú°ú Á¢±Ù¹ýÀÌ ÀÖ´ÂÁö, À¯È¿¼º °ËÁõÀº ¾î¶»°Ô ÇÒÁö¿Í °°Àº Çö½ÇÀûÀÎ ¹®Á¦¸¦ ´Ù·ïº¾´Ï´Ù. ¶ÇÇÑ HTML5¿¡ °üÇÑ Áú¹®°ú ³íÀÇ¿¡ Àû±ØÀûÀ¸·Î Âü¿©ÇÒ ¼ö ÀÖ´Â ¸ÚÁø °÷µéµµ ¼Ò°³µË´Ï´Ù.
Æì³½°÷ ¼Ò°³
À¥¾×Ãò¾ó¸®ÄÚ¸®¾Æ¢ß
2008³â ¼³¸³µÈ ¿öµåÇÁ·¹½º Àü¹® µðÀÚÀÎ ¿¡ÀÌÀü½Ã °â ÃâÆÇ»ç. ¿öµåÇÁ·¹½º¸¦ ÀÌ¿ëÇØ À¥»çÀÌÆ®¸¦ Á¦ÀÛ, ¼ºñ½ºÇÏ°í ÀÖÀ¸¸ç ÇØ¿Ü À¥ µðÀÚÀÎ °ü·Ã ¼ÀûÀ» ¾ö¼±ÇÏ¿© ¹ø¿ª ÃâÆÇÀ» ÇÏ°í ÀÖ´Ù. Áö±Ý±îÁö Ãâ°£ÇÑ Ã¥À¸·Î´Â ¸ð´ø À¥ µðÀÚÀÎ ÃÖ°íÀÇ ½Ç¿ë¼ÀÎ ¡¶½º¸Å½Ì ºÏ 1, 2¡·¿Í Àü¼¼°è¿¡¼ »ç¶û ¹Þ°í ÀÖ´Â CMS ÅøÀÎ ¿öµåÇÁ·¹½ºÀÇ ÇѱÛÆÇ °¡ÀÌµå ¡¶¿öµåÇÁ·¹½º Á¦´ë·Î Æı⡷ µîÀÌ ÀÖ´Ù. ƯÈ÷ ¡¶¿öµåÇÁ·¹½º Á¦´ë·Î Æı⡷´Â ±¹³» ÃÖÃÊ·Î ¹ß°£ÇÑ ¿öµåÇÁ·¹½º Àü¹® µµ¼·Î ½Ç¹«ÀÚµé·ÎºÎÅÍ ¸¹Àº »ç¶ûÀ» ¹Þ°í ÀÖ´Ù. ÀÌ ¹Û¿¡ ±Û·Î¹ú À¥ µðÀÚÀΰèÀÇ ¶Ç ´Ù¸¥ ¸®´õÀÎ A Book Apart»çÀÇ ¡®¾Æ¸§´Ù¿î À¥»çÀÌÆ® ¸¸µé±â ½Ã¸®Áµµ ¹ø¿ªÇÏ¿© Ãâ°£ÇÏ°í ÀÖ´Ù. ¾ÕÀ¸·Îµµ À¥ µðÀÚÀÎ ¾÷°è Á¾»çÀÚ»Ó ¾Æ´Ï¶ó À¥»çÀÌÆ® Á¦ÀÛ¿¡ °ü½É ÀÖ´Â ÀϹÝÀεµ º¼ ¼ö ÀÖ´Â ÁÁÀº Ã¥À» ¾ö¼±ÇØ ¼Ò°³ÇÒ °èȹÀÌ´Ù.
-
-
1Àå. ¸¶Å©¾÷ ¾ð¾îÀÇ °£·«ÇÑ ¿ª»ç
IETF¿¡¼ W3C·Î : HTML4±îÁöÀÇ ¿©Á¤
XHTML 1 : XML·Î¼ÀÇ HTML
XHTML 2 : ¿ì¸® ÀÌ°Å ¾È ¾µ·¡¿ä!
ºÐ¿ : WHATWGÀÇ ÃâÇö
WEB APPS 1.0¿¡¼ HTML5·Î
ÀçÅëÇÕ
XHTMLÀº Á×¾ú´Ù : XHTML ¹®¹ýÀÌ¿© ¿µ¿øÇ϶ó!
HTML5 ¿¬Ç¥
2Àå. HTML5ÀÇ ¼³°è
¼³°è ¿øÄ¢
Çö½Ç°¨ À¯ÁöÇϱâ
¿À·ù ó¸®
°£´Ü¸í·áÇÑ DOCTYPE
´Ü¼øÇÔ À¯Áö
¹®¹ý : ¸¶À½´ë·Î ¸¸µå¼¼¿ä
¿ì¸®´Â ±×·± ¾ð¾î´Â »ç¿ëÇÏÁö ¾Ê½À´Ï´Ù
- Àß °¡¿ä, ±× µ¿¾È Áñ°Å¿ü¾î¿ä.
³¸¼´°ú ¸¶ÁÖÇϱâ : º¯È!
- °ÈµÈ a ¿ä¼Ò
- °íÃļ ´õ ³ªºüÁø cite
ºû³ª´Â »õ Àå³°¨ : ÀÚ¹Ù½ºÅ©¸³Æ® API
3Àå. ¸®Ä¡ ¹Ìµð¾î
¹ÝÀÀÇü À̹ÌÁö
- picture ¿ä¼Ò
- srcset°ú sizes ¼Ó¼º
ĵ¹ö½º
- °®°í ³î±â : ÄÚµå·Î ±×¸² ±×¸®±â
- Canvas? ´ëü ¾îµð¿¡ ¾²¶ó´Â °Å¾ß?
- Á¢±Ù °ÅºÎ
- ¶È¶ÈÇÑ Äµ¹ö½º
¿Àµð¿À
- ÅëÁ¦ºÒ´É
- ¹öÆÛ¸µ
- ¿©·¯ »óȲ¿¡ ´ëóÇϱâ
- ´ëü ÄÜÅÙÃ÷Fallback content
- À¥ Á¢±Ù¼º Çâ»ó
ºñµð¿À
- ÀÚü Áö¿øÀ» ÇâÇÏ¿©
- WebVTT·Î ÀÚ¸· ¸¸µé±â
4Àå. WEB FORMS 2.0
PLACEHOLDER
AUTOFOCUS
REQUIRED
AUTOCOMPLETE
DATALIST
INPUT TYPES
- °Ë»ö
- »ó¼¼ ¿¬¶ôó
- ½½¶óÀÌ´õ
...
- ½ºÇdzÊ
- ³¯Â¥¿Í ½Ã°£
- »ö»ó ¼±Åñâ
- Å×½ºÆ®
- Á÷Á¢ ¸¸µé±â
¹Ì·¡ Àü¸Á
5Àå. HTML Àǹ̷Ð
È®À强
- ¸¶ÀÌÅ©·ÎÆ÷¸Ë°ú ¸¶ÀÌÅ©·Îµ¥ÀÌÅÍ
- °¡¿µÇ´Â ³íÀï
»õ·Î¿î ¸¶Å©¾÷ ¿ä¼Ò
- mark
- time
- meter
- progress
±¸Á¶
- section
- header
- footer
- aside
- nav
- article
- div ÁõÈıº¿¡ ´ëÇÑ Ä¡·á¾à?
ÄÜÅÙÃ÷ ¸ðµ¨
- ¼½¼ÇÈ ÄÜÅÙÃ÷
- °³¿ä ¾Ë°í¸®Áò
- ¼½¼ÇÈ ·çÆ®
- À̽ļº
- ¿µ¿ªº° ½ºÅ¸ÀÏ
6Àå. Áö±Ý HTML5¸¦ »ç¿ëÇÏ·Á¸é
¿©·¯ºÐ¸¸ÀÇ Àü·«À» ¼¼¿ì¼¼¿ä.
»õ·Î¿î ½Ã¸Çƽ ¿ä¼Ò
- ±â´É ŽÁö
- HTML5ÀÇ ±¸Á¶¿Í Á¦¸ñ
- ¹ÝÀÀÇü À̹ÌÁö
HTML5ÀÇ input ¿ä¼Ò
ARIA
À¯È¿¼º °ËÁõ
Âü¿©Çϱâ
HTML5ÀÇ ¹Ì·¡
RESOURCES
REFERENCES
INDEX
-
-
|
Á¦·¹¹Ì Å°½º(Jeremy Keith) [Àú]
|
|
-
¿µ±¹ ºê¸µÅÏ¿¡¼ ÀÏÇÏ°í ÀÖ´Â À¥ °³¹ßÀÚÀÌ´Ù. Clearleft (www.clearleft.com)¶ó´Â À¥ ÄÁ¼³Æà ¾÷ü¿¡¼ ÀÏÇÏ°í ÀÖ°í, XHTML, CSS, DOM°ú °°Àº À¥ Ç¥ÁØ ±â¼úÀ» ÀÌ¿ëÇØ Á¢±Ù¼ºÀÌ ³ôÀ¸¸é¼ µðÀÚÀεµ ¿ì¼öÇÑ À¥»çÀÌÆ®¸¦ Áñ°Ì°Ô ¸¸µé°í ÀÖ´Ù. ¶ÇÇÑ ±¹Á¦ À¥ Ç¥ÁØ ÇÁ·ÎÁ§Æ®(webstandards.org)ÀÇ DOM ½ºÅ©¸³Æ® TF¸¦ À̲ø°í Àֱ⵵ ÇÏ´Ù.
¿©°¡ ½Ã°£¿¡´Â alt.country ¹êµåÀÎ Salter Cane(www.saltercane.com)¿¡¼ ºÎÁÖÅ°¸¦ ¿¬ÁÖÇϱ⵵ ÇÑ´Ù. ¾ÆÀÏ·£µå ÀüÅë À½¾ÇÀ» ´Ù·ç´Â The Session(www.thesession.org)À̶ó´Â Ä¿¹Â´ÏƼ À¥»çÀÌÆ®¸¦ ¸¸µé°í ¿î¿µÇÏ°í ÀÖ´Ù.
-
|
±èÁßö [Àú]
|
|
-
Æ÷Ç×°ø´ë ÄÄÇ»ÅÍ°øÇаú¸¦ Á¹¾÷ÇÏ¿´À¸¸ç, ¿©·¯ ȸ»ç¿¡¼ Java JIT Æ÷ÆúÎÅÍ À¥ ¾ÖÇø®ÄÉÀ̼ǿ¡ À̸£´Â ´Ù¾çÇÑ ºÐ¾ßÀÇ ÇÁ·ÎÁ§Æ®¸¦ ¼öÇàÇÏ¿´´Ù. ÀÌ °úÁ¤¿¡¼ ÄÄÇ»ÅÍ ÇÁ·Î±×·¡¹Ö ¾ð¾î¿¡ °ü½ÉÀ» °®°Ô µÇ¾ú´Ù. ´Ü¼øÈ÷ À̷п¡ ±×Ä¡±âº¸´Ù´Â ½Ç¹« °æÇèÀ» ¹ÙÅÁÀ¸·Î °³¹ßÀÚÀûÀÎ °üÁ¡¿¡¼ ¹®Á¦¿¡ Á¢±ÙÇÏ´Â °ÍÀ» ÁÁ¾ÆÇÑ´Ù. ÇöÀç´Â KBS¿¡¼ IT ºÐ¾ß ¾÷¹«¸¦ ¼öÇàÇÏ°í ÀÖ´Ù.
-
-
Àüü 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ÀÏ ÀÌ»óÀÇ ½Ã°£ÀÌ ¼Ò¿äµË´Ï´Ù. |
|
|
|
|