ÁøÁ¤ÇÑ Å©·Î½º-ºê¶ó¿ì¡(Cross-Browsing)À» À§ÇÑ HTML5¿Í CSS3ÀÇ ÀÛ¼º¹ý»Ó ¾Æ´Ï¶ó µð¹ÙÀ̽º °£ÀÇ °æ°è¸¦ Çã¹°¾î ÁØ ¹ÝÀÀÇü À¥ ±â¼ú°ú ÇÁ·¹ÀÓ¿öÅ©±îÁö, µ¥½ºÅ©-ž°ú ¸ð¹ÙÀÏ È¯°æÀ» ¾Æ¿ì¸£´Â Ç¥ÁØÈµÈ À¥-ÆÛºí¸®½ÌÀ» ½ÃÀÛÇϵµ·Ï µµ¿ÍÁØ´Ù.
- ¸Ó¸®¸»- À¥ Ç¥ÁØ ÆÛºí¸®½Ì Guide- ÀÌ Ã¥ÀÇ »ç¿ë¹ý- ºÎ·Ï ´Ù¿î·ÎµåPart 1. À¥ Ç¥ÁØ ¹è°æ Áö½Ä(Schema for Web Standard) Section 01. ÆÛºí¸®½Ì Áغñ01-1. À¥ ºê¶ó¿ìÀúÀÇ Á¾·ù¿Í ¿£Áø ¾Ë¾Æº¸±â[1] À¥ ºê¶ó¿ìÀúÀÇ Á¾·ù[2] °¢ ºê¶ó¿ìÀú º° ·£´õ¸µ(Rendering) ȤÀº ·¹À̾ƿô(Layout) ¿£Áø01-2. ºê¶ó¿ìÀú ¼³Ä¡Çϱâ[1] ÀͽºÇ÷η¯ ÃֽŹöÀü ¼³Ä¡[2] ÆÄÀ̾îÆø½º ¼³Ä¡[3] Å©·Ò, ¿ÀÆä¶ó, »çÆĸ®ÀÇ ¼³Ä¡[4] ¹öÀü º° ÀͽºÇ÷η¯ Å×½ºÅÍ ¼³Ä¡[5] ¿ÀÆä¶ó ¸ð¹ÙÀÏ ¿¡¹Ä·¹ÀÌÅÍ / ¾ÆÀÌÆù ½Ã¹Ä·¹ÀÌÅÍ ¼³Ä¡01-3. °¢ ºê¶ó¿ìÀú º° Çʼö ºÎ°¡±â´É ¼³Ä¡Çϱâ[1] ÆÄÀ̾îÆø½º ºê¶ó¿ìÀúÀÇ ºÎ°¡±â´É ¼³Ä¡[2] Å©·Ò ºê¶ó¿ìÀúÀÇ ºÎ°¡±â´É ¼³Ä¡01-4. ÀúÀÛµµ±¸ÀÇ Á¾·ù¿Í ¼³Ä¡[1] EditPlus ¼³Ä¡Çϱâ [2] SublimeText(http://www.sublimetext.com/2) ¼³Ä¡Çϱâ01-5.FTP »ç¿ë¹ý ¾È³»[1] FTP Á¢¼ÓÀ» À§ÇÑ °èÁ¤ Á¤º¸µé[2] FTP ÇÁ·Î±×·¥ÀÇ ÀÎÅÍÆäÀ̽ºSection 02. À¥ Ç¥ÁØ°ú À¥ Á¢±Ù¼º ±×¸®°í HTML5 02-1. À¥ Ç¥ÁØÀ̶õ? [1] ¹«¾ùÀÌ À¥ Ç¥ÁØ(Web Standards)Àΰ¡? [2] À¥ Ç¥ÁØÀÌ ¿Ö Áß¿äÇÑ°¡? [3] À¥ Ç¥ÁØÀ¸·Î ¸¶Å©¾÷Çϱâ02-2. À¥ Á¢±Ù¼ºÀ̶õ? [1] À¥ Á¢±Ù¼º(Web Accessibility)À̶õ ¹«¾ùÀΰ¡? [2] Çѱ¹Çü À¥ ÄÁÅÙÃ÷ Á¢±Ù¼º Áöħ2.0 ¾Ë¾Æº¸±â[3] À¥ Á¢±Ù¼º °ü·Ã ¹ý·ü°ú ±ÔÁ¤02-3. ±¸Á¶¸¦ ´Ù·ç´Â ¸¶Å©¾÷ ¾ð¾î[1] HTML°ú XHTML ÀÛ¼º ¹æ¹ý ¾Ë¾Æº¸±â[2] Àǹ̷ÐÀû ¸¶Å©¾÷À̶õ?02-4. HTML5ÀÇ µîÀå[1] HTML5ÀÇ ±â¼úµé°ú °³¹ß´Ü°è[2] HTML5·Î ÀÛ¼ºÇÏ´Â ¸¶Å©¾÷[3] ¸ð´õ³ªÀÌÀú(Modernizr)¸¦ ÀÌ¿ëÇÑ ºê¶ó¿ìÀúÀÇ Áö¿ø¿©ºÎ È®ÀÎÇϱâPart 2. À¥ Ç¥ÁØ ÀÛ¼º¹ýÀÇ ½ÇÁ¦(Actual Web Standard Markup) Section 03. ¸¶Å©¾÷(HTML)À¸·Î ±¸Á¶ ´ÙÁö±â03-1. HTML ¹®¼ÀÇ ±¸Á¶[1] DOCTYPE ÁöÁ¤Çϱâ[2] ¾ð¾î ÁöÁ¤Çϱâ[3] ¹®ÀÚ ÄÚµå¼Â ÁöÁ¤Çϱâ[4] ¸ÞŸ¿ä¼Ò ¾Ë¾Æº¸±â[5] ¹®¼ ±¸Á¶ ¿¹Á¦03-2. ºí·Ï/ÀζóÀÎ ·¹º§ ¿ä¼Ò ¹× ÄÁÅÙÃ÷ ºÐ·ù[1] ºí·Ï ·¹º§ ¿ä¼Ò[2] ÀζóÀÎ ·¹º§ ¿ä¼Ò[3] ÄÁÅÙÃ÷ ¸ðµ¨ º° ºÐ·ù03-3. Ư¼ö¹®ÀÚ »ðÀÔ ¹æ¹ý°ú ÅؽºÆ®¸¦ Á¤ÀÇÇÏ´Â ÀζóÀÎ ¿ä¼Òµé[1] Ư¼ö¹®ÀÚ »ðÀÔÀÇ ¿Ã¹Ù¸¥ ¹æ¹ý[2] ÅؽºÆ®¸¦ Á¤ÀÇÇÏ´Â ÀζóÀÎ ¿ä¼Òµé[3] ½Ã°£À» Ç¥ÇöÇÏ´Â time ¿ä¼Ò03-4. Div·Î ÀÛ¼ºÇÏ´Â ¹®¼ÀÇ ±×·ìÈ ¹æ¹ý03-5. HTML5 ¼½¼Å´× ¿ä¼ÒµéÀÇ È°¿ë¢¹ ¼½¼Å´× ¿ä¼ÒµéÀÇ Á¾·ù¿Í Ư¡03-6. Á¦¸ñ, ¹®´Ü, ¿¬¶ôóÁ¤º¸, ±¸ºÐ¼± ¾Ë¾Æº¸±â[1] Á¦¸ñÀ» ÀÛ¼ºÇÏ´Â ¹æ¹ý[2] ¹®´Ü(Paragraph)ÀÇ ÀÛ¼º[3] ¿¬¶ôóÁ¤º¸ ¾Ë¾Æº¸±â[4] ÁÖÁ¦¸¦ ºÐ¸®ÇÏ´Â hr ¿ä¼Ò03-7. Àο빮, Á¤ÇüÈµÈ ÅؽºÆ® ¾Ë¾Æº¸±â[1] Àο빮 ¾Ë¾Æº¸±â[2] pre ¿ä¼Ò ¾Ë¾Æº¸±â03-8. °¢Á¾ ¸ñ·ÏÀ» Ç¥ÇöÇÏ´Â ¿ä¼Ò[1] ºñ¼øÂ÷Àû ¸ñ·Ï ul ¿ä¼Ò[2] ¼ø¼Àû ¸ñ·Ï ol ¿ä¼Ò[3] Á¤ÀÇÇü ¸ñ·ÏÀÎ dl ¿ä¼Ò03-9. Ç¥¸¦ ¸¸µå´Â Å×ÀÌºí ¿ä¼Ò¢¹ table ¿ä¼ÒÀÇ ±âº» ±¸Á¶03-10. ¾ÞÄ¿(Anchor)ÀÇ Ç¥Çö[1] href ¼Ó¼ºÀ¸·Î ¿¬°áÇϱâ[2] accesskey¿Í tabindex ¾Ë¾Æº¸±â[3] ¹®¼ ³»¿¡¼ ƯÁ¤ À§Ä¡·Î À̵¿Çϱâ03-11. À̹ÌÁö¿Í °ü·ÃµÈ ¿ä¼Òµé[1] À̹ÌÁö »ðÀÔÇϱâ[2] À̹ÌÁö·Î ¸¸µç ¾àµµÀÇ Ç¥Çö[3] longdesc ¼Ó¼º ¾Ë¾Æº¸±â03-12 ¾ÆÀÌÇÁ·¹ÀÓÀÇ ´Ù¾çÇÑ ¼Ó¼º ¾Ë¾Æº¸±â[1] ¾ÆÀÌÇÁ·¹ÀÓÀÇ ±âÃÊ[2] HTML5¿¡¼ Ãß°¡µÈ srcdoc¿Í sandbox ¼Ó¼ºSection 04. ½ºÅ¸ÀϽÃÆ®(CSS)·Î ÀÚÀ¯·Ó°Ô ²Ù¹Ì±â04-1. CSSÀÇ Àû¿ë ¹æ¹ý°ú ±âº» ¹®¹ý[1] CSSÀÇ Àû¿ë ¹æ¹ý[2] CSSÀÇ °ªÀ» Ç¥ÇöÇÏ´Â ±ÔÄ¢µé04-2. ´Ù¾çÇÑ ¼±ÅÃÀÚ ¾Ë¾Æº¸±â[1] ±âº» ¼±ÅÃÀÚ ¾Ë¾Æº¸±â[2] ±¸Ã¼ÀûÀ¸·Î ã¾Æ°¡´Â ¹æ¹ý[3] ¼Ó¼º ¼±ÅÃÀÚ (Attribute selectors) ¾Ë¾Æº¸±â[4] °¡»ó ¼±ÅÃÀÚ (Pseudo selector) ¾Ë¾Æº¸±â04-3. ¼±ÅÃÀÚÀÇ ¿ì¼±¼øÀ§[1] ¼±ÅÃÀÚÀÇ ¿ì¼±¼øÀ§¶õ? [2] ¿ì¼±¼øÀ§¿¡ °ü°è¾øÀÌ Àû¿ëµÇ´Â css, !important 04-4. ¼Ã¼(font)¿Í ±Û(text) ½ºÅ¸ÀÏ[1] ¼Ã¼ ÁöÁ¤ÇÏ´Â ¹æ¹ý[2] ±ÛÀÚ Å©±â ÁöÁ¤Çϱâ[3] ±ÛÀÚ µÎ²² ÁöÁ¤Çϱâ[4] ±ÛÀÚ Àå½ÄÇϱâ[5] ±ÛÀÚ ½ºÅ¸ÀÏ ÁöÁ¤Çϱâ[6] ±ÛÀÚÀÇ »ö»ó ¼³Á¤Çϱâ[7] ±ÛÀÇ Á¤·Ä ¹æ¹ý[8] ±ÛÀÇ °£°Ý Á¶ÀýÇϱâ[9] ±ÛÀÚ µé¿©¾²±â[10] ¿µ¹®ÀÇ ´ë/¼Ò¹®ÀÚ °ü·Ã[11] ¼öÁ÷ Á¤·Ä(Vertical Align) ¼Ó¼º[12] ±ÛÀÇ ÁÙ¹Ù²Þ Ã³¸®Çϱâ04-5. ¸ñ·Ï(List) ½ºÅ¸ÀÏ[1] list-style-typeÀ¸·Î ¸ñ·Ï ŸÀÔ ÁöÁ¤Çϱâ[2] list-style-positionÀ¸·Î ¸ñ·Ï À§Ä¡ ÁöÁ¤Çϱâ[3] list-style-imageÀ¸·Î À̹ÌÁö ºí¸´ ÁöÁ¤Çϱâ04-6. Display ¼Ó¼º°ú Visibility ¼Ó¼º ¾Ë¾Æº¸±â[1] Display ¼Ó¼º ¾Ë¾Æº¸±â[2] Visibility ¼Ó¼º ¾Ë¾Æº¸±â04-7. ¹è°æ(Background) ½ºÅ¸ÀÏ[1] ¹è°æ »ö»ó ÁöÁ¤Çϱâ[2] ¹è°æ À̹ÌÁö ÁöÁ¤°ú °ü·Ã ½ºÅ¸ÀÏµé ¾Ë¾Æº¸±â[3] »õ·Î¿î ¹è°æ ½ºÅ¸Àϵé04-8. ¹Ú½º ¸ðµ¨(Box models) ½ºÅ¸ÀÏ[1] ¹Ú½º ¸ðµ¨À̶õ? [2] Å©±â¸¦ ÁöÁ¤ÇÏ´Â width¿Í height ¾Ë¾Æº¸±â[3] border·Î Å׵θ® ¸¸µé±â [4] Å׵θ®ÀÇ ¸ð¼¸®¸¦ µÕ±Û°Ô Ç¥ÇöÇϱâ[5] marginÀ¸·Î ¿©¹é ÁöÁ¤Çϱâ[6] paddingÀ¸·Î ¾ÈÂÊ °ø°£ ÁöÁ¤Çϱâ[7] content¸¦ ÀÌ¿ëÇÑ ÅؽºÆ® »ðÀÔÇϱâ04-9. Æ÷Áö¼Å´×(Positioning) ½ºÅ¸ÀÏ[1] Ç÷Ô(float) ¾Ë¾Æº¸±â[2] floatÀ» È°¿ëÇÑ ·¹À̾ƿô ¸¸µé¾î º¸±â[3] positionÀÇ Æ¯Â¡[4] position°ú z-index ¾Ë¾Æº¸±â[5] ·¹À̾ƿô ÀÛ¼ºÇϱ⠽ǽÀ04-10. ±× ¹ÛÀÇ ½ºÅ¸Àϵé[1] ±×¸²ÀÚ ¸¸µé±â[2] Åõ¸íµµ ¼³Á¤Çϱâ[3] ´Ù´Ü ÄÁÅÙÃ÷ ¸¸µé±â[4] ±×¶óµð¾ðÆ® ÁöÁ¤Çϱâ[5] Àüȯȿ°ú ÁöÁ¤Çϱâ[6] ¾Ö´Ï¸ÞÀÌ¼Ç ¸¸µé±â[7] ´Ù¾çÇÑ º¯Çü±â¹ý ¾Ë¾Æº¸±â[8] CSS3·Î Àû¿ëÇÏ´Â ÇÊÅÍ È¿°úSection 05. »óÈ£ÀÛ¿ëÇÏ´Â ´Ù¾çÇÑ ÄÁÅÙÃ÷, ¹Ìµð¾î »ðÀÔÇϱâ05-1. Æû ¿ä¼ÒÀÇ Á¾·ù[1] Æû ¿ä¼Ò¸¦ ÀÛ¼ºÇÏ´Â ±âº»[2] »õ·Ó°Ô Ãß°¡µÈ ¹æ¹ýµé [3] °¢Á¾ Æû ÄÁÆ®·Ñ05-2. Ç÷¡½¬ ¹× ¹Ìµð¾î»ðÀÔ ±â¹ý[1] object ¿ä¼Ò[2] embed ¿ä¼Ò[3] video ¿ä¼Ò[4] audio ¿ä¼ÒPart 3. API¿Í ¹ÝÀÀÇü À¥(API & Responsive Web) Section 06. HTML5¿¡ Ãß°¡µÈ ÁÖ¿ä API 06-1. CANVAS, SVG ¾Ë¾Æº¸±â[1] canvas¿Í svgÀÇ Â÷ÀÌÁ¡[2] canvas ¹®¹ý[3] canvas·Î ¸¸µå´Â ¿¹Á¦[4] SVG ¹®¹ý[5] SVG ¿¡µðÅÍ È°¿ëÇϱâ06-2. Áö¿À·ÎÄÉÀÌ¼Ç API [1] ´ÙÀ½(Daum) ¸ÊÀÇ Ç¥Çö[2] Áöµµ¿¡ Ç¥ÇöÇÏ´Â À§Ä¡Section 07. ¹ÝÀÀÇü À¥ ±â¼úÀÇ Àû¿ë±â¹ý07-1. ºäÆ÷Æ®(Viewport) ÁöÁ¤Çϱâ[1] ´Ù¾çÇÑ ºäÆ÷Æ®ÀÇ ¼Ó¼º[2] ÀϹÝÀûÀÎ ºäÆ÷Æ® ¼³Á¤07-2. ¹Ìµð¾îÄõ¸®(Media Query)ÀÇ È°¿ë[1] ¹Ìµð¾îÄõ¸®ÀÇ ±âº» ¹®¹ý[2] ¹ÝÀÀÇü À¥À» À§ÇÑ ºäÆ÷Æ®¿Í ¹Ìµð¾îÄõ¸® ÀÛ¼º07-3. ¹ÝÀÀÇü À¥(RWD) µðÀÚÀÎÀÇ ·¹À̾ƿô[1] ¹ÝÀÀÇü À¥ µðÀÚÀÎÀÇ ·¹À̾ƿô ±â¹ý[2] ¸ð¹ÙÀÏ¿¡¼ÀÇ ÇØ»óµµPart 4. ½ÇÀü¿¹Á¦& ÇÁ·¹ÀÓ¿öÅ©(Project & Framework) Section 08. ¹è¿î ´ë·Î, ½ÇÀü ¿¹Á¦(Actual Project with Guide) 08-1. ÇÁ·ÎÁ§Æ® Áغñ[1] ÆÄÀÏ ±¸Á¶ ¸¸µé±â[2] ±âº» ¹®¼ ÅÛÇø´ ÀÛ¼ºÇϱâ[3] °¢Á¾ ¸ÞŸ¿ä¼Ò ÀÛ¼ºÇϱâ08-2. À¥ ÆäÀÌÁö ·¹À̾ƿô ±â¹ý[1] HTML ¹®¼ ÀÛ¼ºÇϱâ[2] HTML5 ¿ä¼Ò·Î ÀÛ¼ºÇϱâ08-3. ½ºÅ¸ÀϽÃÆ® Àû¿ëÇϱâ[1] ±âº» ½ºÅ¸ÀÏ Àû¿ëÇϱâ[2] ·¹À̾ƿô ÀÛ¼ºÇϱâ[3] HEADER ¿µ¿ª ¿Ï¼ºÇϱâ[4] CONTAINER ¿µ¿ª ¿Ï¼ºÇϱâ[5] FOOTER ¿µ¿ª ¿Ï¼ºÇϱâ08-4. ǪÅÍ À§Ä¡¸¦ ÇÏ´Ü¿¡ °íÁ¤Çϱâ[1] HTML°ú ½ºÅ¸ÀϽÃÆ® ¼öÁ¤Çϱâ[2] ǪÅÍ À§Ä¡ Àâ°í °íÁ¤Çϱâ08-5. ¹ÝÀÀÇü À¥ ÆäÀÌÁö Àû¿ëÇϱâ[1] HTML ¹®¼¿¡ ¹ÝÀÀÇü ½ºÅ¸ÀϽÃÆ® ¿¬°áÇϱâ[2] ¹ÝÀÀÇü ½ºÅ¸ÀϽÃÆ® ÀÛ¼ºÇϱâSection 09 Á» ´õ ½±°Ô, ÇÁ·¹ÀÓ¿öÅ©(LESS/SASS/Bootstrap) 09-1. CSS¸¦ ÀÛ¼ºÇÏ´Â ´õ Æí¸®ÇÑ ¹æ¹ý[1] LESS¿Í SASSÀÇ Â÷ÀÌÁ¡[2] LESS ¹®¹ý ¾Ë¾Æº¸±â09-2. ºÎÆ®½ºÆ®·¦(Bootstrap) ¾Ë¾Æº¸±â[1] À¥ »çÀÌÆ®¸¦ °£ÆíÇÏ°Ô ¸¸µå´Â ´Ù¾çÇÑ ÇÁ·¹ÀÓ¿öÅ©[2] ºÎÆ®½ºÆ®·¦ÀÇ ¹®¹ý[3] ºÎÆ®½ºÆ®·¦À» Àû¿ëÇÑ À¥ »çÀÌÆ®