- ÇöÀç À§Ä¡
- home > ÄÄÇ»ÅÍ¡¤ICT¡¤¾îÇÐ > ÄÄÇ»ÅÍ¡¤IT µµ¼ > À¥ÇÁ·Î±×·¡¹Ö > óÀ½ ¸¸³ª´Â HTML5 amp;amp; CSS3[Á¦ÀÌÆà]
´ç½ÅÀÌ ¾Ë´ø ±× ¿¹ÀüÀÇ HTML°ú CSS°¡ ¾Æ´Ï´Ù!
Àß ¾È´Ù°í »ý°¢Çß´ø HTML°ú CSS! ±Ùµ¥ °ú¿¬ ±×·²±î¿ä? ÀÌ Ã¥Àº ±×·± ¾ÈÀÏÇÔÀ» ±âºÐ ÁÁ°Ô ±úÁִ ģÀýÇÏ°í »ó³ÉÇÑ ÇнÀ¼¶ø´Ï´Ù! ÀÌ Ã¥Àº À̷п¡ ÁýÁßÇϱ⺸´Ù ÁöÀºÀÌ°¡ ÇöÀå¿¡¼ °ÞÀº ½Ç¹« °æÇè¿¡¼ ¿ì·¯³ »ý»ýÇÑ ³ëÇϿ츦 Àü´ÞÇϸç, ´Ü¼øÇÑ ÇÁ·Î±×·¡¹Ö Áö½Ä»Ó¸¸ ¾Æ´Ï¶ó ½Ç¹«¿¡¼ »ç¿ëµÇ´Â ÀÛ¾÷ ¼ø¼³ª »ý°¢ ¹æ½Äµµ Àü¼öÇÏ´Â °ÍÀÌ °¡Àå Å« Ư¡ÀÔ´Ï´Ù. ¶ÇÇÑ, ½¬¿î ÄÚµå¿Í ±×¸²À» ¹ÙÅÁÀ¸·Î Ãʺ¸ÀÚµµ ½±°Ô ÀÌÇØÇÒ ¼ö ÀÖµµ·Ï ±¸¼ºÇÏ¿´½À´Ï´Ù.
¹«¾ùº¸´Ù ´Ü¼øÈ÷ ÅÂ±× ¼³¸íÀ̳ª CSS¸¦ ¼³¸íÇÏ´Â °ÍÀ» ³Ñ¾î, ¡®ÀÌ·¸°Ô Çϸé ÆäÀÌÁö°¡ ¿Ï¼ºµÈ´Ù¡¯¶ó´Â, ÀÛ¾÷ÀÇ Àüü È帧À» ÀÌÇØÇÏ´Â µ¥ ÁßÁ¡À» µÎ°í ÁýÇÊÇÏ¿´À¸¹Ç·Î ÀÌ Ã¥À» ÅëÇØ ÀÚÀßÇÑ ±â¼úÀÌ ¾Æ´Ñ, ½Ç¹«¿¡ ÇÊ¿äÇÑ ´É·ÂÀ» Å°¿ï ¼ö ÀÖÀ» °ÍÀÔ´Ï´Ù!
?
Àß ¾È´Ù°í »ý°¢Çß´ø HTML°ú CSS! ±Ùµ¥ °ú¿¬ ±×·²±î¿ä? ÀÌ Ã¥Àº ±×·± ¾ÈÀÏÇÔÀ» ±âºÐ ÁÁ°Ô ±úÁִ ģÀýÇÏ°í »ó³ÉÇÑ ÇнÀ¼¶ø´Ï´Ù! ÀÌ Ã¥Àº À̷п¡ ÁýÁßÇϱ⺸´Ù ÁöÀºÀÌ°¡ ÇöÀå¿¡¼ °ÞÀº ½Ç¹« °æÇè¿¡¼ ¿ì·¯³ »ý»ýÇÑ ³ëÇϿ츦 Àü´ÞÇϸç, ´Ü¼øÇÑ ÇÁ·Î±×·¡¹Ö Áö½Ä»Ó¸¸ ¾Æ´Ï¶ó ½Ç¹«¿¡¼ »ç¿ëµÇ´Â ÀÛ¾÷ ¼ø¼³ª »ý°¢ ¹æ½Äµµ Àü¼öÇÏ´Â °ÍÀÌ °¡Àå Å« Ư¡ÀÔ´Ï´Ù. ¶ÇÇÑ, ½¬¿î ÄÚµå¿Í ±×¸²À» ¹ÙÅÁÀ¸·Î Ãʺ¸ÀÚµµ ½±°Ô ÀÌÇØÇÒ ¼ö ÀÖµµ·Ï ±¸¼ºÇÏ¿´½À´Ï´Ù.
¹«¾ùº¸´Ù ´Ü¼øÈ÷ ÅÂ±× ¼³¸íÀ̳ª CSS¸¦ ¼³¸íÇÏ´Â °ÍÀ» ³Ñ¾î, ¡®ÀÌ·¸°Ô Çϸé ÆäÀÌÁö°¡ ¿Ï¼ºµÈ´Ù¡¯¶ó´Â, ÀÛ¾÷ÀÇ Àüü È帧À» ÀÌÇØÇÏ´Â µ¥ ÁßÁ¡À» µÎ°í ÁýÇÊÇÏ¿´À¸¹Ç·Î ÀÌ Ã¥À» ÅëÇØ ÀÚÀßÇÑ ±â¼úÀÌ ¾Æ´Ñ, ½Ç¹«¿¡ ÇÊ¿äÇÑ ´É·ÂÀ» Å°¿ï ¼ö ÀÖÀ» °ÍÀÔ´Ï´Ù!
?
ÀúÀÚ: °¡³ë ½ºÄÉÇÏ·ç (ÁöÀºÀÌ), ±è¿Ï¼· (¿Å±äÀÌ)
CHAPTER 1 À¥»çÀÌÆ®ÀÇ ±¸Á¶¸¦ ¾ËÀÚ ... 1
SECTION 1 À¥»çÀÌÆ®°¡ Ç¥½ÃµÇ´Â ±¸Á¶ _2
SECTION 2 URL _5
SECTION 3 À¥»çÀÌÆ®¿¡ »ç¿ëµÇ´Â ÆÄÀÏ Á¾·ù _9
SECTION 4 À¥»çÀÌÆ®ÀÇ ÆÄÀÏ ¹× Æú´õ ±¸Á¶ _16
SECTION 5 À¥»çÀÌÆ® Á¦ÀÛ È¯°æÀ» ÁغñÇÏÀÚ _22
CHAPTER 2 HTML ±âÃÊ Áö½Ä°ú ¸¶Å©¾÷ ½ÇÀü ¿¹Á¦ ... 29
SECTION 1 HTMLÀ̶õ? _30
SECTION 2 HTML Çü½Ä _33
SECTION 3 HTML ¹®¼ ±¸Á¶ _37
SECTION 4 ¸¶Å©¾÷ÀÇ ±¸¼º ¹æ½Ä ¿¬½ÀÇϱâ _40
CHAPTER 3 CSS ±âÃÊ Áö½Ä°ú ÆäÀÌÁö µðÀÚÀÎ ½ÇÀü ¿¹Á¦ ... 55
SECTION 1 CSS ±âÃÊ Áö½Ä _56
SECTION 2 CSS Çü½Ä _58
SECTION 3 ÆäÀÌÁö¿¡ CSS¸¦ Àû¿ëÇÏ´Â ÈÆ·Ã _61
CHAPTER 4 ÅؽºÆ® ²Ù¹Ì±â ... 73
SECTION 1 Á¦¸ñÀ̳ª º»¹®ÀÇ ÆùÆ® Å©±â Á¶Á¤Çϱâ _74
SECTION 2 Àб⠽±°Ô Çà°£ Á¶ÀýÇϱâ _82
SECTION 3 ´Ü¶ô¿¡¼ ¸®µå ¹®ÀåÀ» ±½Àº ±Û¾¾·Î ¼³Á¤ _85
SECTION 4 ÆùÆ® ¼³Á¤Çϱâ _88
SECTION 5 ÅؽºÆ®ÀÇ Á¤·Ä ¹æ½Ä º¯°æÇϱâ _96
SECTION 6 µÎ ¹ø° Çà ÀÌÈĸ¦ ÇÑ ±ÛÀÚ ³»¸°´Ù _99
SECTION 7 ÅؽºÆ® »ö º¯°æÇϱâ _102
SECTION 8 Á¦¸ñ¿¡ ºÎÁ¦¸ñ ºÙÀ̱â _111
CHAPTER 5 ¸µÅ© ¼³Á¤°ú À̹ÌÁö Ç¥½Ã ... 115
SECTION 1 ÅؽºÆ®¿¡ ¸µÅ© Ãß°¡Çϱâ _116
SECTION 2 ÅؽºÆ® ¸µÅ©¿¡ CSS Àû¿ëÇϱâ _129
SECTION 3 À̹ÌÁö Ç¥½ÃÇϱâ _139
SECTION 4 À̹ÌÁö ¸µÅ© °É±â _145
SECTION 5 À̹ÌÁö ÁÖº¯¿¡ ÅؽºÆ® ¹èÄ¡Çϱâ _150
CHAPTER 6 ¹Ú½º¿Í Á¤º¸ Á¤¸® ... 155
SECTION 1 ÀζóÀÎ ¹Ú½º¿Í ºí·Ï ¹Ú½º _156
SECTION 2 Ç׸ñ ³ª¿Çϱâ(¸®½ºÆ®)ÀÇ ¸¶Å©¾÷ _159
SECTION 3 ¸®½ºÆ®¸¦ Á¤º¸ Á¤¸®¿¡ »ç¿ëÇÏÀÚ _162
SECTION 4 ´É¼÷ÇÑ [div] »ç¿ë¹ý _173
SECTION 5 CSSÀÇ ¹Ú½º ¸ðµ¨ _178
SECTION 6 Æеù, º¸´õ ¼³Á¤ _183
SECTION 7 µÎ °³ ÀÌ»óÀÇ ¹Ú½º ³ª¿Çϱâ _189
SECTION 8 ¹Ú½ºÀÇ µðÀÚÀÎ Á¶ÀýÇϱâ _197
CHAPTER 7 Å×À̺í ... 209
SECTION 1 Å×À̺í ÀÛ¼ºÇϱâ _210
SECTION 2 Á¢±Ù¼ºÀ» °í·ÁÇÑ Å×À̺í _220
SECTION 3 Å×À̺íÀÇ µðÀÚÀÎ º¯°æ _227
CHAPTER 8 Æû ... 235
SECTION 1 Æû ¹× ÆûÀÇ µ¥ÀÌÅÍ Àü¼Û ±¸Á¶ _236
SECTION 2 ´Ù¾çÇÑ Æû ºÎÇ° _239
SECTION 3 Ç¥ÁØ ÆûÀÇ ¿¹ _263
CHAPTER 9 ÆäÀÌÁö Àüü ·¹À̾ƿô°ú ³»ºñ°ÔÀÌ¼Ç ... 267
SECTION 1 ½ÇÀü ÄÚµùÀ» À§ÇØ ¾Ë¾Æ µÎ¸é ÁÁÀº CSS Áö½Ä _268
SECTION 2 1´Ü Ä®·³Çü ·¹À̾ƿô _275
SECTION 3 Ç÷º½º ¹Ú½º¸¦ »ç¿ëÇÑ Ä®·³ ·¹À̾ƿô _292
SECTION 4 ³»ºñ°ÔÀÌ¼Ç ¸Þ´º ÀÛ¼ºÇϱâ _304
CHAPTER 10 ¹ÝÀÀÇü À¥µðÀÚÀÎ ÆäÀÌÁö ¸¸µé±â ... 317
SECTION 1 ¹ÝÀÀÇù À¥µðÀÚÀÎÀ̶õ? _318
SECTION 2 ¹ÝÀÀÇü À¥µðÀÚÀÎ »çÀÌÆ® ¸¸µé±â _323
SECTION 1 À¥»çÀÌÆ®°¡ Ç¥½ÃµÇ´Â ±¸Á¶ _2
SECTION 2 URL _5
SECTION 3 À¥»çÀÌÆ®¿¡ »ç¿ëµÇ´Â ÆÄÀÏ Á¾·ù _9
SECTION 4 À¥»çÀÌÆ®ÀÇ ÆÄÀÏ ¹× Æú´õ ±¸Á¶ _16
SECTION 5 À¥»çÀÌÆ® Á¦ÀÛ È¯°æÀ» ÁغñÇÏÀÚ _22
CHAPTER 2 HTML ±âÃÊ Áö½Ä°ú ¸¶Å©¾÷ ½ÇÀü ¿¹Á¦ ... 29
SECTION 1 HTMLÀ̶õ? _30
SECTION 2 HTML Çü½Ä _33
SECTION 3 HTML ¹®¼ ±¸Á¶ _37
SECTION 4 ¸¶Å©¾÷ÀÇ ±¸¼º ¹æ½Ä ¿¬½ÀÇϱâ _40
CHAPTER 3 CSS ±âÃÊ Áö½Ä°ú ÆäÀÌÁö µðÀÚÀÎ ½ÇÀü ¿¹Á¦ ... 55
SECTION 1 CSS ±âÃÊ Áö½Ä _56
SECTION 2 CSS Çü½Ä _58
SECTION 3 ÆäÀÌÁö¿¡ CSS¸¦ Àû¿ëÇÏ´Â ÈÆ·Ã _61
CHAPTER 4 ÅؽºÆ® ²Ù¹Ì±â ... 73
SECTION 1 Á¦¸ñÀ̳ª º»¹®ÀÇ ÆùÆ® Å©±â Á¶Á¤Çϱâ _74
SECTION 2 Àб⠽±°Ô Çà°£ Á¶ÀýÇϱâ _82
SECTION 3 ´Ü¶ô¿¡¼ ¸®µå ¹®ÀåÀ» ±½Àº ±Û¾¾·Î ¼³Á¤ _85
SECTION 4 ÆùÆ® ¼³Á¤Çϱâ _88
SECTION 5 ÅؽºÆ®ÀÇ Á¤·Ä ¹æ½Ä º¯°æÇϱâ _96
SECTION 6 µÎ ¹ø° Çà ÀÌÈĸ¦ ÇÑ ±ÛÀÚ ³»¸°´Ù _99
SECTION 7 ÅؽºÆ® »ö º¯°æÇϱâ _102
SECTION 8 Á¦¸ñ¿¡ ºÎÁ¦¸ñ ºÙÀ̱â _111
CHAPTER 5 ¸µÅ© ¼³Á¤°ú À̹ÌÁö Ç¥½Ã ... 115
SECTION 1 ÅؽºÆ®¿¡ ¸µÅ© Ãß°¡Çϱâ _116
SECTION 2 ÅؽºÆ® ¸µÅ©¿¡ CSS Àû¿ëÇϱâ _129
SECTION 3 À̹ÌÁö Ç¥½ÃÇϱâ _139
SECTION 4 À̹ÌÁö ¸µÅ© °É±â _145
SECTION 5 À̹ÌÁö ÁÖº¯¿¡ ÅؽºÆ® ¹èÄ¡Çϱâ _150
CHAPTER 6 ¹Ú½º¿Í Á¤º¸ Á¤¸® ... 155
SECTION 1 ÀζóÀÎ ¹Ú½º¿Í ºí·Ï ¹Ú½º _156
SECTION 2 Ç׸ñ ³ª¿Çϱâ(¸®½ºÆ®)ÀÇ ¸¶Å©¾÷ _159
SECTION 3 ¸®½ºÆ®¸¦ Á¤º¸ Á¤¸®¿¡ »ç¿ëÇÏÀÚ _162
SECTION 4 ´É¼÷ÇÑ [div] »ç¿ë¹ý _173
SECTION 5 CSSÀÇ ¹Ú½º ¸ðµ¨ _178
SECTION 6 Æеù, º¸´õ ¼³Á¤ _183
SECTION 7 µÎ °³ ÀÌ»óÀÇ ¹Ú½º ³ª¿Çϱâ _189
SECTION 8 ¹Ú½ºÀÇ µðÀÚÀÎ Á¶ÀýÇϱâ _197
CHAPTER 7 Å×À̺í ... 209
SECTION 1 Å×À̺í ÀÛ¼ºÇϱâ _210
SECTION 2 Á¢±Ù¼ºÀ» °í·ÁÇÑ Å×À̺í _220
SECTION 3 Å×À̺íÀÇ µðÀÚÀÎ º¯°æ _227
CHAPTER 8 Æû ... 235
SECTION 1 Æû ¹× ÆûÀÇ µ¥ÀÌÅÍ Àü¼Û ±¸Á¶ _236
SECTION 2 ´Ù¾çÇÑ Æû ºÎÇ° _239
SECTION 3 Ç¥ÁØ ÆûÀÇ ¿¹ _263
CHAPTER 9 ÆäÀÌÁö Àüü ·¹À̾ƿô°ú ³»ºñ°ÔÀÌ¼Ç ... 267
SECTION 1 ½ÇÀü ÄÚµùÀ» À§ÇØ ¾Ë¾Æ µÎ¸é ÁÁÀº CSS Áö½Ä _268
SECTION 2 1´Ü Ä®·³Çü ·¹À̾ƿô _275
SECTION 3 Ç÷º½º ¹Ú½º¸¦ »ç¿ëÇÑ Ä®·³ ·¹À̾ƿô _292
SECTION 4 ³»ºñ°ÔÀÌ¼Ç ¸Þ´º ÀÛ¼ºÇϱâ _304
CHAPTER 10 ¹ÝÀÀÇü À¥µðÀÚÀÎ ÆäÀÌÁö ¸¸µé±â ... 317
SECTION 1 ¹ÝÀÀÇù À¥µðÀÚÀÎÀ̶õ? _318
SECTION 2 ¹ÝÀÀÇü À¥µðÀÚÀÎ »çÀÌÆ® ¸¸µé±â _323
ÀÌ Ã¥ÀÇ ÁÖ¿ä ³»¿ë
1Àå - À¥»çÀÌÆ® ±¸Á¶¿Í URLÀÇ Æ¯Â¡ ±×¸®°í »ç¿ëÇÒ ¼ö ÀÖ´Â ÆÄÀÏ Á¾·ù ¹× Ư¡ µî À¥»çÀÌÆ® Á¦ÀÛÀ» ½ÃÀÛÇϱ⿡ ¾Õ¼ ¾Ë¾Æ µÎ¾î¾ß ÇÒ ±âÃÊ Áö½ÄÀ» Á¤¸®
2Àå ~ 3Àå - °£´ÜÇÑ ¿¹¸¦ ÅëÇØ HTML/CSS ÄÚµù È帧À» ÇнÀ. ƯÈ÷ ¾ðÁ¦ ¾î¶² ű׸¦ »ç¿ëÇؼ ÆäÀÌÁö¸¦ ±¸¼ºÇϸé ÁÁÀºÁö¸¦ °³³ä Áß½ÉÀ¸·Î ¼³¸í
4Àå ~ 8Àå - ±â´Éº°·Î HTML/CSS ÄÚµù ¿¹¸¦ ¼Ò°³. ¡®¼³¸íÀ» À§ÇÑ ¿¹Á¦¡¯°¡ ¾Æ´Ñ ½ÇÀü ±â¼úÀ» µµÀÔÇؼ ¿¹Á¦¸¦ ±¸¼ºÇßÀ¸¹Ç·Î ÇнÀÀº ¹°·Ð ½Ç¹«¿¡µµ Àû¿ë °¡´É
9Àå - ·¹À̾ƿô¿¡ °üÇØ ³»¿ë°ú ÇÔ²², ÇöÀç ÁÖ·ù°¡ µÇ´Â Ç÷º½º ¹Ú½º(flex box) ±â¼úÀ» »ç¿ëÇØ ÀüÇüÀûÀÎ ÆäÀÌÁö ·¹À̾ƿô°ú ³»ºñ°ÔÀ̼ÇÀ» ±¸ÇöÇÏ´Â ¹æ¹ýÀ» »ó¼¼ÇÏ°Ô ´Ù·ë
10Àå - Áö±Ý±îÁö ¼Ò°³ÇÑ ±â¼úÀ» Á¶ÇÕÇؼ ½ÇÁ¦ À¥»çÀÌÆ®¸¦ ±¸ÃàÇØ º¸°í, À¥»çÀÌÆ®ÀÇ HTML/CSS ÀÛ¼º È帧°ú »ç°í¹æ½Ä¿¡ µû¸¥ ÀÛ¾÷ ¼ø¼¸¦ ¼Ò°³ÇÔ. ¾Æ¹«¸® º¹ÀâÇÑ µðÀÚÀÎÀÌ¶óµµ »ç½ÇÀº ¡®ÀÛÀº ±â¼úµéÀÇ ÁýÇÕ¡¯À¸·Î ¸¸µé¾îÁ® ÀÖ´Ù´Â °ÍÀ» ÀÌÇØÇÒ ¼ö ÀÖµµ·Ï ±¸¼º
1Àå - À¥»çÀÌÆ® ±¸Á¶¿Í URLÀÇ Æ¯Â¡ ±×¸®°í »ç¿ëÇÒ ¼ö ÀÖ´Â ÆÄÀÏ Á¾·ù ¹× Ư¡ µî À¥»çÀÌÆ® Á¦ÀÛÀ» ½ÃÀÛÇϱ⿡ ¾Õ¼ ¾Ë¾Æ µÎ¾î¾ß ÇÒ ±âÃÊ Áö½ÄÀ» Á¤¸®
2Àå ~ 3Àå - °£´ÜÇÑ ¿¹¸¦ ÅëÇØ HTML/CSS ÄÚµù È帧À» ÇнÀ. ƯÈ÷ ¾ðÁ¦ ¾î¶² ű׸¦ »ç¿ëÇؼ ÆäÀÌÁö¸¦ ±¸¼ºÇϸé ÁÁÀºÁö¸¦ °³³ä Áß½ÉÀ¸·Î ¼³¸í
4Àå ~ 8Àå - ±â´Éº°·Î HTML/CSS ÄÚµù ¿¹¸¦ ¼Ò°³. ¡®¼³¸íÀ» À§ÇÑ ¿¹Á¦¡¯°¡ ¾Æ´Ñ ½ÇÀü ±â¼úÀ» µµÀÔÇؼ ¿¹Á¦¸¦ ±¸¼ºÇßÀ¸¹Ç·Î ÇнÀÀº ¹°·Ð ½Ç¹«¿¡µµ Àû¿ë °¡´É
9Àå - ·¹À̾ƿô¿¡ °üÇØ ³»¿ë°ú ÇÔ²², ÇöÀç ÁÖ·ù°¡ µÇ´Â Ç÷º½º ¹Ú½º(flex box) ±â¼úÀ» »ç¿ëÇØ ÀüÇüÀûÀÎ ÆäÀÌÁö ·¹À̾ƿô°ú ³»ºñ°ÔÀ̼ÇÀ» ±¸ÇöÇÏ´Â ¹æ¹ýÀ» »ó¼¼ÇÏ°Ô ´Ù·ë
10Àå - Áö±Ý±îÁö ¼Ò°³ÇÑ ±â¼úÀ» Á¶ÇÕÇؼ ½ÇÁ¦ À¥»çÀÌÆ®¸¦ ±¸ÃàÇØ º¸°í, À¥»çÀÌÆ®ÀÇ HTML/CSS ÀÛ¼º È帧°ú »ç°í¹æ½Ä¿¡ µû¸¥ ÀÛ¾÷ ¼ø¼¸¦ ¼Ò°³ÇÔ. ¾Æ¹«¸® º¹ÀâÇÑ µðÀÚÀÎÀÌ¶óµµ »ç½ÇÀº ¡®ÀÛÀº ±â¼úµéÀÇ ÁýÇÕ¡¯À¸·Î ¸¸µé¾îÁ® ÀÖ´Ù´Â °ÍÀ» ÀÌÇØÇÒ ¼ö ÀÖµµ·Ï ±¸¼º