1. CSS(Cascading Style Sheet)

  ´ÙÀ̳ª¹Í HTMLÀÇ ±¸ÇöÀ» À§ÇÑ ¾ð¾î·Î¼­  ¿öµåÇÁ·Î¼¼¼­ÀÇ ½ºÅ¸ÀÏ°ú °°Àº ±â´ÉÀ¸·Î, HTML·Î º¸¿©Áִ ȨÆäÀÌÁöÀÇ
  ¿©·¯°¡Áö ¼Ó¼ºµé (ÆùÆ® Á¾·ù¿Í Å©±â, ¿©¹é, ±ÛÀÚ»ö, ¹è°æ»ö, Á¤·Ä µî)À» ¹Ì¸® ÁöÁ¤ÇÏ´Â µ¥ »ç¿ëµÈ´Ù.

2. Style Sheet ¸¦ Áö¿øÇÏ´Â ºê¶ó¿ìÀú

(1) ÀͽºÇ÷η¯ÀÇ °æ¿ì : CSS¸¸ Áö¿ø

   <style type = "text / css">

     ½ºÅ¸ÀÏ Á¤ÀÇ

   </style>

(2) ³Ý½ºÄÉÀÌÇÁ Ä¿¹Â´ÏÄÉÀÌÅÍ 4.0ÀÇ °æ¿ì : CSS¿Í javascript ¹æ½Ä µÎ°¡Áö Áö¿ø

   <style type = "text/javascript">

     ½ºÅ¸ÀÏ Á¤ÀÇ

   </style>

3. Style Sheet ±¸¼º¿ä¼Ò

¼±ÅÃÀÚ{¼Ó¼º: ¼Ó¼º°ª; ¼Ó¼º: ¼Ó¼º°ª;...}          

 (1) selector(¼±ÅÃÀÚ)

     ¸ðµç HTMLÀÇ Å±װ¡ ¼±ÅÃÀÚÀÓ

 (2) declaration(¼±¾ð)  

      ¼Ó¼º¿¡ ´ëÇÑ ¼Ó¼º°ªÀ» ÀǹÌÇϸç,

      ¼Ó¼º°ú ¼Ó¼º°ªÀÇ ±¸ºÐÀº ÄÝ·Ð(:) ¶Ç´Â ÀÌÄ÷(=) ·Î Çϸç,
      ¼±¾ð°ú ¼±¾ðÀÇ ±¸ºÐÀº ¼¼¹ÌÄÝ·Ð(;)À¸·Î ÇÑ´Ù.

 <style type = "text/css">

   p { color : green; font-size : 12px; }

  </style>

¡¡

4. Style Sheet ±¸Çö ¹æ¹ý

  (1) Linking Style Sheet : ¿ÜºÎ ½ºÅ¸ÀϽÃÆ® ÆÄÀÏ(*.css)À» ¸¸µé¾î ¾²´Â ¹æ¹ý

      ÀÚÁÖ ¾²´Â ½ºÅ¸ÀÏ ½ÃÆ®ÀÇ ³»¿ëÀº mycss.css¿Í °°ÀÌ '½ºÅ¸ÀϽÃÆ® ÆÄÀÏ'À» ¸¸µé¾î È£Ãâ

 ¿¹:
     <link rel="stylesheet" type="text/css" href="mycss.css">

  (2) Embedding Style Sheet : HTML ¹®¼­¾È¿¡¼­ <STYLE> ű׸¦ »ç¿ëÇÏ´Â ¹æ¹ý

       <head>,</head> »çÀÌ¿¡ ³Ö¾î ¹®¼­ Àüü¸¦ Áö¹èÇÏ´Â ½ºÅ¸ÀÏ ½ÃÆ® ÀÛ¼º

 ¿¹:
    <style type = "text/css">
      p {color : green; font-size:7cm;}
    </style>

  (3) Inline Style : HTML ¿ä¼Ò¾È¿¡¼­ STYLE ¼Ó¼ºÀ» ÀÌ¿ëÇÏ´Â ¹æ¹ý

      <body>,</body>»çÀÌ¿¡¼­ ÀϺΠHTML ű׿¡ ÀζóÀÎÀ¸·Î ½ºÅ¸ÀÏÀ» ¼±¾ð

 ¿¹:
    <p style="color:green;font-size:7cm;">Å©°Ô</p>


  (4) ½ºÅ¸ÀÏ ½ÃÆ® ¿ì¼± ¼øÀ§

      Inline Style > Embedding Style Sheet > Linking Style Shee

 ¸ñ·Ï  ´ÙÀ½ >

¡¡

Copyright ¨Ï2001¡­2003, alza.wo.to All Rights Reserved.