2. CSS(Cascading Style Sheets language)


  DHTMLÀ» Àß ¹è¿ì·Á¸é °¡Àå ¸ÕÀú CSS¿¡ ´ëÇؼ­ ¹è¿ö¾ß ÇÑ´Ù. Cascading Style Sheets language(CSS)´Â HTML¹®¼­°¡ °¡Áö°í Àִ ǥÇö(Presentation)±â´ÉÀ» ÀÏ¹Ý ÃâÆǹ°ÀÇ ¼öÁرîÁö ²ø¾î¿Ã¸®±â À§ÇÑ º¸´Ù ¼¶¼¼ÇÑ HTML¿ä¼ÒµéÀÇ Á¶Àý±â´ÉÀ» °¡Áö°Ô ÇØÁÖ´Â ±â´ÉÀ̶ó°í ¸»ÇÒ ¼ö ÀÖ´Ù.

  ½ºÅ¸ÀÏ ½ÃÆ®´Â ÀͽºÇ÷η¯ 4.0ÀÌ»ó°ú ³×ºñ°ÔÀÌÅÍ 4.0 À̻󿡼­ Áö¿øÇÏ°í ÀÖ´Ù. Áï, ±ÛÀÚÀÇ Å©±â³ª, ÁÙ°£°Ý, ¹®¼­»ö»ó, ±ÛÀÚÀÇ ¹ÙÅÁ»öµî ±âÁ¸ÀÇ HTML¿¡¼­ Áö¿øÇÏÁö ¸øÇÏ´ø ÀÏÀ» ÇÒ ¼ö ÀְԵǴ °ÍÀÌ´Ù.

  CSSÀÇ »ç¿ëÇÔÀ¸·Î½á ´ÙÀ½°ú °°Àº ÀåÁ¡À» °¡Áú ¼ö ÀÖ´Ù.
  • HTML¹®¼­ÀÇ ¹Ì¼¼ Á¶Á¤ °¡´É

  • HTML¹®¼­ÀÇ ´ÙÀ̳ª¹ÍÇÑ ±â´É Ãß°¡ °¡´É

  • HTML¹®¼­¿Í º°µµÀÇ CSS¸¦ Á¤ÀÇÇÏ¿© Àüü ¹®¼­¿¡ ¼Õ½±°Ô Àû¿ë/º¯°æ°¡´É.

  • Javascript¿Í ¿¬µ¿ÇÏ¿© DynamicÈ¿°ú ±Ø´ëÈ­ °¡´É

2.1 CSS Á¤ÀÇ ¹æ¹ý


  • ÀζóÀÎ ½ºÅ¸ÀÏ ½ÃÆ®(inline style sheet)

      HTML TagÀÚü¿¡ ½ºÅ¸ÀÏÀ» Á÷Á¢ ±â¼úÇÏ´Â ¹æ½ÄÀÌ´Ù. ´ÙÀ½ ¿¹´Â SPANÀ̶ó´Â ű׿¡ Á÷Á¢ StyleÀ» ÁöÁ¤ÇÏ¿© ¹®ÀÚÀÇ Å©±â°¡ 100 Çȼ¿ÀÌ µÇµµ·Ï ÇÑ¿¹ÀÌ´Ù.

    <span style="font-size: 100pt">
    TEST
    </span>
    TEST


      * ±âº»ÀûÀÎ HTML¿¡¼­ Áö¿øÇÏ´Â fontÀÇ Å©±â´Â ÃÖ´ë°ªÀÌ 36ptÀÌ´Ù. À§ÀÇ ¿¹¿¡¼­ ó·³ CSS¸¦ ÀÌ¿ëÇÏ°Ô µÇ¸é ±âÁ¸ÀÇ HTMLÀÇ ±â´ÉÀ» º¸´Ù È®ÀåÇÒ ¼ö ÀÖ°Ô µÇ´Â °ÍÀÌ´Ù.
  • ÀÓº£µðµå ½ºÅ¸ÀÏ ½ÃÆ®(Embeded Style Sheets)

      Á¦ÀÏ ½±°Ô ÀÌÇØÇÏ·Á¸é, JavaScriptÀÇ <SCRIPT></SCRIPT>¿Í ºñ±³ÇÏ´Â ¹æ¹ýÀÌ´Ù. ÇØ´ç ¹®¼­¿¡ CSS¸¦ ÁöÁ¤Çϱâ À§Çؼ­´Â º°µµÀÇ Ãß°¡µÈ ÅÂ±× <STYLE></STYPE>¶ó´Â űװ¡ ÀÖ°í, CSS¹®¹ý¿¡ ¸ÂÃç¼­ STYLE Tag¿¡ ±â¼úÇÏ´Â °ÍÀÌ´Ù.

      ÀÌ TagÀÇ »ç¿ëÀ§Ä¡´Â HEAD¿Í BODY»çÀÌ¿¡ ³Ö´Â´Ù. Ȥ½Ã styleÀ» ÀνÄÇÏÁö ¸øÇÏ´Â ºê¶ó¿ìÁ®¸¦ À§Çؼ­ HTML¿ë ÁÖ¼® <!-- -->À» ³Ö¾î ÁÖ´Â °ÍÀÌ ÁÁ´Ù.

      ´ÙÀ½Àº ÀÓº£µðµåÀÇ ¿¹ÀÌ´Ù. º¸´Â ¹Ù¿Í °°ÀÌ body¶ó´Â HTML TagÀÇ color¿Í backgroud¼Ó¼ºÀ» ÁöÁ¤ÇØÁÖ´Â °ÍÀ» º¼ ¼ö ÀÖ´Ù.

    <style type="text/css">
    body { color: black; background: white; }
    </style>


      * ÀÌ ¿¹¿¡¼­ º¸µíÀÌ ¾î¶² űװ¡ STYLE¾È¿¡ µé¾î°¥ ¼ö ÀÖ°í, ¶Ç, color³ª background¿Í °°Àº ¼Ó¼ºµéÀÌ ¹¹°¡ ÀÖ´ÂÁö, ¾î¶»°Ô ÁöÁ¤ÇÏ´ÂÁö°¡ CSS¸¦ ¹è¿ì´Â Å°°¡ µÉ °ÍÀÌ´Ù.

      ÀÌ·¸°Ô »ç¿ëÇÏ°Ô µÇ¸é BODY¶ó´Â Tag°¡ ±âÁ¸ÀÇ HTML¿¡ Á¸ÀçÇϴµ¥, ÀÌ Æ¯¼ºÀÌ ÇØ´ç ÆäÀÌÁö ³»ºÎ¿¡¼­´Â STYLEű׿¡¼­ ÁöÁ¤ÇÑ µ¥·Î, ¹Ù²î°Ô µÈ´Ù. Áï, ´ÙÀ½°ú °°ÀÌ ÀÛ¼ºÇØ ÁØ´Ù.

    TAG¸íĪ { ¼Ó¼º: °ª ; ... }

    • TAG¸íĪÀº HTML»ç¿ëµÇ´Â ÀϹÝÀûÀÎ TAGµéÀÌ´Ù. Áï, BODY, H1, P, HR, IMG,..

    • ¼Ó¼ºÀº ÀÌ¹Ì Á¤ÇØÁ®ÀÖ´Â ´Ü¾îµéÀÌ Àִµ¥ ÀÌ Á¾·ù´Â µÚ¿¡ ÀÚ¼¼È÷ ±â¼úÇÏ¿´´Ù. ¼Ó¼ºÀº ÀÌ¹Ì Á¤ÇØÁø ´Ü¾îµéÀ̹ǷÎ, ´ë¼Ò¹®ÀÚ´Â ¹°·Ð Áß°£¿¡ µé¾î°¡´Â ÇÏÀÌÇÂ('-')±îÁö Á¤È®È÷ÀÏÄ¡ÇØ¾ß ÇÑ´Ù.

    • °ªÀº ÇØ´ç ¼Ó¼ºÀÇ °ªÀ» ¸»Çϸç, À̶§ ÀϺΠ°ªÀº ´ÜÀ§±îÁö ¸í½ÃÇÏ´Â °æ¿ìµµ ÀÖ´Ù.

    • ¼Ó¼ºµÚ¿¡ ¹Ýµå½Ã ÄÝ·Ð(:)ÀÌ ¿À°í ÇØ´ç °ªÀÌ ¿ÂµÚ¿¡ ¼¼¹ÌÄÝ·Ð(;)À¸·Î Á¾·áÇÑ´Ù.

  • ¿ÜºÎ ½ºÅ¸ÀÏ ½ÃÆ®(External Style Sheet)

      ÀÚ¹Ù½ºÅ©¸³Æ®µµ HTML¹®¼­¾È¿¡ ³ÖÀ» ¼öµµ ÀÖÁö¸¸, ¿ÜºÎ¿¡ Çϳª¸¸ ÀÛ¼ºÇÏ°í À̸¦ ¸ðµç HTML¹®¼­µéÀÌ ºÒ·¯¼­ »ç¿ëÇß´Ù. CSSµµ ÀÌ·¸°Ô »ç¿ëÇÒ ¼ö ÀÖ´Â ±â´ÉÀÌ ÀÖ´Ù.

      È®ÀåÀÚ´Â *.cssÀÌ´Ù. À§¿Í °°Àº ³»¿ëÀ» style.css¶ó°í ÀúÀåÇß´Ù°í Çϸé, ÇöÀçÀÇ ¹®¼­¿¡¼­ ÀÌ StyleÀ» ÀÌ¿ëÇÏ°íÀÚ ÇÒ¶§,

    <LINK REL=stylesheet HREF="style.css" TYPE="text/css">

    ÀÌ·¸°Ô ÀÛ¼ºÇÏ¸é µÈ´Ù. * ÀϺΠWeb ServerÀÇ °æ¿ì´Â MIME typeÀ» Ãß°¡ÇØ ÁÖ¾î¾ß ÇÑ´Ù.

- Last Update : 2001.6.29 by Deadfire(http://www.deadfire.net)

DHTML °­ÁÂ
DHTMLÀ̶õ?
CSS
     - CSSÁ¤Àǹæ¹ý
     - Àû¿ë¿ì¼±¼øÀ§
     - ÅؽºÆ®°ü·Ã¼Ó¼º
     - ÅؽºÆ®°£ÀǼ³Á¤
     - ¿©¹é ÁöÁ¤Çϱâ
     - Å׵θ®ÁöÁ¤Çϱâ
     - »ö»ó ÁöÁ¤Çϱâ
     - ±â Ÿ
CSS±×·ìÇÎ
     - ½ºÅ¸ÀϽÃÆ®±×·ì
     - Ŭ·¡½º
     - »ç¿ëÀÚÁöÁ¤½ºÅ¸ÀÏ
JSSS
     - »õ·ÎÃß°¡µÈJSSS°´Ã¼
     - JSSS¿ÍCSS°£ÀǺñ±³
Layer
     - Layer TagÀÇ»ç¿ë
     - Layer ¼¼ºÎ»çÇ×
     - Explorer¿ëLayer
Javascript¿Í¿¬µ¿
µ¿ÀûÀÎ º¯È­
     - ÅؽºÆ®/À̹ÌÁöº¯È¯
     - À§Ä¡ À̵¿
µ¿Àû Å×À̺í
     - µ¿ÀûÅ×À̺í»ý¼º
     - µ¿ÀûÅ×À̺íÁ¤·Ä
±â Ÿ
     - Font Download
     - Filter
¸¶Ä¡¸ç

Copyright ¨Ï 1997 ~, Deadfire Program Master