¡ºCSS3: ¼¼»ó¿¡ ¾ø´ø °¡Àå ²Ä²ÄÇÑ ¸Å´º¾ó¡»Àº CSS ¿ÏÀü Á¤º¹À¸·Î °¡´Â ±æÀ» ¾È³»ÇÑ´Ù. CSS3¿¡ ¸Â´Â HTML ¹®¼ ÀÛ¼º¹ýÀ» ¹è¿ì°í, »õ·Î¿î HTML5 ű׵éÀ» ÇнÀÇÏ´Â °ÍºÎÅÍ ÀμâÇØµµ ¸ÚÁø À¥ ÆäÀÌÁö¸¦ ¸¸µå´Â ¹æ¹ý, È¿À²°ú È¿°ú¸¦ ³ôÀÏ ¼ö ÀÖ´Â CSS »ç¿ë ±â¹ý±îÁö ÀÚ¼¼ÇÏ°Ô ´Ù·é´Ù.
1ºÎ CSS±âÃÊ
_1Àå CSS¸¦ °í·ÁÇÑ HTML
__1.1 HTML: °ú°Å¿Í ÇöÀç
__1.2 CSS¸¦ °í·ÁÇÑ HTML ÀÛ¼º¹ý
__1.3 DoctypeÀÇ Á߿伺
__1.4 ÀÎÅÍ³Ý ÀͽºÇ÷η¯ ¾÷µ¥ÀÌÆ®¸¦ ÀØÁö ¸»ÀÚ
_2Àå ½ºÅ¸Àϰú ½ºÅ¸ÀÏ½ÃÆ® ¸¸µé±â
__2.1 ½ºÅ¸ÀÏ ÇØºÎ
__2.2 ½ºÅ¸ÀÏ½ÃÆ® ÀÌÇØ
__2.3 ³»ºÎ ½ºÅ¸ÀÏ½ÃÆ®
__2.4 ¿ÜºÎ ½ºÅ¸ÀÏ½ÃÆ®
__2.5 ÀÚ½À¼: ù CSS ½ºÅ¸ÀÏ
_3Àå ¼±ÅÃÀÚ: ½ºÅ¸ÀÏÀ» ºÎ¿©ÇÒ ¿ä¼ÒÀÇ ½Äº°
__3.1 ÅÂ±× ¼±ÅÃÀÚ: ÆäÀÌÁö ´ÜÀ§ ½ºÅ¸Àϸµ
__3.2 Ŭ·¡½º ¼±ÅÃÀÚ: Á¤¹Ð Á¶ÁØ
__3.3 ID ¼±ÅÃÀÚ: ƯÁ¤ÇÑ ÆäÀÌÁö ¿ä¼Ò ÁöÁ¤
__3.4 ¿©·¯ ű׿¡ ÇÑ ¹ø¿¡ ½ºÅ¸ÀÏ ÁÖ±â
__3.5 ÅÂ±× ¾È ű׿¡ ½ºÅ¸ÀÏ ÁöÁ¤Çϱâ
__3.6 °¡»ó Ŭ·¡½º(pseudo-class)¿Í °¡»ó ¿ä¼Ò(pseudo-element)
__3.7 ¼Ó¼º ¼±ÅÃÀÚ(attribute selector)
__3.8 ÀÚ½Ä ¼±ÅÃÀÚ(child selector)
__3.9 ÇüÁ¦(sibling) °ü°è
__3.10 :not() ¼±ÅÃÀÚ
__3.11 ÀÚ½À¼: ¼±ÅÃÀÚ °ßº»À» ÅëÇÑ ½Ç½À
_4Àå ½ºÅ¸ÀÏ °è½ÂÀ» ÅëÇÑ ½Ã°£ Àý¾à
__4.1 °è½ÂÀ̶õ ¹«¾ùÀΰ¡
__4.2 °è½ÂÀÌ ¾î¶»°Ô ½ºÅ¸ÀÏ½ÃÆ®¸¦ ³¯·ÆÇÏ°Ô ¹Ù²Ù´Â°¡
__4.3 °è½ÂÀÇ ÇѰè
__4.4 ÀÚ½À¼: °è½Â
_5Àå ÇÏÇâ¹ýÄ¢(cascade):¿©·¯ ½ºÅ¸ÀÏÀ» °ü¸®ÇÏ´Â ±ÔÄ¢
__5.1 ÇÏÇâ¹ýÄ¢Àº ¾î¶»°Ô ½ºÅ¸ÀÏ¿¡ Àû¿ëµÇ´Â°¡
__5.2 ƯÀ̵µ(specificity): ¾î¶² ½ºÅ¸ÀÏÀÌ À̱⳪
__5.3 ÇÏÇâ¹ýÄ¢ Á¦¾î
__5.4 ÀÚ½À¼: ÇÏÇâ¹ýÄ¢ÀÇ È°¿ë
2ºÎ CSSÀÀ¿ë
_6Àå ÅØ½ºÆ®ÀÇ ¼½Ä
__6.1 ¼Ã¼(font)ÀÇ »ç¿ë
__6.2 À¥ ¼Ã¼ÀÇ »ç¿ë
__6.3 GoogleÀÇ À¥ ¼Ã¼
__6.4 ÅØ½ºÆ®ÀÇ »ö»ó ÁöÁ¤
__6.5 ¼Ã¼ Å©±â º¯°æ
__6.6 ´Ü¾î¿Í ±ÛÀÚÀÇ ¼½Ä
__6.7 ±×¸²ÀÚ È¿°ú
__6.8 Àüü ´Ü¶ô¿¡ ´ëÇÑ ¼½Ä ÁöÁ¤
__6.9 ¸ñ·Ï ½ºÅ¸ÀÏ
__6.10 ÀÚ½À¼: ÅØ½ºÆ® ¼½Ä ÁöÁ¤
_7Àå ¹Ù±ù ¿©¹é, ¾È ¿©¹é ±×¸®°í °æ°è¼±
__7.1 »óÀÚ ¸ðµ¨ÀÇ ÀÌÇØ
__7.2 ¹Ù±ù ¿©¹é°ú ¾È ¿©¹éÀ» ÅëÇÑ °ø°£ Á¶Á¤
__7.3 °æ°è¼±(border) Ãß°¡
__7.4 ¹è°æ»ö ÁöÁ¤
__7.5 ¿øÇü ¸ð¼¸®(rounded corner) ¸¸µé±â
__7.6 ±×¸²ÀÚ È¿°ú Ãß°¡
__7.7 ³ôÀÌ¿Í ÆøÀÇ °áÁ¤
__7.8 ºÎÀ¯ ¿ä¼Ò(floating content)·Î ³»¿ë °¨½Î±â
__7.9 ÀÚ½À¼: ¿©¹é, ¹è°æ, ±×¸®°í °æ°è¼±
_8Àå À¥ ÆäÀÌÁö¿Í ±×·¡ÇÈ
__8.1 CSS¿Í
![]()
ű×
__8.2 ¹è°æ À̹ÌÁö Ãß°¡
__8.3 À̹ÌÁö ¹Ýº¹ ¿©ºÎ Á¦¾î
__8.4 ¹è°æ À̹ÌÁö À§Ä¡ ÁöÁ¤
__8.5 ¹è°æ °ü·Ã ´ÜÃà ¼Ó¼º
__8.6 ¿©·¯ °³ÀÇ ¹è°æ À̹ÌÁö µ¿½Ã »ç¿ë
__8.7 ±×¶óµð¾ðÆ®(gradient) ¹è°æ
__8.8 Colorzilla¸¦ Ȱ¿ëÇÑ ¼Õ½¬¿î ±×¶óµð¾ðÆ® »ý¼º¹ý
__8.9 ÀÚ½À¼: À̹ÌÁö¸¦ ´õ ¸ÚÁö°Ô »ç¿ëÇÏ´Â ¹æ¹ý
__8.10 ÀÚ½À¼: »çÁø °¶·¯¸® ¸¸µé±â
__8.11 ÀÚ½À¼: ¹è°æ À̹ÌÁöÀÇ »ç¿ë
_9Àå ±ò²ûÇÑ »çÀÌÆ® Ž»ö ȯ°æ ¸¸µé±â
__9.1 ½ºÅ¸ÀÏÀ» Àû¿ëÇÒ ¸µÅ©ÀÇ ¼±Á¤
__9.2 ¸µÅ©¿Í ½ºÅ¸ÀÏ
__9.3 ³»ºñ°ÔÀÌ¼Ç ¹Ù ¸¸µé±â
__9.4 ·Ñ¿À¹ö À̹ÌÁö¸¦ ¹Ì¸® ·ÎµåÇÏ´Â CSS ±â¹Ý ±â¹ý
__9.5 ƯÁ¤ÇÑ À¯ÇüÀÇ ¸µÅ©¿¡ ´ëÇÑ ½ºÅ¸ÀÏ ¸¸µé±â
__9.6 ÀÚ½À¼: ¸µÅ©¿¡ ´ëÇÑ ½ºÅ¸ÀÏ ¸¸µé±â
__9.7 ÀÚ½À¼: ³»ºñ°ÔÀÌ¼Ç ¹Ù ¸¸µé±â
_10Àå CSS º¯È¯, ÀüÀÌ ±×¸®°í ¾Ö´Ï¸ÞÀ̼Ç
__10.1 º¯È¯(transform)
__10.2 ÀüÀÌ(transition)
__10.3 ¾Ö´Ï¸ÞÀ̼Ç
__10.4 ÀÚ½À¼
_11Àå Å×ÀÌºí ¹× ¾ç½Ä ½ºÅ¸ÀÏ
__11.1 Å×À̺íÀ» ¿Ã¹Ù¸£°Ô »ç¿ëÇÏ´Â ¹æ¹ý
__11.2 Å×À̺í°ú ½ºÅ¸ÀÏ
__11.3 ¾ç½Ä ½ºÅ¸ÀÏ
__11.4 ÀÚ½À¼: Å×ÀÌºí ½ºÅ¸ÀÏ
__11.5 ÀÚ½À¼: ¾ç½Ä ½ºÅ¸ÀÏ
3ºÎ CSS ÆäÀÌÁö ·¹À̾ƿô
_12Àå CSS ·¹À̾ƿôÀ̶õ
__12.1 À¥ ÆäÀÌÁö ·¹À̾ƿôÀÇ Á¾·ù
__12.2 CSS ·¹À̾ƿôÀÇ µ¿ÀÛ ¿ø¸®
__12.3 ·¹À̾ƿô Àü·«
_13Àå float ±â¹Ý ·¹À̾ƿô
__13.1 ·¹À̾ƿô¿¡ float Àû¿ëÇϱâ
__13.2 float °ü·Ã ¹®Á¦ÀÇ ÇØ°á¹ý
__13.3 ÀÚ½À¼: ´Ù´Ü ·¹À̾ƿô
_14Àå ¹ÝÀÀÀû À¥ µðÀÚÀÎ
__14.1 ¹ÝÀÀÀû À¥ µðÀÚÀÎÀÇ ±âÃÊ
__14.2 RWD¿¡ »ç¿ëÇÒ À¥ ÆäÀÌÁö Áغñ
__14.3 ¹Ìµð¾î ÁúÀÇ
__14.4 À¯¿¬ÇÑ °ÝÀÚ
__14.5 À¯µ¿Àû À̹ÌÁö
__14.6 ¹ÝÀÀÀû À¥ µðÀÚÀÎ ÀÚ½À¼
_15Àå À¥ ÆäÀÌÁö ¿ä¼ÒÀÇ À§Ä¡
__15.1 À§Ä¡ÁöÁ¤ ¼Ó¼ºÀº ¾î¶»°Ô µ¿ÀÛÇϳª
__15.2 °·ÂÇÑ À§Ä¡ÁöÁ¤ Àü·«
__15.3 ÀÚ½À¼: ÆäÀÌÁö ¿ä¼ÒÀÇ À§Ä¡ÁöÁ¤
4ºÎ °í±Þ CSS
_16Àå Àμâ¿ë ÆäÀÌÁö¿¡ ¸Â´Â CSS ½ºÅ¸ÀÏ
__16.1 ¹Ìµð¾î ½ºÅ¸ÀÏ½ÃÆ®ÀÇ µ¿ÀÛ ¿ø¸®
__16.2 ¹Ìµð¾î ½ºÅ¸ÀÏ½ÃÆ®ÀÇ Ãß°¡ ¹æ¹ý
__16.3Àμâ¿ë ½ºÅ¸ÀÏ½ÃÆ®ÀÇ Á¤ÀÇ
__16.4 ÀÚ½À¼: Àμâ¿ë ½ºÅ¸ÀÏ½ÃÆ® ÀÛ¼º
_17Àå ³ª»Û ¹ö¸© °íÄ¡±â
__17.1 ÁÖ¼®À» ´Þ¶ó
__17.2 ½ºÅ¸Àϰú ½ºÅ¸ÀÏ½ÃÆ®¸¦ Á¤¸® Á¤µ·Ç϶ó
__17.3 ºê¶ó¿ìÀú ³»Àå ½ºÅ¸ÀÏÀÇ °£¼·Çö»ó ÇØ¼Ò
__17.4 ÇÏÀ§ ¼±ÅÃÀÚÀÇ È°¿ë
__17.5 IE¸¦ À§ÇÑ CSS
5ºÎ ºÎ·Ï 619
_ºÎ·Ï A. CSS ¼Ó¼º Æí¶÷
__A.1 CSSÀÇ °ª
__A.2 ÅØ½ºÆ® ¼Ó¼º
__A.3 ¸ñ·Ï ¼Ó¼º
__A.4 ¾È ¿©¹é, °æ°è¼±, ±×¸®°í ¹Ù±ù ¿©¹é
__A.5 ¹è°æ
__A.6 ÆäÀÌÁö ·¹À̾ƿô
__A.7 ¾Ö´Ï¸ÞÀ̼Ç, º¯È¯ ±×¸®°í ÀüÀÌ¿¡ °ü°èµÈ ¼Ó¼º
__A.8 Å×ÀÌºí ¼Ó¼º
__A.9 ±âŸ ¼Ó¼º
_ºÎ·ÏB CSS Âü°íÀÚ·á
__B.1 Âü°í¼
__B.2 µµ¿òÀÌ ÇÊ¿äÇÏ´Ù¸é
__B.3 CSS ÆÁ, ²Ä¼ö, Á¶¾ð
__B.4 CSS ³»ºñ°ÔÀ̼Ç
__B.5 CSS ·¹À̾ƿô
__B.6 µðÀÚÀÎ Àü½ÃÀå
__B.7 CSS ¼Àû
__B.8 CSS ¼ÒÇÁÆ®¿þ¾î
'CSS3: ¼¼»ó¿¡ ¾ø´ø °¡Àå ²Ä²ÄÇÑ ¸Å´º¾ó'Àº CSS°¡ µîÀåÇßÀ» ¶§ºÎÅÍ Á¸ÀçÇß¾î¾ß ÇÒ ¸Å´º¾ó ¿ªÇÒÀ» Çϴ åÀÌ´Ù. CSS¸¦ °øºÎÇÏ·Á´Â »ç¶÷µéÀº ¾îµð¼ºÎÅÍ ½ÃÀÛÇÏ´Â °ÍÀÌ ÁÁÀºÁö ¸ð¸¦ ¶§°¡ ¸¹´Ù. ¶ÇÇÑ CSS¸¦ ´Ù·ç´Â ¼¼ºÎÀûÀÎ ±â¹ýÀº À¥ Àü¹®°¡¿¡°Ôµµ ¾î·Æ´Ù. °¢ÀÚ°¡ Á÷¸éÇÑ ¹®Á¦¸¦ ÇØ°áÇϱâ À§ÇØ Æ÷ÅÐÀ̳ª »çÀÌÆ®¸¦ °Ë»öÇØ º¸Áö¸¸, ±Ã±ÝÁõÀ» ÇØ°áÇÒ ¼ö ÀÖ´Â ¿Ïº®ÇÑ ´äÀ» ã±â¶õ ½¬¿î ÀÏÀÌ ¾Æ´Ï´Ù.
ÀÌ Ã¥Àº CSS¸¦ ´Ù·ç¸ç °í¹Î¿¡ ºüÁö°í, ºÒÆíÇÔÀ» °Þ¾î ¿Â »ç¶÷µé¿¡°Ô CSS ¿ÏÀü Á¤º¹À¸·Î °¡´Â ±æÀ» ¾È³»ÇÑ´Ù. ¾Æ¸§´Ù¿î À¥ ÆäÀÌÁö¸¦ ¸¸µå´Â ...
´õº¸±â
'CSS3: ¼¼»ó¿¡ ¾ø´ø °¡Àå ²Ä²ÄÇÑ ¸Å´º¾ó'Àº CSS°¡ µîÀåÇßÀ» ¶§ºÎÅÍ Á¸ÀçÇß¾î¾ß ÇÒ ¸Å´º¾ó ¿ªÇÒÀ» Çϴ åÀÌ´Ù. CSS¸¦ °øºÎÇÏ·Á´Â »ç¶÷µéÀº ¾îµð¼ºÎÅÍ ½ÃÀÛÇÏ´Â °ÍÀÌ ÁÁÀºÁö ¸ð¸¦ ¶§°¡ ¸¹´Ù. ¶ÇÇÑ CSS¸¦ ´Ù·ç´Â ¼¼ºÎÀûÀÎ ±â¹ýÀº À¥ Àü¹®°¡¿¡°Ôµµ ¾î·Æ´Ù. °¢ÀÚ°¡ Á÷¸éÇÑ ¹®Á¦¸¦ ÇØ°áÇϱâ À§ÇØ Æ÷ÅÐÀ̳ª »çÀÌÆ®¸¦ °Ë»öÇØ º¸Áö¸¸, ±Ã±ÝÁõÀ» ÇØ°áÇÒ ¼ö ÀÖ´Â ¿Ïº®ÇÑ ´äÀ» ã±â¶õ ½¬¿î ÀÏÀÌ ¾Æ´Ï´Ù.
ÀÌ Ã¥Àº CSS¸¦ ´Ù·ç¸ç °í¹Î¿¡ ºüÁö°í, ºÒÆíÇÔÀ» °Þ¾î ¿Â »ç¶÷µé¿¡°Ô CSS ¿ÏÀü Á¤º¹À¸·Î °¡´Â ±æÀ» ¾È³»ÇÑ´Ù. ¾Æ¸§´Ù¿î À¥ ÆäÀÌÁö¸¦ ¸¸µå´Â ´Ù¾çÇÑ CSS ÆÁ°ú ²Ä¼ö, ±×¸®°í ´Ü°èÀûÀ¸·Î ±¸¼ºµÈ ÀÚ½À¼¸¦ ÅëÇØ ÀÚ½ÅÀÇ ´É·ÂÄ¡¸¦ ÇÑ ´Ü°è »ó½Â½ÃÄÑ º¸ÀÚ.
- ÀÌ Ã¥¿¡¼ ´Ù·ç´Â ³»¿ë
¡¤ 1ºÎ CSS ±âÃÊ : CSS3¿¡ ¸Â´Â HTML ¹®¼ ÀÛ¼º¹ýÀ» ¹è¿ì°í, »õ·Î¿î HTML5 ű׵éÀ» ÇнÀÇÑ´Ù.
¡¤ 2ºÎ CSS ÀÀ¿ë : ÅØ½ºÆ® ¼½ÄÀ» ¸¶¸§ÁúÇÏ´Â ¹æ¹ý, ³»ºñ°ÔÀÌ¼Ç µµ±¸¸¦ ¸¸µå´Â ¹æ¹ý, À̹ÌÁö·Î ´õ ¸ÚÁø ÆäÀÌÁö¸¦ ¸¸µå´Â ¹æ¹ýµéÀ» ¹è¿î´Ù.
¡¤ 3ºÎ CSS ÆäÀÌÁö ·¹À̾ƿô : CSSÀÇ ¿©·¯ °¡Áö Ãø¸é Áß, °¡Àå ÀÌÇØÇϱ⠱î´Ù·Î¿ì¸é¼µµ °¡Àå °·ÂÇÑ ±â´É, Áï ÆäÀÌÁö ³»ÀÇ ¿ä¼Ò(element) À§Ä¡¸¦ Á¶Á¤ÇÏ´Â ¹æ¹ýÀ» ¹è¿î´Ù.
¡¤ 4ºÎ °í±Þ CSS : ÀμâÇØµµ ¸ÚÁø À¥ ÆäÀÌÁö¸¦ ¸¸µå´Â ¹æ¹ý, È¿À²°ú È¿°ú¸¦ ³ôÀÏ ¼ö ÀÖ´Â CSS »ç¿ë ±â¹ýµéÀ» ´Ù·é´Ù.
¡¤ 5ºÎ ºÎ·Ï : º» Àû ¾ø´Â À¯¿ëÇÑ ¼Ó¼ºµéÀ» ºü¸£°Ô ¹è¿ï ¼ö ÀÖ´Â CSS ¼Ó¼º À϶÷°ú CSS¸¦ ´Ù·ç´Âµ¥ À¯¿ëÇÑ ÀڷḦ ¼Ò°³ÇÑ´Ù.
´Ý±â