|
Ä®ÅðÁ· ±è´ë¸®´Â ¾Ë°í ³ª¸¸ ¸ð¸£´Â HTML5+CSS3
Á¤°¡ : 21,000¿øÆǸŰ¡ 18,900¿ø (10% ÇÒÀÎ)
Ç°¸ñÁ¤º¸
Ã¥¼Ò°³¾î·Æ°í Áö·çÇÑ ¼³¸íÀº ±×¸¸! »ç¿ëµµ°¡ ³ôÀº HTML ÅÂ±×¿Í CSS ¼Ó¼ºÀ» ª°í ½±°Ô ¼³¸íÇÑ Ã¥! À¥ µðÀÚÀ̳ʷΠ½Ç¹«¸¦ ÁøÇàÇÏ´ø ÀúÀÚ´Â ÆÛºí¸®½Ì ¾÷¹«¸¦ ÁøÇàÇÏ°Ô µÇ¸é¼ ºÎµúÈù ±Ã±ÝÁõ°ú ½ÃÇàÂø¿À¸¦ ÇØ°áÇϱâ À§ÇØ ¸¹Àº Ã¥°ú ¾¾¸§Çß´Ù. ÇÏÁö¸¸ ¾î·Á¿î ¿ë¾î¿Í ³»¿ëÀ¸·Î °¡µæÇÑ »çÀü °°Àº Ã¥Àº º¸±â¿¡µµ ºÒÆíÇÏ°í °úÇÑ Á¤º¸·Î ÀÎÇØ Áö¸é ³¶ºñÀÎ °æ¿ì°¡ ¸¹¾ÒÀ¸¸ç ¿©±âÀú±â ¼Ä¡ÇØ Ã£¾Æ³½ ÀÚ·áµµ Çϳª¸¦ ÇØ°áÇÏ¸é ¶Ç ´Ù¸¥ Áú¹®ÀÌ »ý°Ü ÁøÀϺ¸ÇÏÁö ¸øÇÏ´Â »óȲÀ̾ú´Ù. 20¿© ³â°£ ½Ç¹«¿¡ ÀÖÀ¸¸é¼ ¸¹Àº ¾î·Á¿òÀ» ½º½º·Î ÇØ°áÇØ¿Â ÀúÀÚ´Â È°¿ëµµ ³ôÀº Ã¥ÀÇ Çʿ伺À» Àý°¨ÇØ °æÇè°ú ¿¬·ûÀ» ¸ð¾Æ ÀÌ Ã¥À» ÁýÇÊÇß´Ù. ÀÌ Ã¥Àº °³³ä°ú ¿ëµµ¸¦ ¼³¸íÇÏ°í ¹Ù·Î ÀÌ¾î ½Ç½ÀÀ» µû¶ó ÇØ ±â´ÉÀ» ÀÍÈ÷°Ô Çß°í, »ö°ú ŸÀÌÆ÷±×·¡ÇÇ, ·¹À̾ƿô µî µðÀÚÀο¡ ÇÊ¿äÇÑ ³»¿ëÀ» ´Ù·ç¾î °¨°¢ÀûÀÎ µðÀÚÀεµ °¡´ÉÇÏ°Ô Çß´Ù. ÄÚµù ÀÛ¾÷ÀÇ °¡µ¶¼ºÀ» ³ôÀÌ´Â ¼³Á¤À» ÇÏ°í ¼ö½Ã·Î Å©·Ò ºê¶ó¿ìÀú·Î ¹Ì¸® º¸±â ÇÏ´Ï ÀÛ¾÷´É·üµµ ³ô´Ù. ±â´ÉÀ» ¸ðµÎ ÀÍÈ÷°í ³ª¸é ½ÇÁ¦·Î À¥»çÀÌÆ®¸¦ ¸¸µé¸é¼ ½Ç·ÂÀ» ¹ßÈÖÇغ¸ÀÚ! õõÈ÷ µû¶ó ÇÏ¸é ´©±¸µç ¿øÇÏ´Â À¥ »çÀÌÆ®¸¦ ¸¸µé ¼ö ÀÖÀ» °ÍÀÌ´Ù.
¸ñÂ÷CHAPTER 01 HTML°ú CSS ÁغñÇϱâ 01. HTML, CSS °³³ä ¾Ë±â | 01 | À¥ºê¶ó¿ìÀú(Web browser) 02. ¹» ÁغñÇÏÁÒ? ¤ýÀ¥ºê¶ó¿ìÀúÀÇ Á¾·ù¿Í Á¡À¯À² ¤ýÅ©·Ò(Chrome) ºê¶ó¿ìÀú ¼³Ä¡Çϱ⠤ý°³¹ßÀÚ µµ±¸ ½Ç½À _ À¥»çÀÌÆ® [+´õº¸±â]¿¡¼ HTML ¿ä¼Ò¿Í CSS ¼Ó¼º°ú ¼Ó¼º°ª ¾Ë¾Æº¸±â ½Ç½À _ [°³¹ßÀÚ µµ±¸]·Î »ö°ú ³»¿ë ¼öÁ¤Çغ¸±â | 01 | ÆíÁý±â(Editors) ½Ç½À _ ºñÁÖ¾ó ½ºÆ©µð¿À ÄÚµå ÆÄÀÏ ´Ù¿î·ÎµåÇϱ⠽ǽÀ _ ºñÁÖ¾ó ½ºÆ©µð¿À ÄÚµå ¼³Ä¡Çϱ⠤ýºñÁÖ¾ó ½ºÆ©µð¿À ÄÚµåÀÇ ÀÎÅÍÆäÀ̽º ¾Ë¾Æº¸±â ¤ýÆí¸®ÇÑ È®Àå ±â´É »ç¿ëÇϱ⠽ǽÀ _ ¿µ¹® ¸Þ´º¸¦ Çѱ۷Π±³Ã¼Çϱ⠽ǽÀ _ HTML ÆÄÀÏÀ» ½Ç½Ã°£ ¹Ì¸® º¸±â ¤ýÄÚµù ¼Óµµ¸¦ ³ôÀÌ´Â ±â´É ¼³Á¤Çϱâ CHAPTER 02 HTML ÆäÀÌÁö ¸¸µé±â 01. ű×(tag)°¡ ¹¹ÁÒ? 02. ¿ä¼Ò(elements)°¡ ¹¹ÁÒ? 03. HTML ¹®¼ÀÇ ±âº» ±¸¼º ½Ç½À _ [ÀÚµ¿ ¿Ï¼º] ±â´ÉÀ» ÀÌ¿ëÇØ HTML ±¸Á¶ ¾Ë¾Æº¸±â 04. ¼Ó¼º(Attributes) | 01 | href ¼Ó¼º | 02 | target ¼Ó¼º | 03 | src ¼Ó¼º | 04 | alt ¼Ó¼º 05. ¿ä¼Ò(elements)ÀÇ Æ¯Â¡ | 01 | Block level ¿ä¼Ò(elements) | 02 | Inline ¿ä¼Ò(elements) 06. ÅؽºÆ®(Text) ¿ä¼Ò(elements) | 01 | ¡´h1¡µ~¡´h6¡µ Á¦¸ñ ű×(tags) | 02 | ¹®´Ü ¡´p¡µ ÅÂ±× | 03 | ÁÙ ¹Ù²Þ ¡´br¡µ ÅÂ±× | 04 | Ư¼öÄÚµå ¹®ÀÚ(entity) | 05 | ¹®ÀÚ °Á¶ ÅÂ±× | 06 | ÁÖ¼®(comment) ½Ç½À _ HTML ¹®¼ ¸¸µé±â 07. À̹ÌÁö(Images) ÅÂ±×¿Í ¼Ó¼º | 01 | ¡´img, src, alt¡µ¸¦ ÀÌ¿ëÇÏ¿© À̹ÌÁö »ðÀÔÇϱâ | 02 | À̹ÌÁö ÆÄÀÏ °æ·Î(file paths) | 03 | HTML¿¡¼ »ç¿ëÇÒ ¼ö ÀÖ´Â À̹ÌÁö ÆÄÀÏ Çü½Ä ½Ç½À _ À̹ÌÁö »ðÀÔÇϱâ 08. ÇÏÀÌÆÛ¸µÅ©(Hyperlinks) | 01 | À̹ÌÁö¿¡ ¸µÅ© Àû¿ëÇϱâ | 02 | ÅؽºÆ®¿¡ ¸µÅ© Àû¿ëÇϱâ | 03 | À̸ÞÀÏ¿¡ ¸µÅ© Àû¿ëÇϱâ | 04 | ÁÖ¼Ò(URL) ÀÔ·ÂÇϱ⠽ǽÀ _ À̹ÌÁö¸¦ Ŭ¸¯ÇØ »õ·Î¿î ÅÇ(ÆäÀÌÁö)À¸·Î ¿±â ½Ç½À _ ÅؽºÆ®¸¦ Ŭ¸¯ÇØ »õ·Î¿î ÅÇ(ÆäÀÌÁö)À¸·Î ¿±â 09. ¸ñ·Ï(List) ÅÂ±× | 01 | ¼ø¼ ¾ø´Â ¸ñ·Ï¡´ul li¡µ | 02 | ¼ø¼ ÀÖ´Â ¸ñ·Ï¡´ol li¡µ ½Ç½À _ ¼ø¼ ¾ø´Â ¸ñ·Ï¿¡ ¼ø¼ Àû¿ëÇϱâ 10. Ç¥(Table) ÅÂ±× ½Ç½À _ 3¿ 3Çà Ç¥ ¸¸µé±â 11. Æû(Form) ÅÂ±× | 01 | ÀÎDz(input) ÅÂ±× | 02 | ·¹À̺í(label) ÅÂ±× ½Ç½À _ ¾ÆÀÌÄÜÀÌ ÀÖ´Â °Ë»ö Æû ¸¸µé±â 12. ¹öÆ°(button) ÅÂ±× 13. ¹Ìµð¾î(Media) ÅÂ±× | 01 | ºñµð¿À(video) ÅÂ±× | 02 | ¿Àµð¿À(audio) ÅÂ±× | 03 | À¯Æ©ºê(youtube) ¿¬°á ½Ç½À _ À¯Æ©ºê ¿µ»óÀ» HTML ÆäÀÌÁö¿¡ »ðÀÔÇϱâ 14. Àǹ̷ÐÀûÀÎ ¿ä¼Ò·Î ±¸¼ºµÈ HTML5 ÆäÀÌÁö ±¸Á¶ | 01 | Çì´õ(header) ÅÂ±× | 02 | ³»ºñ°ÔÀ̼Ç(nav) ÅÂ±× | 03 | ¼½¼Ç(section) ÅÂ±× | 04 | ¾ÆƼŬ(article) ÅÂ±× | 05 | ¾î»çÀ̵å(aside) ÅÂ±× | 06 | ǪÅÍ(footer) ÅÂ±× ½Ç½À _ Àǹ̷ÐÀû HTML ÆäÀÌÁö ¸¸µé±â CHAPTER 03 CSS·Î HTML ÆäÀÌÁö ½ºÅ¸ÀϸµÇϱâ 01. CSS ÀԷ¹ý(Syntax) 02. ¼±ÅÃÀÚ(Selectors)ÀÇ Á¾·ù | 01 | ¿ä¼Ò(element) | 02 | ¾ÆÀ̵ð(#) | 02 | Ŭ·¡½º(.) | 03 | ¸ðµç(*) | 04 | ±×·ì(,) | 05 | ÀÚ¼Õ ¼±ÅÃÀÚ(ÇÑ Ä ¶ç±â) | 06 | ÀÚ½Ä ¼±ÅÃÀÚ(¡µ) 03. °¡»ó(pseudo) Ŭ·¡½º 04. HTML ÆäÀÌÁö¿¡ CSS ¿¬°áÇϱâ | 01 | ¿ÜºÎ(External CSS) ½ºÅ¸ÀÏ | 02 | ³»ºÎ(Internal CSS) ½ºÅ¸ÀÏ | 03 | ÀζóÀÎ(Inline CSS) ½Ç½À _ Á¦¸ñ ±ÛÀÚ »ö Àû¿ëÇϱâ 05. ÆùÆ®(Fonts) | 01 | Æйи®(family) | 02 | ½ºÅ¸ÀÏ(style) | 03 | »çÀÌÁî(size) | 04 | ¿þÀÌÆ®(font-weight) | 05 | ±¸±Û À¥ÆùÆ®(Google Web fonts) ½Ç½À _ ±¸±Û À¥ÆùÆ® Àû¿ëÇϱâ 06. Ä÷¯(color) | 01 | À̸§(names) | 02 | 16Áø¼ö(HEX:Hexadecimal) | 03 | RGB(Red, Green, Blue) | 04 | HSL(Hue, Saturation, Lightness) | 05 | Ä÷¯ ¼±Åñâ(Color Picker) 07. ÅؽºÆ® ½ºÅ¸Àϸµ(Text styling) | 01 | ÅؽºÆ® Á¤·Ä(align) | 02 | µ¥ÄÚ·¹À̼Ç(decoration) | 03 | µé¿©¾²±â(indent) | 04 | ÀÚ°£(letter spacing) | 05 | ´Ü¾î °£°Ý(word spacing) | 06 | Çà°£(line height) 08. ¹Ú½º ¸ðµ¨(Box Model) | 01 | Å©±â(width, height) | 02 | Å׵θ® ¼±(border) | 03 | ¿©¹é(padding, margin) ¤ýPadding(¾ÈÂÊ ¿©¹é) ¤ýMargin(¹Ù±ù ¿©¹é) | 01 | µÕ±Ù ¸ð¼¸®(radius) | 02 | box-sizing 09. ·¹À̾ƿô(Layout) | 03 | float | 04 | clear | 05 | overflow ¤ýÀ̹ÌÁö¿Í ³»¿ëÀ» 2´ÜÀ¸·Î ·¹À̾ƿô ±¸¼ºÇϱâ | 01 | display | 02 | position | 03 | flexbox ¤ýºÎ¸ð(container)¿¡¼ »ç¿ëÇÏ´Â ¼öÆòÃà Á¤·Ä ¼Ó¼ºµé - flex - flex-direction ©ç flex-direction : column ©è flex-direction : column-reverse ©é flex-direction : row ©ê flex-direction : row-reverse - flex-wrap ©ç flex-wrap : wrap ©è flex-wrap : no- wrap ©é flex-wrap : wrap-reverse - justfy-contents ©ç justfy-contents : flex-start ©è justfy-contents : flex-end ©é justfy-contents : center ©ê justify-contents : space-between ©ë justify-contents : space-around ©ì justify-contents : space-evenly ¤ýºÎ¸ð(container)¿¡¼ »ç¿ëÇÏ´Â ¼öÁ÷Ãà Á¤·Ä ¼Ó¼ºµé - align-items ©ç align-items: stretch ©è align-items: center ©é align-items: flex-start ©ê align-items: flex-end ©ë align-items: baseline - align-contents ¼Ó¼º ©ç align-content : space-between ©è align-content : space-around ©é align-content : stretch ©ê align-content : center ©ë align-content : flex-start ©ì align-content : flex-end ¤ýÀÚ½Ä(item)¿¡¼ »ç¿ëÇÏ´Â ¼Ó¼ºµé - order - flex-grow - flex-shrink - flex-basis - flex - align-self ½Ç½À _ flexbox¸¦ ÀÌ¿ëÇÏ¿© HTML5 ¹®¼ ·¹À̾ƿô µðÀÚÀÎÇϱâ | 07 | z-index ½Ç½À _ z-index ¼Ó¼º Àû¿ëÇϱâ z-index ¼Ó¼ºÀ» È°¿ëÇØ °ãħ ¼ø¼ ÁöÁ¤Çϱâ 10. ¹è°æ(background) | 01 | ¹è°æ»ö(background color) Àû¿ëÇϱâ | 02 | ¹è°æ¿¡ À̹ÌÁö(background image) ³Ö±â ¤ýbackground-image ¤ýbackground-repeat ¤ýbackground-position ©ç background-position : Å°¿öµå ©è background-position : ÁÂÇ©°ª ¤ýbackground-size ©ç background-size ©è background-size ¼Ó¼ºÀÇ ¼Ó¼º°ª ºñ±³ : auto, contain, cover | 03 | ºÒÅõ¸íµµ(opacity) CHAPTER 04 ½ÇÀü ¿¹Á¦ À¥»çÀÌÆ® ¸¸µé±â 01. ¸ÞÀÎ ÆäÀÌÁö ¸¸µé±â | 01 | ¸ÞÀÎ ÆäÀÌÁö HTML ±¸¼º°ú °øÅë CSS ¸¸µé±â | 02 | ¸ÞÀÎ ÆäÀÌÁö¿¡ ·Î°í¿Í GNB ¸¸µé±â | 03 | À̺¥Æ® ¹è³Ê ¹èÄ¡Çϱâ | 04 | À̹ÌÁö ¼öÆò Á¤·Ä ¸¸µé±â | 05 | À¯Æ©ºê »ðÀÔÇϱâ | 06 | ¼¶³×ÀÏ °¶·¯¸®¿Í ´º½º ¸®½ºÆ® ¸¸µé±â | 07 | footer ¸¸µé±â | 08 | »ó´ÜÀ¸·Î À̵¿ÇÏ´Â [top] ¹öÆ° ¸¸µé±â 02. ¼ºê ÆäÀÌÁö ¸¸µé±â | 01 | ¼ºê ÆäÀÌÁö HTML ±¸¼º | 02 | ºê·¹µåÅ©·³(breadcrumb) ¸¸µé±â | 03 | Á¦¸ñ°ú À̹ÌÁö ¼öÁ÷ Á¤·Ä ¸¸µé±â | 04 | ¹è°æ»ö À§¿¡ ¼¶³×ÀÏ À̹ÌÁö ¼öÆò Á¤·Ä ¸¸µé±â | 05 | Á¦¸ñ°ú À̹ÌÁö °¡¿îµ¥ Á¤·Ä ¸¸µé±â | 06 | GNB ¸Þ´º¿¡ ÆäÀÌÁö·Î À̵¿ÇÏ´Â ÇÏÀÌÆÛ¸µÅ© Àû¿ëÇϱâ | ºÎ·Ï | Ä®ÅðÁ·¿¡°Ô À¯¿ëÇÑ »çÀÌÆ® ¸ðÀ½ »ó¼¼ À̹ÌÁö
(°³)
1. ¹è¼Û
¹è¼ÛÀº ´çÀÏ ¿ÀÈÄ 4½ÃÀÌÀü(Åä¿äÀÏÀº ¿ÀÈÄ12½Ã)¿¡ ÁÖ¹®¹× °áÀ縦 ÇÏ½Ã¸é ´çÀϹè¼ÛµË´Ï´Ù. ¹è¼ÛÀº ÁÖ¹® ÈÄ °áÀç¿Ï·áÀÏÀ» ±âÁØÀ¸·Î 1~2ÀÏ ¾È¿¡ ¹è¼Û¿Ï·á¸¦ ¿øÄ¢À¸·Î ÇÏ°í ÀÖ½À´Ï´Ù. ´Ù¸¸ ºÎµæÀÌÇÑ °æ¿ì(ÇØ´ç»óÇ°ÀÇ Ç°Àý ¹× ÀýÆÇ) °í°´´Ô²² Àüȸ¦ µå·Á¼ 󸮸¦ ÇÕ´Ï´Ù. 2. ¹è¼Û·á ¹è¼Û·á´Â 25,000¿ø ÀÌ»óÀÌ °æ¿ì À̱×ÀëÇ÷¯½º¿¡¼ ºÎ´ãÇÏ°í, ¹Ì¸¸ÀÏ °æ¿ì °í°´ÀÌ 2,500¿øÀ» ºÎ´ãÇÕ´Ï´Ù. ´Ù¸¸ ±¸¸Å±Ý¾×ÀÌ 25,000¿ø ÀÌ»óÀε¥ Àû¸³±Ý µîÀ» »ç¿ëÇÏ¿© ½ÇÁ¦ °áÀç±Ý¾×ÀÌ 25,000¿ø ¹Ì¸¸ÀÌ µÇ´õ¶óµµ À̱×ÀëÇ÷¯½º¿¡¼ ¹è¼Û·á¸¦ ºÎ´ãÇÏ°í, Á¦ÁÖ¸¦ Á¦¿ÜÇÑ µµ¼Áö¿ªÀÇ °æ¿ì´Â 5,000¿øÀÌ Ãß°¡µË´Ï´Ù. Çؿܹè¼ÛÀº Àü¾× °í°´ºÎ´ãÀÌ µË´Ï´Ù. 5. ¹ÝÇ°/±³È¯
¹ÞÀ¸½Å ³¯ ºÎÅÍ ÀÏÁÖÀÏ À̳» ¹ÝÇ°/±³È¯ÀÌ °¡´ÉÇϽʴϴÙ. ½Ã°£ÀÌ Áö³ª¸é 󸮰¡ ºÒ°¡ÇÔÀ» ¾Ë·Á µå¸³´Ï´Ù. ´Ù¸¸ ÁÖ¹®ÇϽŠ»óÇ°°ú ´Ù¸¥ »óÇ°ÀÌ ¹è¼ÛµÇ°Å³ª Æĺ», ³«ÀåÀÌ ÀÖ´Â µµ¼ÀÇ °æ¿ì ÀÌ¿ë¾à°ü¿¡ ÁØÇÏ¿© À̱×ÀëÇ÷¯½ºÀÇ ºñ¿ëÀ¸·Î ±³È¯, ¹ÝÇ° ¹× ȯºÒ µîÀ» Çص帳´Ï´Ù. 4. ȯºÒ ¹ÞÀ¸½Å ³¯ºÎÅÍ 2ÀÏ À̳»·Î Àüȳª 1:1 °Ô½Ã±Û·Î Àû¾îÁÖ¼Å¾ß °¡´ÉÇϽʴϴÙ. 5. ÁÖÀÇ °í°´´Ô º¯½ÉÀ¸·Î ÀÎÇÑ ±³È¯/¹ÝÇ°/ȯºÒ °í°´´Ô²²¼ Åùèºñ(¿Õº¹Åùèºñ)¸¦ ºÎ´ãÀÌ µÇ´Ï ÀÌÁ¡ À¯ÀÇÇØ ÁֽʽÿÀ. ¶ÇÇÑ °ÀÇÅ×ÀÙ/¾ãÀº¹®Á¦Áý/ºñ´ÒÆ÷ÀåµÈÁ¦Ç°µîÀº Çѹø ±¸¸ÅÇÏ½Ã¸é ±³È¯/¹ÝÇ°/ȯºÒÀÌ ÀüÇô ¾ÈµË´Ï´Ù. ½ÅÁßÈ÷ »ý°¢Çϼż ±¸¸Å ºÎŹµå¸³´Ï´Ù. ´Ù¸¸ ºÒ·®Å×ÀÙÀÇ °æ¿ì ±× ºÒ·®ÀÌ µÈ °³º°Å×ÀÙÀ» À̱×ÀëÇ÷¯½ºÀÇ ºñ¿ëÀ¸·Î A/S¸¦ Çص帳´Ï´Ù. 6. ÁÖ¹®Ãë¼Ò, ±³È¯, ¹ÝÇ° ¹× ȯºÒÀº ´çÀÏ 3½Ã ÀÌÀü¿¡ ÇØÁÖ¼Å¾ß °¡´ÉÇÕ´Ï´Ù. ±× ÀÌÈÄ´Â ¹è¼Û µî¿¡ µû¸¥ Á¦ºñ¿ëÀ» ºÎ´ãÇÏ¼Å¾ß ÇÕ´Ï´Ù.
|
|
||||||||
|
||||||||
|
||||||||
* »óÇ°»çÀÌÁî Ä¡¼ö´Â Àç´Â ¹æ¹ý°ú À§Ä¡¿¡ µû¶ó 1~3cm ¿ÀÂ÷°¡ ÀÖÀ» ¼ö ÀÖ½À´Ï´Ù.