ÄÜÅÙÃ÷ »ó¼¼º¸±â
À¥Ç¥ÁØ ÆÛºí¸®½Ì ¹ÙÀ̺í


À¥Ç¥ÁØ ÆÛºí¸®½Ì ¹ÙÀ̺í

<À̵¿È£> Àú | ¾ÆÀÌÄÛ½º(iCox)

Ãâ°£ÀÏ
2019-07-11
ÆÄÀÏÆ÷¸Ë
ePub
¿ë·®
14 M
Áö¿ø±â±â
PC½º¸¶Æ®ÆùÅÂºí¸´PC
ÇöȲ
½Åû °Ç¼ö : 0 °Ç
°£·« ½Åû ¸Þ¼¼Áö
ÄÜÅÙÃ÷ ¼Ò°³
¸ñÂ÷
ÇÑÁÙ¼­Æò

ÄÜÅÙÃ÷ ¼Ò°³

ÁøÁ¤ÇÑ Å©·Î½º-ºê¶ó¿ì¡(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] ºÎÆ®½ºÆ®·¦À» Àû¿ëÇÑ À¥ »çÀÌÆ®