| ºÎ·Ï B. CSS1À¸·ÎºÎÅÍÀÇ º¯È | |
ÀÌ ºÎ·ÏÀº Áö¸íÀûÀÌ ¾Æ´Ï°í Á¤º¸Á¦°øÀ» À§ÇÑ °ÍÀÌ´Ù.
CSS2´Â CSS1 À§¿¡ ¸¸µé¾ú°í ¸ðµç À¯È¿ÇÑ CSS1 ½ºÅ¸ÀϽ¬Æ®µéÀº CSS2 ½ºÅ¸ÀϽ¬Æ®µé¿¡¼µµ À¯È¿ÇÏ´Ù.
¹ø¿ª¹® CSS1 ±Ô°Ý¿¡¼ ºÎÅÍ ÀÌ ±Ô°ÝÀ¸·ÎÀÇ º¯°æµéÀº »õ·Î¿î ±â´É, CSS1 ±â´É¼ºÀÇ ¾÷µ¥ÀÌÆ®, CSS1À¸·Î ºÎÅÍÀÇ º¯°æµé, ¼¼°³ÀÇ ±×·ìµé·Î ¹¾ú´Ù.
CSS1 ±â´É¼º¿¡ Ãß°¡ÇÏ¿© CSS2 Áö¿øµéÀº:
- ¸Þµð¾Æ(media) ŸÀÔµéÀÇ °³³ä.
- ¸ðµç ¼Ó¼ºµé¿¡¼ Àü´Þ('inherit') °ª.
- ÆäÀÌÁöÈµÈ ¸Þµð¾Æ(paged media)
- ¼Ò¸®(aural) ½ºÅ¸ÀϽ¬Æ®
- ¸ñ·Ï ¹øÈ£ºÙÀ̱⠽ºÅ¸ÀÏ, ¾ç¹æÇâ ÅؽºÆ® Áö¿ø, ¾ð¾î¿¡ ¿¹¹ÎÇÑ µû¿ÈÇ¥ÀÇ Áö¿ø µîÀ» Æ÷ÇÔÇÑ, ¿©·¯ ±¹Á¦È ±â´Éµé.
- Áö´ÉÀû ÀÏÄ¡(matching), ÇÕ¼º(synthesis), ±Û²Ã ´Ù¿î·Îµå¸¦ Æ÷ÇÔÇÑ È®ÀåµÈ ±Û²ÃÀÇ ¼±Åà ±â´É.
¶ÇÇÑ, ½Ã½ºÅÛ ±Û²Ã(system font) °³³äÀÇ ¼Ò°³¿Í »õ·Î¿î ¼Ó¼ºÀÎ 'font-size-adjust'°¡ Ãß°¡µÇ¾ú´Ù.
- 'display'¿Í 'vertical-align'¿¡ »õ·Î¿î °ªµéÀ» Æ÷ÇÔÇÑ Å×À̺í.
- °íÁ¤µÈ À§Ä¡ Àâ±â(fixed positioning)¸¦ Æ÷ÇÔÇÑ »ó´ëÀ§Ä¡¿Í Àý´ëÀ§Ä¡.
- »õ·Î¿î ¹Ú½º ŸÀÔµé(ºí·°°ú ÀζóÀÎÀ» µû¶ó): Ä¡¹Ð(compact)°ú ¼±Çà(run-in).
- º¸ÀÌ´Â ¾ç½ÄÈ ¸ðµ¨¿¡¼ ³ÑóÈ帧(overflow), À߸²(clipping), º¸ÀÓ¼º(visibility) ³»¿ë Á¦¾î ´É·Â.
- º¸ÀÌ´Â ¾ç½ÄÈ ¸ðµ¨¿¡¼ ÃÖ¼Ò, ÃÖ´ë ³Êºñ¿Í ³ôÀ̸¦ ÁöÁ¤ÇÒ ¼ö ÀÖ´Â ´É·Â.
- ÀÚ½Ä ¼±ÅÃÀÚ, ÀÎÁ¢(adjacent) ¼±ÅÃÀÚ, ¾ÖÆ®¸®ºäÆ® ¼±ÅÃÀÚ¸¦ Æ÷ÇÔÇÑ È®ÀåµÈ ¼±ÅÃÀÚ(selector) ±â´É.
- »ý¼ºµÈ ³»¿ë, Ä«¿îÅÍ(counter), ÀÚµ¿ ¹øÈ£ºÙÀ̱â(numbering)¿Í Ç¥½ÃÀÚ(marker).
- »õ·Î¿î 'text-shadow' ¼Ó¼ºÀ» ÅëÇÑ ÅؽºÆ® ±×¸²ÀÚ.
- ¿©·¯ »õ·Î¿î °¡»óŬ¶ó½º(pseudo-class), :first-child, :hover, :focus, :lang.
- »ç½ºÅÛ »ö»ó°ú ±Û²Ã.
- Ä¿¼(cursor).
- ź·ÂÀû ¾Æ¿ìÆ®¶óÀÎ(dynamic outline).
CSS1 ±Ô°ÝÀº ª°í ¿ä¾àÀûÀ̾ú´Ù.
ÀÌ ±Ô°ÝÀº ´ë´ÜÈ÷ ¸¹Àº º¼·ýÀ» °®°í ÀÐÀ» °ÍÀÌ ¸¹´Ù.
¸¹Àº Ãß°¡Àû ³»¿ëÀÌ »õ·Î¿î ±â´ÉµéÀÌ ¼³¸íµÇ³ª, CSS1ÀÇ ±â´É ¶ÇÇÑ È®ÀåµÇ¾ú´Ù.
¾Æ·¡ ¼³¸íÇÑ »õ·Î¿î °æ¿ì¸¦ Á¦¿ÜÇÏ°í´Â ´Ù½Ã ¾²¿©Áø ¼³¸íµéÀº ¹®¹ýÀ̳ª ¾îÀÇ»óÀÇ º¯È¸¦ Ç¥½ÃÇÏÁö ¾Ê¾Ò´Ù.
¸ðµç CSS1 ½ºÅ¸ÀϽ¬Æ®µéÀÌ À¯È¿ÇÑ CSS2 ½ºÅ¸ÀϽ¬Æ®µéÀ̾î¼, ¾ÆÁÖ ¼Ò¼öÀÇ CSS1 ½ºÅ¸ÀϽ¬Æ® ¸¸ÀÌ CSS2 ½ºÅ¸ÀϽ¬Æ®·Î Çؼ®µÉ ¶§ ´Ù¸¥ Àǹ̸¦ °®´Â´Ù.
´ëºÎºÐ º¯°æµéÀº Çǵå¹éÀ» ÅëÇÑ °æÇèÀÌ ÀÌ ±Ô°Ý¿¡ Àû¿ëµÇ¾ú°í ÀϺΠ¿À·ùµéµµ ¼öÁ¤µÇ¾ú´Ù.
- "!important"ÀÇ Àǹ̴ º¯°æµÇ¾ú´Ù.
CSS1¿¡¼, Á¦ÀÛÀÚÀÇ ½ºÅ¸ÀϽ¬Æ®ÀÇ "!important"´Â »ç¿ëÀÚ ½ºÅ¸ÀϽ¬Æ®ÀÇ °Í¿¡ ¿ì¼± Àû¿ëµÇ¾ú¾ú´Ù.
ÀÌ´Â CSS2¿¡¼ ¼öÁ¤µÇ¾ú´Ù.
- CSS1¿¡¼´Â sRGB ¹üÀ§¿¡¼ ±×·¸Áö ¾Ê¾ÒÀ¸³ª, CSS2¿¡¼ »ö»ó(color) °ªµéÀº ÀåÄ¡ ¹üÀ§¸¦ °í·ÁÇÏ¿© Àß·ÁÁø´Ù.
- CSS1¿¡¼ 'margin-left'¿Í 'width' µÑ ´Ù ¼³Á¤µÇ¾úÀ¸¸é, ´Ü¼øÈ÷ ¾º¾îÁø 'margin-right'´Â ¹«½ÃµÇ¾ú¾ú´Ù.
CSS2¿¡¼´Â ¾²´Â ¹æÇâ¿¡ µû¶ó 'margin-right' ¶Ç´Â 'margin-left' Áß¿¡¼ ¼±ÅÃÇÑ´Ù.
- CSS1¿¡¼, ¿©·¯ ¼Ó¼ºµé(¿¹: 'padding')Àº ¸ðü ¿¤·¹¸àÆ®ÀÇ ³Êºñ¸¦ ÂüÁ¶ÇÏ´Â °ªµéÀ» °¡Á³¾ú´Ù.
ÀÌ´Â ¿À·ù¿´´Ù; ±× °ªÀº Ç×»ó ºí·°·¹º§(block-level) ¿¤·¹¸àÆ®ÀÇ ³Êºñ¸¦ ÂüÁ¶ÇØ¾ß µÇ¾ú¾úÀ¸³ª,
ÀÌ ±Ô°ÝÀº "¿ë±âºí·°(containing block)" À̶ó´Â ¿ë¾î¸¦ ¼Ò°³ ÇÔÀ¸·Î¼ ¹Ý¿µÇÏ¿´´Ù.
- CSS2¿¡¼ 'display'ÀÇ ÃÖÃÊ°ªÀº 'inline'À¸·Î CSS1¿¡¼ 'block'°ú´Â ´Ù¸£´Ù.
- CSS1¿¡¼, 'clear' ¼Ó¼ºÀº ¸ðµç ¿¤·¹¸àÆ®µé¿¡ Àû¿ëµÇ¾ú¾ú´Âµ¥ ÀÌ°ÍÀº ¿À·ù¿´¾ú´Ù.
CSS2¿¡¼´Â ÀÌ ¼Ó¼ºÀÌ ºí·°·¹º§ ¿¤·¹¸àÆ®µé¿¡ ¸¸ Àû¿ëµÈ´Ù.
- CSS1¿¡¼, ':link', ':visited'¿Í ':active'µéÀº »óÈ£ ¹èŸÀûÀ̾úÀ¸³ª, CSS2¿¡¼´Â ':active'°¡ ':link' ¶Ç´Â ':visited'¿Í ÇÔ²² ³ª¿Ã ¼ö°¡ ÀÖ´Ù.
- ±Û²Ã Å©Áö Å×ÀÌºí¿¡¼ ÀÎÁ¢ 'font-size' À妽ºµé»çÀÌÀÇ Á¦¾ÈµÈ È®´ë ¹èÀ²(scaling factor)Àº 1.5¿¡¼ 1.2·Î °¨¼ÒµÇ¾ú´Ù.
- 'font-size'ÀÇ ½ÇÁ¦°ªÀÌ ¾Æ´Ï¶ó, °è»êµÈ °ªÀÌ Àü´Þ(inherit)µÈ´Ù.
- CSS1¿¡¼, ºÒ·¿(bullet)ÀÇ À§Ä¡°¡ ¾Æ´Ï¶ó ÅؽºÆ®ÀÇ ¿ÞÂÊ ¸¶ÁøÀÌ ¿µÇâÀ» ¹Þµµ·Ï Çؼ®µÇµµ·Ï, 'list-style-position'¿¡¼'inside'°¡ Çã¿ëµÇ¾ú¾ú´Ù.
CSS2¿¡¼ ÀÌ Çؼ®Àº Á¤¸®µÇ¾ú´Ù.
- Áö¸íÀû CSS1¿Í CSS2ÀÇ ÅäÅ«È(tokenizer) Â÷ÀÌ Ç׸ñµµ ÂüÁ¶Ç϶ó.
¸ÇÀ§ÀÌ ¹®¼()´Â ÀÚÀ¯·ÎÀÌ ¿¬°á »ç¿ëÀÌ °¡´ÉÇÔ.
(¼öÁ¤ÀÏ )