|
|
|
|
|
|
|
Ã¥³»¿ë |
|
¾Õ¼ °¡´Â À¥ Á¦ÀÛÀÚ¸¦ À§ÇÑ À¥ Ç¥ÁØ È°¿ë¼
-Â÷¼¼´ë À¥ Ç¥ÁØÀÇ ¸ðµç °Í,
-HTML 5·Î Á¦ÀÛµÈ ¸ð¹ÙÀÏ À¥ »çÀÌÆ®(http://coforward.com) ±¸Ãà »ç·Ê ¼ö·Ï
* ÀÌ Ã¥ÀÇ Æ¯Â¡
- Â÷¼¼´ë À¥ Ç¥ÁØ ±â¼úÀÎ HTML 5¿¡ ´ëÇÑ »ó¼¼ÇÑ ¼³¸í
- HTML 5 ¹× CSS 3, SVG, CANVAS¿¡ ´ëÇÑ ½ÇÀü ¿¹Á¦¿Í Çؼ³
- HTML 5¸¦ ÀÌ¿ëÇÑ ¸ð¹ÙÀÏ ´ëÀÀ ÇÁ·ÎÁ§Æ® ½ÇÀü »ç·Ê ¼ö·Ï
- Áö¼ÓÀûÀÎ Á¤º¸ ¾÷µ¥ÀÌÆ®¸¦ À§ÇÑ Áö¿ø »çÀÌÆ® ¿î¿µ
* ÀÌ Ã¥Àº ´©°¡ ºÁ¾ß ÇÒ±î¿ä?
-¿Ã¹Ù¸¥ Á¤º¸ ±¸Á¶¸¦ ¼³°èÇÏ°íÀÚ ÇÏ´Â ±âȹÀÚ
-À¥ÀÇ Ç¥Çö ¹üÀ§¸¦ ³ÐÈ÷°íÀÚ ÇÏ´Â µðÀÚÀ̳Ê
-Â÷¼¼´ë À¥ ±â¼úÀ» ÀÍÈ÷°íÀÚ ÇÏ´Â °³¹ßÀÚ
-N Screen ½Ã´ë¸¦ ÁغñÇÏ°íÀÚ ÇÏ´Â ¸ðµç À¥ Á¦ÀÛÀÚ
ÀÌ Ã¥ ÇÑ ±Ç¿¡ Â÷¼¼´ë À¥ Ç¥ÁØ¿¡ °üÇÑ ¸ðµç ³»¿ëÀ» ´ã¾Ò´Ù. ¿ì¼± HTML 5·Î Á¦ÀÛÇÏ¿© ¿î¿µ ÁßÀÎ »çÀÌÆ®(http://coforward.com)¸¦ ¿¹Á¦·Î »ç¿ëÇß°í, ½ÇÁ¦ ÀÛ¾÷ ´Ü°èÀÎ ±âȹºÎÅÍ µðÀÚÀÎ, ¼³°è±îÁöÀÇ °úÁ¤À» ´ã¾Ò´Ù. ÇöÀç À¥ Ç¥ÁØÀÎ XHTML 1.0&CSS 2ºÎÅÍ Â÷¼¼´ë À¥ Ç¥ÁØÀÎ HTML 5&CSS 3±îÁö ÃÑ Á¤¸®ÇÏ¿© ±¸¼ºÇß°í, ¶ÇÇÑ SVG, CANVAS, API¸¦ Çѹø¿¡ ÀÍÈú ¼ö ÀÖµµ·Ï ´õ »ó¼¼ÇÏ°Ô ¼Ò°³Çß´Ù. ±×¸®°í, À¥ »çÀÌÆ®¿Í ¸ð¹ÙÀÏ À¥ »çÀÌÆ®¸¦ ½Ç½ÀÇÒ ¼ö ÀÖ´Â ³»¿ëÀ» ½ÇÀü ¿¹Á¦ ÆÄÆ®¿¡¼ ´Ù·ð´Ù.
Áö¿ø »çÀÌÆ®(http://book.coforward.com)¸¦ ÅëÇØ ÀÌ Ã¥ÀÇ ¸ðµç ¿¹Á¦¸¦ Á÷Á¢ È®ÀÎÇÒ ¼ö ÀÖÀ¸¸ç, µ¶ÀÚ ¿©·¯ºÐ°ú ÀÇ°ßÀ» ±³È¯ÇÒ ¼ö ÀÖ´Â °Ô½ÃÆÇÀ» ¿î¿µÇÏ°í ÀÖ´Ù. |
|
¸ñÂ÷ |
|
Chapter 01. À¥ Ç¥ÁØ(Web Standard)
Section 01. ÀÎÅÍ³Ý È¯°æÀÇ º¯È¿Í º¯ÇÏÁö ¾Ê´Â À¥ÀÇ ¸ñÀû
1. À¥ ȯ°æÀÇ º¯È
2. À¥(Web)°ú ¾Û(Apps)ÀÇ Â÷ÀÌÁ¡
1) ¾Û
2) ˴
3) ¸ð¹ÙÀÏ È¯°æ¿¡¼ À¥°ú ¾ÛÀÇ Æ¯Â¡ ºñ±³
3. º¯ÇÏÁö ¾Ê´Â À¥ÀÇ ¸ñÀû
Section 02. ´Ù¾çÇÑ È¯°æ¿¡ ´ëÀÀÇϱâ À§ÇÑ ¼³°è¿Í ±â¼ú
1. Á¤º¸¸¦ ¼³°èÇÏ´Â ¹æ¹ý-HTML
1) XHTML 1.0
2) XHTML 1.0 ±âº» »çÇ×
3) ¡¸head¡¹ ¿µ¿ªÀÇ ¿ä¼Ò
4) ¡¸body¡¹ ¿µ¿ªÀÇ ¿ä¼Ò
5) À¥ Ç¥ÁØÀº ¡¸div¡¹+CSS µðÀÚÀÎ?
2. ȯ°æº° UIÀÇ ±¸¼º-CSS : »ç¿ëÀÚ È¯°æº°·Î ´Ù¸¥ Ç¥Çö ¹æ½Ä
1) CSSÀÇ ±âº»Àû Ư¡
2) CSS ¼±ÅÃÀÚ
3) CSS Combinator-CSS °áÇÕÀÚ
4) Group of Selector-¼±ÅÃÀÚ ±×·ì
5) CSSÀÇ °ª°ú ´ÜÀ§
6) CSS ¼Ó¼º-Box Model°ú °ü·ÃµÈ ¼Ó¼º
7) CSS ¼Ó¼º-Inline Box¿Í °ü·ÃµÈ ¼Ó¼º
8) CSS ¼Ó¼º-º¸ÀÌ´Â À§Ä¡¿Í ÇüÅ¿¡ °ü·ÃµÈ ¼Ó¼º
9) CSS ¼Ó¼º-»ö»ó°ú ¹è°æ¿¡ °ü·ÃµÈ ¼Ó¼º
10) CSS ¼Ó¼º-Font¿Í °ü·ÃµÈ ¼Ó¼º
11) CSS ¼Ó¼º-Text¿Í °ü·ÃµÈ ¼Ó¼º
12) CSS ¼Ó¼º-»ç¿ëÀÚ ÀÎÅÍÆäÀ̽º¿Í °ü·ÃµÈ ¼Ó¼º
13) CSS ¼Ó¼º-Å×ÀÌºí ¿ä¼Ò Àü¿ë ¼Ó¼º
14) CSS ¼Ó¼º-¸®½ºÆ® ¿ä¼Ò Àü¿ë ¼Ó¼º
15) CSS ¼Ó¼º-ÇÁ¸°Æ®¿¡ °ü·ÃµÈ ¼Ó¼º
3. À¥ÀÇ ¾ÖÇø®ÄÉÀ̼ÇÈ-ÀÚ¹Ù½ºÅ©¸³Æ® : »ç¿ëÀÚ ÃøÀÇ µ¿Àû ¿ä¼ÒÀÇ ±¸Çö
1) ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ ¿ªÇÒ
2) Document Object Model(DOM)
3) ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ ±âº» »ç¿ë ¹æ¹ý
4) ÀÚ¹Ù½ºÅ©¸³Æ®·Î ¿ä¼Ò ¼±ÅÃÇϱâ
5) ¼±ÅÃµÈ ¿ä¼Ò¿¡ ÀÚ¹Ù½ºÅ©¸³Æ®·Î ½ºÅ¸ÀÏ ÁöÁ¤Çϱâ
6) ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ ÀÌ¿ëÇÑ ¿ä¼ÒÀÇ Ãß°¡ »èÁ¦
Chapter 02. Â÷¼¼´ë À¥ Ç¥ÁØ(Next Web Standard)
Section 03. À¥ÀÇ ÁøÈ - HTML 5/CSS 3
1. HTML 5-´õ ¸íÈ®ÇÑ Á¤º¸ ±¸Á¶¸¦ À§ÇÑ ÁøÈ
1) HTML 5ÀÇ ¿ä¼Ò ¼º°ÝÀÇ ±¸ºÐ Contents Model
2) HTML 5ÀÇ DOCTYPE
3) HTML 5ÀÇ °øÅë ¼Ó¼º
4) HTML 5ÀÇ ¿ä¼Ò
5) ¼½¼Ç ¿ä¼Òµé°ú ¾Æ¿ô¶óÀÎ ¾Ë°í¸®Áò-¸íÈ®ÇØÁø Á¤º¸ÀÇ ±¸Á¶È
6) ÅؽºÆ® ÀÇ¹Ì ¿ä¼ÒÀÇ °È-ÅؽºÆ® ½Ã¸àƽ ¿ä¼Ò
7) »ç¿ëÀÚÀÇ ÀÔ·ÂÀ» °ËÁõÇÏ°í µµ¿ÍÁÖ´Â ¼½Ä ¿ä¼Ò-Form
8) »õ·Î¿î Á¤º¸ ÇüÅÂ-¡¸video¡¹, ¡¸audio¡¹, ¡¸canvas¡¹, ¡¸svg¡¹
9) SVG-HTML 5·Î ´Ù½Ã ÁÖ¸ñ¹Þ´Â º¤ÅÍ ¹æ½Ä ±×·¡ÇÈ ¿ä¼Ò
2. HTML 5 API-¹®¼¿¡¼ ÀÀ¿ë ÇÁ·Î±×·¥À¸·ÎÀÇ ÁøÈ
1) canvas API
2) Cache Manifest
3) Web Storage
4) geolocation
3. CSS 3-Á¤º¸ ±¸Á¶¸¦ µ¸º¸ÀÌ°Ô Çϴ ǥÇö ¿ä¼Ò
1) ¡¸style¡¹ÀÇ ÀÚü ¼Ó¼º°ú È®Àå Á¢µÎ»ç
2) »ö»ó °ü·Ã ¼Ó¼º
3) border °ü·Ã ¼Ó¼º
4) background °ü·Ã ¼Ó¼º
5) font¿Í text °ü·Ã ¼Ó¼º
6) »ç¿ëÀÚ È¯°æ¿¡ °ü·ÃµÈ ¼Ó¼º
7) ÄÜÅÙÃ÷ ¹èÄ¡¿¡ °üÇÑ ¼Ó¼º
8) ¿ä¼ÒÀÇ ÇüÅ º¯È¿Í ¾Ö´Ï¸ÞÀÌ¼Ç °ü·Ã ¼Ó¼º
Chapter 03. ½ÇÀü ¿¹Á¦(Web & Mobile Web Project)
Section 04. HTML 5¿Í CSS 3¸¦ ÀÌ¿ëÇÑ À¥ »çÀÌÆ® Á¦ÀÛ
1. À¥ »çÀÌÆ® ±¸Ãà Áغñ
1) ÆÀ À¥ »çÀÌÆ®¸¦ À§ÇÑ Ãʱ⠱âȹȸÀÇ
2) °øÅë ºÎºÐÀÇ ÀÛ¼º
2. ÆäÀÌÁöº° ±¸¼º
1) ¸ÞÀÎ ÆäÀÌÁö
2) Àλ縻 ÆäÀÌÁö
3) ±¸¼º¿ø ¼Ò°³ ÆäÀÌÁö
4) Á¦ÀÛ ¹æ½Ä ÆäÀÌÁö
5) ´º½º ¸®½ºÆ® ÆäÀÌÁö
6) Color ÆäÀÌÁö
7) Contact ÆäÀÌÁö
Section 05. ¸ð¹ÙÀÏ À¥ »çÀÌÆ® Á¦ÀÛ
1. ¸ð¹ÙÀÏ À¥ »çÀÌÆ® ÀÛ¼º ½Ã °í·ÁÇÒ Á¡
1) W3C Mobile Web Best Practice
2) Mobile Web 2.0 ForumÀÇ moblie ok
3) ¸ð¹ÙÀÏ À¥ÀÇ Çö½ÇÀûÀÎ °í·Á
2. ¸ð¹ÙÀÏ ´ëÀÀ ¹æ¾ÈÀÇ ¼±Á¤
1) ´ëÀÀÇÏÁö ¾Ê±â
2) µ¥ÀÌÅÍ ·¹º§¿¡¼ÀÇ ºÐ¸®
3) ±¸Á¶ ·¹º§¿¡¼ÀÇ ºÐ¸®
4) Ç¥Çö ·¹º§¿¡¼ÀÇ ºÐ¸®
3. coForward »çÀÌÆ® ¸ð¹ÙÀÏ ´ëÀÀ ±âȹ
1) ´ëÀÀ ¹æ¾ÈÀÇ ¼±Á¤
2) ÄÜÅÙÃ÷ÀÇ Á¡°Ë
3) µðÀÚÀÎ ¹æ¾È
4. ¸ð¹ÙÀÏ ´ëÀÀ »çÀÌÆ® ±¸¼º
1) ȯ°æÀÇ ±¸¼º
2) ¸ð¹ÙÀÏ È¯°æÀÇ Æ¯Â¡°ú ±¸¼º
3) ¸ð¹ÙÀÏ¿ë CSSÀÇ Àû¿ë°ú Ãß°¡ÀûÀÎ ÀÛ¾÷
HTML 4/HTML 5 ÅÂ±× ºñ±³Ç¥
ã¾Æº¸±â |
|
|
|
ÀúÀÚ
|
|
³ªÀÎȯ
coForward ³» ¿ªÇÒ : ±âȹ/¼³°è/PM E-mail : na93008@msn.com Blog : ¿©ÀüÈ÷ ¾Æ¹«°Íµµ ¾ø´Â Na!ÀÇ Blog(http://na93008.openhaja.com/blog) ETC : PMP(Project Management Professional)
|
|
|
±èÀº¿µ
coForward ³» ¿ªÇÒ : ½Ã°¢ ¼³°è/½Ã°¢ µðÀÚÀÎ/HTML CSS ±¸¼º E-mail : dms7139@naver.com
|
UI/UX µðÀÚÀÎÀ» À§ÇÑ ÀεðÀÚÀÎ ½Ç¹« | ±èÀº¿µ | 21¼¼±â»ç
HTML5 & CSS3 : UIµðÀÚÀκÎÅÍ EPUBÄÚµù±îÁö | ±èÀº¿µ | µµ¼ÃâÆÇ È«¸ª(È«¸ª°úÇÐÃâÆÇ»ç)
|
|
±èÁø¾Æ
coForward ³» ¿ªÇÒ : ½Ã°¢ ¼³°è/½Ã°¢ µðÀÚÀÎ/HTML CSS ±¸¼º E-mail : child_a@naver.com
|
|
|
³ªÀÎȯ
coForward ¼Ò¼Ó. coForward´Â ¼·Î°¡ ¼ÒÅëÀ» ÇÏ¿© ÇÔ²² ¹ßÀüÇØ ³ª°¡´Â À¥ ÀúÀÛÆÀÀÔ´Ï´Ù. coForward ³» ¿ªÇÒ: ±âȹ, ¼³°è, PM.
|
|
|
±èÀº¿µ, ±èÁø¾Æ
|
|
|
|
|
|
|
|
Ãâ°í¾È³» |
|
|
Ãâ°í¶õ ÀÎÅÍÆÄÅ© ¹°·ùâ°í¿¡¼ µµ¼°¡ Æ÷ÀåµÇ¾î ³ª°¡´Â ½ÃÁ¡À» ¸»Çϸç, ½ÇÁ¦ °í°´´Ô²²¼ ¼ö·ÉÇϽô ½Ã°£Àº »óÇ°Áغñ¿Ï·áÇØ Ãâ°íÇÑ ³¯Â¥ + Åùè»ç ¹è¼ÛÀÏÀÔ´Ï´Ù. |
|
ÀÎÅÍÆÄÅ© µµ¼´Â ¸ðµç »óÇ°ÀÇ Àç°í°¡ ÃæÁ·ÇÒ ½Ã¿¡ ÀÏ°ý Ãâ°í¸¦ ÇÕ´Ï´Ù. |
|
ÀϺΠÀç°í¿¡ ´ëÇÑ Ãâ°í°¡ ÇÊ¿äÇÒ ½Ã¿¡´Â ´ã´çÀÚ¿¡°Ô Á÷Á¢ ¿¬¶ôÇϽðųª, °í°´¼¾ÅÍ(°í°´¼¾ÅÍ(1577-2555)·Î ¿¬¶ôÁֽñ⠹ٶø´Ï´Ù. |
|
¹è¼Ûºñ ¾È³» |
|
|
ÀÎÅÍÆÄÅ© µµ¼ ´ë·®±¸¸Å´Â ¹è¼Û·á°¡ ¹«·áÀÔ´Ï´Ù. |
|
´Ü, 1°³ÀÇ »óÇ°À» ´Ù¼öÀÇ ¹è¼ÛÁö·Î ÀÏ°ý ¹ß¼Û½Ã¿¡´Â 1°³ÀÇ ¹è¼ÛÁö´ç 2,000¿øÀÇ ¹è¼Ûºñ°¡ ºÎ°úµË´Ï´Ù. |
¾Ë¾ÆµÎ¼¼¿ä! |
|
|
°í°´´Ô²²¼ ÁÖ¹®ÇϽŠµµ¼¶óµµ µµ¸Å»ó ¹× ÃâÆÇ»ç »çÁ¤¿¡ µû¶ó Ç°Àý/ÀýÆÇ µîÀÇ »çÀ¯·Î Ãë¼ÒµÉ ¼ö ÀÖ½À´Ï´Ù. |
|
Åùè»ç ¹è¼ÛÀÏÀÎ ¼¿ï ¹× ¼öµµ±ÇÀº 1~2ÀÏ, Áö¹æÀº 2~3ÀÏ, µµ¼, »ê°£, ±ººÎ´ë´Â 3ÀÏ ÀÌ»óÀÇ ½Ã°£ÀÌ ¼Ò¿äµË´Ï´Ù.
(´Ü, Åä/ÀÏ¿äÀÏ Á¦¿Ü) |
|
|
|
|
ÀÎÅÍÆÄÅ©µµ¼´Â °í°´´ÔÀÇ ´Ü¼ø º¯½É¿¡ ÀÇÇÑ ±³È¯°ú ¹ÝÇ°¿¡ µå´Â ºñ¿ëÀº °í°´´ÔÀÌ ÁöºÒÄÉ µË´Ï´Ù.
´Ü, »óÇ°À̳ª ¼ºñ½º ÀÚüÀÇ ÇÏÀÚ·Î ÀÎÇÑ ±³È¯ ¹× ¹ÝÇ°Àº ¹«·á·Î ¹ÝÇ° µË´Ï´Ù.
±³È¯/¹ÝÇ°/º¸ÁõÁ¶°Ç ¹× Ç°Áúº¸Áõ ±âÁØÀº ¼ÒºñÀڱ⺻¹ý¿¡ µû¸¥ ¼ÒºñÀÚ ºÐÀï ÇØ°á ±âÁØ¿¡ µû¶ó ÇÇÇظ¦ º¸»ó ¹ÞÀ» ¼ö ÀÖ½À´Ï´Ù.
Á¤È®ÇÑ È¯ºÒ ¹æ¹ý ¹× ȯºÒÀÌ Áö¿¬µÉ °æ¿ì 1:1¹®ÀÇ °Ô½ÃÆÇ ¶Ç´Â °í°´¼¾ÅÍ(1577-2555)·Î ¿¬¶ô Áֽñ⠹ٶø´Ï´Ù.
¼ÒºñÀÚ ÇÇÇغ¸»óÀÇ ºÐÀïó¸® µî¿¡ °üÇÑ »çÇ×Àº ¼ÒºñÀÚºÐÀïÇØ°á±âÁØ(°øÁ¤°Å·¡À§¿øȸ °í½Ã)¿¡ µû¶ó ºñÇØ º¸»ó ¹ÞÀ» ¼ö ÀÖ½À´Ï´Ù.
|
±³È¯ ¹× ¹ÝÇ°ÀÌ °¡´ÉÇÑ °æ¿ì |
|
|
»óÇ°À» °ø±Þ ¹ÞÀ¸½Å ³¯·ÎºÎÅÍ 7ÀÏÀ̳» °¡´ÉÇÕ´Ï´Ù. |
|
°ø±Þ¹ÞÀ¸½Å »óÇ°ÀÇ ³»¿ëÀÌ Ç¥½Ã, ±¤°í ³»¿ë°ú ´Ù¸£°Å³ª ´Ù¸£°Ô ÀÌÇàµÈ °æ¿ì¿¡´Â °ø±Þ¹ÞÀº ³¯·ÎºÎÅÍ 3°³¿ùÀ̳», ±×»ç½ÇÀ» ¾Ë°Ô µÈ ³¯ ¶Ç´Â ¾Ë ¼ö ÀÖ¾ú´ø ³¯·ÎºÎÅÍ 30ÀÏÀ̳» °¡´ÉÇÕ´Ï´Ù. |
|
»óÇ°¿¡ ¾Æ¹«·± ÇÏÀÚ°¡ ¾ø´Â °æ¿ì ¼ÒºñÀÚÀÇ °í°´º¯½É¿¡ ÀÇÇÑ ±³È¯Àº »óÇ°ÀÇ Æ÷Àå»óÅ µîÀÌ ÀüÇô ¼Õ»óµÇÁö ¾ÊÀº °æ¿ì¿¡ ÇÑÇÏ¿© °¡´ÉÇÕ´Ï´Ù.
|
|
|
|
±³È¯ ¹× ¹ÝÇ°ÀÌ ºÒ°¡´ÉÇÑ °æ¿ì |
|
|
|
°í°´´ÔÀÇ Ã¥ÀÓ ÀÖ´Â »çÀ¯·Î »óÇ° µîÀÌ ¸ê½Ç ¶Ç´Â ÈÑ¼ÕµÈ °æ¿ì´Â ºÒ°¡´ÉÇÕ´Ï´Ù. (´Ü, »óÇ°ÀÇ ³»¿ëÀ» È®ÀÎÇϱâ À§ÇÏ¿© Æ÷Àå µîÀ» ÈѼÕÇÑ °æ¿ì´Â Á¦¿Ü) |
|
½Ã°£ÀÌ Áö³²¿¡ µû¶ó ÀçÆǸŰ¡ °ï¶õÇÒ Á¤µµ·Î ¹°Ç°ÀÇ °¡Ä¡°¡ ¶³¾îÁø °æ¿ì´Â ºÒ°¡´ÉÇÕ´Ï´Ù. |
|
Æ÷Àå °³ºÀµÇ¾î »óÇ° °¡Ä¡°¡ ÈÑ¼ÕµÈ °æ¿ì´Â ºÒ°¡´ÉÇÕ´Ï´Ù. |
|
|
´Ù¹è¼ÛÁöÀÇ °æ¿ì ¹ÝÇ° ȯºÒ |
|
|
|
´Ù¹è¼ÛÁöÀÇ °æ¿ì ´Ù¸¥ Áö¿ªÀÇ ¹ÝÇ°À» µ¿½Ã¿¡ ÁøÇàÇÒ ¼ö ¾ø½À´Ï´Ù. |
|
1°³ Áö¿ªÀÇ ¹ÝÇ°ÀÌ ¿Ï·áµÈ ÈÄ ´Ù¸¥ Áö¿ª ¹ÝÇ°À» ÁøÇàÇÒ ¼ö ÀÖÀ¸¹Ç·Î, ÀÌÁ¡ ¾çÇØÇØ Áֽñ⠹ٶø´Ï´Ù. |
|
|
|
|
|
|