°³¶ËÀ̳׿¡¼ ÆÇ¸ÅµÈ "½ºÅ¸ÀÏ·Î ¸»ÇØ¿ä!" Á¤°¡ 25,000¿ø Æò±ÕÇÒÀΰ¡
|
|
|
Part 1 À¥ÀÇ Ã¹°ÉÀ½ 1Àå À¥ÆäÀÌÁö´Â ¹«¾ùÀϱî¿ä? HTML, ÀÚ¹Ù½ºÅ©¸³Æ®, ±×¸®°í CSS - DOMÀ̶õ ¹«¾ùÀϱî? - HTML°ú CSS - ÀÚ¹Ù½ºÅ©¸³Æ®¿Í CSS - Ç÷¡½Ã¿Í CSS 2Àå À¥ µðÀÚÀ̳ÊÀÇ µµ±¸ »óÀÚ À¥ ºê¶ó¿ìÀú - ÀÎÅÍ³Ý ÀͽºÇ÷η¯ (IE) - ÆÄÀ̾îÆø½º (FF) - »çÆĸ® (Sa) - ¿ÀÆä¶ó (Op) - TÅ©·Î½º¿À¹ö¸¦ ÀÌ¿ëÇØ ¸Æ(Mac)¿¡¼ ÀÎÅÍ³Ý ÀͽºÇ÷η¯ 6 Å×½ºÆ® Çϱâ
ÆÄÀ̾îÆø½ºÀÇ ºÎ°¡±â´É - Firebug - Colorzilla - Palette Grabber - MeasureIt - Pixel Perfect
ÄÚµå ¿¡µðÅÍ - Coda - TopStyle - CSSEdit - Dreamweaver
¿Â¶óÀο¡¼ »ç¿ëÇÒ ¼ö ÀÖ´Â µµ±¸µé - ColorJack - Adobe Kuler - Typetester - SUMO Paint 3Àå CSS¿¡ ´ëÇÑ ¿ÀÇصé ù ¹ø° ¿ÀÇØ : CSS´Â µðÀÚÀ̳ʰ¡ ¾Æ´Ñ °³¹ßÀÚ¸¦ À§ÇÑ °ÍÀÌ´Ù? µÎ ¹ø° ¿ÀÇØ : CSS´Â µðÀÚÀ̳ʰ¡ ¿øÇÏ´Â ´ë·Î ´Ù·ê ¼ö ¾ø´Ù? ¼¼ ¹ø° ¿ÀÇØ : CSS´Â ¸¹Àº ºê¶ó¿ìÀú¿¡¼ ÀÏ°ü¼º ¾øÀÌ º¸ÀδÙ?
Part 2 CSS ¹®¹ý ¾Ë¾Æº¸±â 4Àå ±¸¹®: ÀÇ¹Ì ¸¸µé±â ½ºÅ¸ÀÏ ±ÔÄ¢ - ½ºÅ¸ÀÏ ±ÔÄ¢ ¼±¾ð ºÎºÐ - ±âº» ½ºÅ¸ÀÏ ±ÔÄ¢ - ´õ ¸¹Àº ½ºÅ¸ÀÏ ¼±¾ðÇϱâ - ±ÔÄ¢ Á¶ÇÕÇϱâ
¼±ÅÃÀÚÀÇ Á¾·ù - HTML ¼±ÅÃÀÚ - Ŭ·¡½º ¼±ÅÃÀÚ - id ¼±ÅÃÀÚ
¹®¸Æ ¾È¿¡¼ÀÇ ½ºÅ¸ÀÏ - ÄÜÅÙÃ÷ÀÇ À§Ä¡¿¡ µû¸¥ ½ºÅ¸ÀÏ ÁöÁ¤Çϱâ - ÀÚ½Ä ¿ä¼Ò¸¦ À§ÇÑ ½ºÅ¸ÀÏ - ÇüÁ¦ ¿ä¼Ò¸¦ À§ÇÑ ½ºÅ¸ÀÏ
Ưº°ÇÑ °æ¿ì¸¦ À§ÇÑ ½ºÅ¸ÀÏ - ¸µÅ© »óÅ - ¸µÅ© ¾×¼ÇÀ» À§ÇÑ ½ºÅ¸ÀÏ - À¯µ¿ÀûÀÎ ¾×¼ÇÀ» À§ÇÑ ½ºÅ¸ÀÏ - ¹®´ÜÀÇ ÀϺκÐÀ» À§ÇÑ ½ºÅ¸ÀÏ 5Àå ½Ã¸Çƽ: ½ºÅ¸ÀÏÀÇ ÀÇ¹Ì ºÎ¿©Çϱ⠽ºÅ¸ÀÏ ±ÔÄ¢ÀÌ ÁöÁ¤µÇ´Â °÷ - HTML ű׿¡ ÁöÁ¤ÇÏ´Â ÀζóÀÎ ½ºÅ¸ÀÏ - À¥ÆäÀÌÁö ¾È¿¡ »ðÀÔµÈ ½ºÅ¸ÀÏ - ¿ÜºÎ ½ºÅ¸ÀÏ
CSS¿¡ ¼³¸í Ãß°¡Çϱ⠻ó¼Ó - »ó¼Ó µ¤¾î¾²±â
¼ø¼
±¸Ã¼¼º - CSS ±ÔÄ¢ÀÇ °¡ÁßÄ¡ °áÁ¤Çϱâ
Áß¿äµµ ¹Ìµð¾î ´Ü°èÀûÀ¸·Î Àû¿ëÇϱâ 6Àå ¾îÈÖ : ¸»ÀÌ ÅëÇÏ´Ù °ª - Å°¿öµå - º¯¼ö
ÆùÆ® ÅؽºÆ®
¹è°æ - À̹ÌÁö ¹Ýº¹ - À̹ÌÁö À§Ä¡
¹Ú½º - µð½ºÇ÷¹ÀÌ - ºÒÅõ¸íµµ - ÇÃ·Ô - ³Êºñ¿Í ³ôÀÌ - Å׵θ®¼± - Æеù - ¸¶Áø - IE °íÄ¡±â
À§Ä¡ ÁöÁ¤ - À§Ä¡ÁöÁ¤ ŸÀÔ - Æò¸é À§Ä¡ ¼³Á¤Çϱâ - °ø°£ À§Ä¡ ¼³Á¤Çϱâ
Å×ÀÌºí ¸®½ºÆ® Ä¿¼
µðÀÚÀÎ Çâ»ó - ±×¸²ÀÚ - µÕ±Ù ¸ð¼¸® - ¿Ü°û¼±
Part 3 ¿ø¾î¹Îó·³ ¸»Çϱâ 7Àå CSS·Î µðÀÚÀÎÇϱâ ÀÛ¾÷ °úÁ¤ : °³¿ä
±âȹÇϱâ - ½ºÄÉÄ¡Çϱâ - ÆäÀÌÁö È帧µµ - ¿ÍÀ̾îÇÁ·¹ÀÓ - ¹«µå º¸µå - ½Ã°¢Àû ±¸¼º¿ä¼Òµé
±¸ÃàÇϱâ - Å©·Ò ÀÚ¸£±â - ½ºÅ¸ÀÏ °¡À̵å - ÇÁ·ÎÅäŸÀÔ
¹èÄ¡Çϱâ - ¾ËÆÄ - º£Å¸ - ·±Äª
ÀÛ¾÷ °úÁ¤ ¹Ýº¹Çϱâ 8Àå ·¹À̾ƿô ±¸Á¶ - Head¿Í Body - CSS¸¦ À§ÇÑ HTML ÇÁ·¹ÀÓ¿öÅ© - CSS Ãß°¡Çϱâ
±âº» ½ºÅ¸ÀÏ - ºê¶ó¿ìÀú ±âº» ½ºÅ¸ÀÏ ¼³Á¤Çϱâ - ³ª¸¸ÀÇ ±âº» ½ºÅ¸ÀÏ ¼³Á¤Çϱâ
±×¸®µå - Çà - Ä÷³ - ¼½¼Ç 9Àå ŸÀÌÆ÷±×·¡ÇÇ ÆùÆ®ÀÇ ¼±Åà - ÇÙ½É À¥ ÆùÆ® - À¥ ¾ÈÀü ÆùÆ® - ´Ù¿î·ÎµåÇÒ ¼ö ÀÖ´Â ÆùÆ®
À¯µ¿ÀûÀΠŸÀÌÆ÷±×·¡ÇÇ - ¼Ã¼ ¼±ÅÃÇϱâ
ÅؽºÆ® ²Ù¹Ì±â - Çì´õ - ¹®´Ü°ú ÀÎ¿ë ºí·Ï - ¸®½ºÆ® 10Àå ³»ºñ°ÔÀÌ¼Ç CSS ½ºÇÁ¶óÀÌÆ® (CSS Sprites) ¸µÅ© ¸Þ´º ¹öÆ° 11Àå Å©·Ò Åõ¸í À̹ÌÁö »ç¿ëÇϱâ - IE6¿¡¼ Åõ¸í PNG À̹ÌÁö »ç¿ëÇϱâ
±×¸®µå Á¤ÀÇÇϱâ - Ä÷³ - Çà
·Î°í¿Í Æû - ·Î°í - Æû
¼½¼Ç Á¤ÀÇÇϱâ - ±¤°í¸¦ À§ÇÑ ´ëü ¹öÀü - ¸¶Áö¸· ²Ù¹Ì±â 12Àå ¸¶Áö¸· À̾߱â CSS º§¸®µ¥ÀÌ¼Ç - À¥Ç¥ÁØÀ» À§ÇÑ µðÀÚÀÎ?
CSS ÇÁ·¹ÀÓ¿öÅ© - ³ª¸¸ÀÇ CSS ÇÁ·¹ÀÓ¿öÅ© ¸¸µé±â
´Ù¸¥ ¸ÅÄ¡¸¦ À§ÇÑ CSS - ¸ð¹ÙÀÏ ÀåÄ¡ - ÇÁ¸°Æ®
CSS ÃÖÀûÈÀÇ ¹æ¹ý - ÀϹÝÀûÀÎ »çÇ× - µðÀÚÀÎ - ÄÚµåÈ ÀÛ¾÷ - ÃÖÀûÈÇϱâ
[ºÎ·Ï]
A: voxLibris ÄÚµå index.html main.css default.css layout.css layout.css navigation.css chrome.css B: CSS °ª ±æÀÌ - Çȼ¿Àΰ¡? emÀΰ¡?
ÆùÆ® URL
»ö»ó - »ö»ó ºÒÅõ¸íµµ C: ÀÎÅÍ³Ý ÀͽºÇ÷η¯ ¹®Á¦ ÇØ°áÇϱâ ÄõÅ© ÀÌÇØÇϱâ ÇØ°á¹ý 1: Doctype ÀüȯÇϱâ ÇØ°á¹ý 2: Á¶°ÇºÎ ½ºÅ¸ÀÏ ÇØ°á¹ý 3: ¾ð´õ½ºÄÚ¾î ÇÙ IE6¿¡¼ ¹ß»ýÇÏ´Â °øÅëÀûÀÎ ¹®Á¦µé
CSS ÇÒ ÁÙ ¾Æ¼¼¿ä?
CSS´Â À¥ÀÌ ½Ã°¢ÀûÀ¸·Î º¸¿©ÁÖ´Â ºÎºÐÀ» ´ã´çÇÑ´Ù. ¿©·¯ºÐÀÌ µðÀÚÀ̳ʶó¸é, CSS´Â ¿©·¯ºÐÀÇ ¾ÆÀ̵ð¾î¸¦ ¿Â¶óÀÎ»ó¿¡ ÆîÄ¥ ¼ö ÀÖ°Ô Çϱâ À§Çؼ ²À ¾Ë¾ÆµÑ ÇÊ¿ä°¡ ÀÖ´Â ¾ð¾îÀÌ´Ù. CSS Äڵ带 ¼³¸íÇÏ°í Àִ åµéÀº ¹«¼öÈ÷ ¸¹Áö¸¸, ±×·± Ãß»óÀûÀÎ Äڵ忡¼´Â »ý°¢À» ÀÚÀ¯·Ó°Ô ÆîÄ¡±â Èûµé´Ù. ´«¿¡ º¸ÀÌ´Â »ö»ó, ÇüÅÂ, ¹èÄ¡¸¦ °¡Áö°í »ý°¢ÇØ¾ß ÇÑ´Ù. ÄÚµå·Î ¸»ÇÏ´Â °ÍÀÌ ¾Æ´Ï¶ó ½ºÅ¸ÀÏ·Î ¸»ÇØ¾ß ÇÑ´Ù.
[½ºÅ¸ÀÏ·Î ¸»ÇØ¿ä!]´Â ¿©·¯ºÐÀÇ µðÀÚÀÎÀÌ À¥À» À§ÇÑ °á°ú¹°·Î ¾î¶»°Ô Àû¿ëµÉ ¼ö ÀÖ´ÂÁö¸¦ °£´ÜÇÑ ¿¹Á¦¸¦ ÀÌ¿ëÇÏ¿© ¼³¸íÇÔÀ¸·Î½á, ÄÚµå¿Í ½ºÅ¸ÀÏ »çÀÌÀÇ º®À» Çã¹°¾î ÁÙ °ÍÀÌ´Ù.
CSS´Â µðÀÚÀ̳ʰ¡ ¾Æ´Ñ °³¹ßÀÚ¸¦ À§ÇÑ °ÍÀÌ´Ù?
[°ÅÁþ] : ¸¹Àº µðÀÚÀ̳ʵéÀÌ CSS´Â µðÀÚÀ̳ÊÀÇ ¾÷¹«°¡ ¾Æ´Ï¶ó, ´ÜÁö 'ÄÚ´õ'¸¦ À§ÇÑ °ÍÀ̶ó°í »ý°¢ÇÕ´Ï´Ù. ÀÌ·¯ÇÑ À̾߱âµéÀ» »ó´çÈ÷ ¸¹Àº µðÀÚÀ̳ʵé·ÎºÎÅÍ µé¾ú½À´Ï´Ù. "³ª´Â ÇÁ·Î±×·¥ ¾ð¾î¸¦ ¹è¿ì°í ½ÍÁö ¾Ê´Ù." ÀÌ·¸°Ô ¸»À» ÇÏ´Â µðÀÚÀ̳ʵ鿡°Ô´Â 3°¡Áö ±âº»ÀûÀÎ ³í¸®°¡ ÀÖ½À´Ï´Ù.
ù ¹ø° ³í¸® : °³¹ßÀÚµéÀÌ ÀÌÇØÇϸé, ³ ÀÌÇØÇÒ ÇÊ¿ä°¡ ¾ø´Ù. ÀúÀÚ´Â ÆíÁý µðÀÚÀ̳ʷΠµðÀÚÀÎÀ» ½ÃÀÛÇß°í, Àμ⠰úÁ¤À» óÀ½ºÎÅÍ ³¡±îÁö ÀÌÇØÇØ¾ß Çß½À´Ï´Ù. CMYK, Á¾ÀÌÀÇ µÎ²² µî¿¡ ´ëÇØ ¾Ë¾Æ¾ß ÇÏ°í, Ãâ·Â ÆÄÀÏÀ» ¸¸µå´Â ¹ýµµ ¾Ë¾Æ¾ß Çß½À´Ï´Ù. ÀÌ·± °ÍµéÀ» ÀÌÇØÇØ¾ß ÇÏ´Â °ÍÀº ÀúÀÚÀÇ µðÀÚÀÎÀÌ Á÷Á¢ ¼±ÅÃÇÑ ÀûÀýÇÑ ¸Åü¿¡¼ ÃÖ°íÀÇ °á°ú¸¦ ¾ò¾î¾ß Çϱ⠶§¹®À̾ú½À´Ï´Ù. Àû¾îµµ ¿©·¯ºÐ ÀÚ½ÅÀÌ Äڵ带 ÀÛ¾÷ÇÒ °èȹÀÌ ÀüÇô ¾ø´õ¶óµµ, CSS°¡ ¾î¶»°Ô µ¿ÀÛÇÏ´ÂÁö ÀÌÇØÇÑ´Ù¸é, ÇÑ ´Ü°è ´õ ¹ßÀüµÈ À¥ µðÀÚÀ̳ʰ¡ µÉ ¼ö ÀÖÀ» °ÍÀÔ´Ï´Ù.
µÎ ¹ø° ³í¸® : CSS´Â ¹è¿ì±â ¾î·Æ´Ù. CSS´Â ½ÇÁ¦·Î µðÀÚÀ̳ÊÀÇ ¸¶Àε带 °¡Áö°í °³¹ßµË´Ï´Ù. ¾î·ÆÁö ¾ÊÀº ÀϹÝÀûÀÎ ¿ë¾î°¡ »ç¿ëµÇ¾î ½±°Ô ÀÌÇØÇÏ°í ±â¾ïµÉ ¼ö ÀÖ½À´Ï´Ù.
¼¼ ¹ø° ³í¸® : ³ ÇÁ·Î±×·¡¸Ó°¡ ¾Æ´Ï¶ó µðÀÚÀ̳ʶó°í¿ä!! CSS´Â ÇÁ·Î±×·¥ ¾ð¾î°¡ ¾Æ´Ï¶ó ½ºÅ¸ÀÏ ½ÃÆ® ¾ð¾îÀÔ´Ï´Ù. ¹«¾ùÀÌ ´Ù¸£³Ä°í¿ä? ½ºÅ¸ÀÏ ½ÃÆ® ¾ð¾î´Â ¹®¼ ¾È¿¡ ÀÖ´Â ¼·Î ´Ù¸¥ °´Ã¼µéÀÌ ¾î¶»°Ô Ç¥ÇöµÇ´ÂÁö ·ÎÁ÷ ±â¹ÝÀÎ functionº¸´Ù Àΰ£ÀÌ ÀÌÇØÇϱ⠽¬¿î °£´ÜÇÑ ½ºÅ¸ÀÏ ±ÔÄ¢À» ÀÌ¿ëÇÏ¿© ÄÄÇ»ÅÍ¿¡°Ô ½±°Ô À̾߱âÇØÁÝ´Ï´Ù. CSS´Â ÄÜÅÙÃ÷°¡ ¾î¶»°Ô µ¿ÀÛÇÏ´ÂÁö ¼³¸íÇÏ´Â °Ô ¾Æ´Ï¶ó, ¾î¶»°Ô º¸¿©¾ß ÇÏ´ÂÁö¸¦ ¼³¸íÇÕ´Ï´Ù.
[ÃßõÀÇ ±Û]
"Á¦À̽¼ÀÌ À¥µðÀÚÀ̳ʵ鿡°Ô CSS¸¦ °¡¸£Ä¡´Â ¹æ½ÄÀº Á¤¸» ÃÖ°í´Ù! ±×´Â µðÀÚÀ̳ÊÀÇ ¾ð¾î·Î ¸»ÇÑ´Ù." - Allison Bucchere, AOL MediaGlow Living Network ºÎȸÀå °â µð·ºÅÍ
|
|
|
|
|