Trio ȨÆäÀÌÁö CSS ¸Å´º¾ó ÀÏ¹Ý »çÇ× ¿¹Á¦ ¸Þ´º·Î
CSS2 ±Ô°Ý ¹ø¿ª¹® CSS1 ±Ô°Ý ¹ø¿ª¹® HTML ±Ô°Ý ½ºÅ¸ÀϽ¬Æ®
  • <STYLE class="css/text">....</STYLE> »çÀÌ¿¡ ³»¿ëÀ» ¸í½ÃÇÑ´Ù.
  • Style ¸í·ÉÀº { .... }·Î ¹­¿©¾ß ÇÑ´Ù(º¹¼öÀÇ ºóÄ­Àº ±¸º° ÇÏÁö ¾Ê´Â´Ù).
  • ÁöÁ¤ º¯¼ö¿Í º¯¼ö(¼öÄ¡) »çÀÌ´Â ÄÝ·Ð(:)À¸·Î ±¸ºÐ ÇÑ´Ù.
  • ¿©·¯ º¯¼ö¸¦ ÁöÁ¤ ÇÒ ¶§´Â ½ê¹ÌÄÝ·Ð(;)À¸·Î ±¸ºÐ ÇÑ´Ù. ¸¶Áö¸·¿¡µµ ÇØ µÎ´Â °ÍÀÌ ¾ÈÀüÇÏ´Ù.
  • Style ¸í·ÉÀº ´ë¼Ò ¹®ÀÚ¸¦ ±¸º°ÇÏÁö ¾Ê´Â´Ù.

µ¿½ÃÁöÁ¤
Grouping:º¹¼öÀÇ ¿¤·¹¸àÆ®¸¦ Çѹø¿¡ °°Àº ½ºÅ¸ÀÏ·Î ÁöÁ¤ ÇÒ ¼ö ÀÖ´Ù.
H1, H2, H3, H5 {color: blue;} /* ÇØ´ç ÇìµùÀ» ¸ðµÎ û»öÀ¸·Î ÁöÁ¤.*/

Âü°í»çÇ×(Comments)
/* Âü°í»çÇ×À¸·Î ¼öÇàÇÏÁö ¾ÊÀ½ */

Áß¿ä Ç¥½Ã
important:Áß¿äÇϴٴ ǥ½Ã·Î ¾î¶² °æ¿ì¿¡³ª ÀÌ °ÍÀÌ Àû¿ë µÈ´Ù.
H1 {color: blue ! important;}

Ç¥½Ã(display):
CSS1 ±Ô°Ý Ç¥½Ã(display) ¼³¸í
°ªÀº block, inline, list-item, none
  • block : ¾ÕµÚÀÇ ¿ä¼Ò Element¿¡ ´ëÇØ ÁÙ³ª´©±â¸¦ ÇÑ´Ù.
    div, table, h1, ...
  • inline : ¾ÕµÚÀÇ ¿ä¼Ò Element¿¡ ´ëÇØ ÁÙ³ª´©±â¸¦ ÇÏÁö ¾Ê´Â´Ù.
    span, img, ...
  • list-item: block°ú µ¿ÀÏÇÑ ±â´É¿¡ ¸ñ·Ï Ç¥½Ã°¡ Ãß°¡µÈ´Ù.
    dt, ol, ul, ...
  • none : °¨Ãá´Ù.
    .hide {display: none;}


½ºÅ¸ÀÏ ÁöÁ¤ ¹æ½Ä

½ºÅ¸ÀÏ ÁöÁ¤
style:
  • ½ºÅ¸ÀÏ ÁöÁ¤´Â ´Ù¸¥ °÷¿¡ ÁöÁ¤ Çصµ µÇ´Â °æ¿ì°¡ ¸¹À¸³ª <HEAD>...</HEAD>¿¡¼­ ÇÏ´Â °ÍÀÌ ¿øÄ¢ÀÌ°í ¾ÈÀü ÇÏ´Ù.
  • °°Àº ½ºÅ¸ÀÏÀ» Áߺ¹Çؼ­ ÁöÁ¤ ÇßÀ» ¶§´Â ³ªÁß¿¡ ÁöÁ¤ ÇÑ °ÍÀÌ Àû¿ëµÈ´Ù.
       µû¶ó¼­ ÀÌ°÷ÀÇ ¿¹Á¦¿¡¼­´Â TableÀ» ¸¹ÀÌ »ç¿ëÇÑ´Ù.
±âº» ÁöÁ¤:
      <STYLE type="text/css">
         P { background: yellow; color: black }
      </STYLE>

ºÒ·¯ ¾µ ¶§:
      <P>ºÒ·¯ ¾µ ¶§</P>

@import·Î ºÒ·¯ ¿Ã ¶§´Â
   ¸ÕÀú ¼³Á¤ ÇÊ¿ä
      <STYLE type="text/css" MEDIA="screen, projection">
         @import url("http://trio.co.kr/pub/stexpub.css");
            /* ¶Ç´Â @import url(../../pub/stexpub.css); */
         h4 { background: blue }
      </STYLE>
   ºÒ·¯ ¾µ ¶§:
      <P class=title> ºÒ·¯ ¿Â È­ÀÏ¿¡ ÁöÁ¤ µÈ ½ºÅ¸ÀÏ º°·Î ºÎ¸§</P>
   LINK ·Î ´Ù¸¥ È­ÀÏÀ» ¿¬°áÇÏ¿© »ç¿ë ÇÒ ¶§

½ºÅ¸ÀÏ Å¬·¡½º·Î ÁöÁ¤:
CSS1 ±Ô°Ý Ŭ·¡½º ¼³¸í
Class selectorID selector:
.
   ŸÀÔÀ» ÁöÁ¤ Çϱâ À§ÇØ
      Á¡(.)À¸·Î ½ÃÀ۵Ǵ ½ºÆ®¸µÀ¸·Î Class selector¸¦ Á¤ÀÇ ÇÒ ¼ö ÀÖ´Ù.
   ÀÌ´Â STYLE=attribute ±â´ÉÀ» ¼öÇàÇÏ°Ô ÇÑ´Ù.
   Á¡(.)Àº STYLE °ª¿¡´Â Ç¥½Ã µÇÁö ¾Ê´Â´Ù.

   ÁöÁ¤ ÇÒ ¶§: .example {color: brown;}
   ºÒ·¯ ¾µ ¶§: <P class="example">½ºÅ¸ÀÏ·Î ÁöÁ¤ ÇÑ ¿¹Á¦ Ç¥Çö.</P>

   ÁöÁ¤ ÇÒ ¶§: B.big { font-size: 20px; color: blue }
   ºÒ·¯ ¾µ ¶§: <B class=big> big ±Û¶ó½º´Â B¿¡¼­ ¸¸ ÀÛ¿ë.</B>

½ºÅ¸ÀÏ ID·Î ÁöÁ¤:
ID selector : CSS1 ±Ô°Ý ID ¼³¸í
   ŸÀÔÀ» ÁöÁ¤ Çϱâ À§ÇÏ¿© ¼¥(#)À¸·Î ½ÃÀ۵Ǵ ½ºÆ®¸µÀ¸·Î
       ID selector¸¦ Á¤ÀÇ ÇÒ ¼ö ÀÖ´Ù.
   ÀÌ´Â ID=attribute ±â´ÉÀ» ¼öÇàÇÏ°Ô ÇÑ´Ù.
   ¼¥(#)Àº ID °ª¿¡ Ç¥½ÃµÇÁö ¾Ê´Â´Ù.

   ÁöÁ¤ ÇÒ ¶§: #sample {color: brown;}
   ºÒ·¯ ¾µ ¶§: <P ID="sample"> ID·Î ÁöÁ¤ ÇÑ  ¿¹Á¦.</P>

Á¶ÇÕ ¿¤·¹¸àÆ®¿¡ ÁöÁ¤:
º¹ÇÕ ÁöÁ¤(Contextual selector) : CSS1 ±Ô°Ý º¹ÇÕ ÁöÁ¤ ¼³¸í

   ÁöÁ¤ µÈ À§Ä¡¿¡¼­ ÀÛµ¿ÇÑ´Ù.
   Parent ¿¡¼­ ÁöÁ¤ ÇÑ °ÍÀÌ Child¿¡µµ Àû¿ëµÈ´Ù.

   ÁöÁ¤ ÇÒ ¶§: H4.EM {color: red;} ȤÀº H4 EM {color: red;}
   ºÒ·¯ ¾µ ¶§: <H4>¿©±â¼­´Â <EM>Àû¿ëµÇ°í</EM>.</H4>
         <P>¿©±â¼­´Â <EM>Àû¿ëµÇÁö ¾Ê´Â´Ù</EM>.</P>

Á÷Á¢ ÁöÁ¤:
¿¤·¹¸àÆ®¿¡ Á÷Á¢ ÁöÁ¤ÇÑ´Ù.
   <div style="color:red;">¿©±â´Â Àû»öÀ¸·Î ³ªÅ¸³­´Ù.</div>

URL, ¿ÜºÎ file ¿¬°á

À̹ÌÁö¿¬°á
CSS1 ±Ô°Ý URL ¼³¸í
URL: °øÅëÀ¸·Î »ç¿ëµÇ´Â È­ÀÏ À̹ÌÁö ÁöÁ¤.
HTML document¿¡´Â Àû¿ëµÇÁö ¾Ê´Â´Ù.

   url(../../gif/ictrio.gif)
   url("http://trio.co.kr/gif/ictrio.gif")
¿ÜºÎ ¿¬°á
LINK: ´Ù¸¥ È­ÀÏ·Î µÈ CSS¸¦ ¿¬°áÇÏ¿© »ç¿ë ÇÒ ¼ö ÀÖ´Ù.
<LINK>´Â HTML ¹®¼­ÀÇ <HEAD>¿Í</HEAD>»çÀÌ¿¡ À§Ä¡ ÇÏ¿©¾ß ÇÑ´Ù.
HTML document¿¡´Â Àû¿ë µÇÁö ¾Ê´Â´Ù.

   <LINK REL=STYLESHEET TYPE='text/css' 
	HREF='http://trio.co.kr/pub/stexpub.css'>
IMPORT ·Î ºÒ·¯ »ç¿ë ÇÒ ¶§


´ÜÀ§(Unit)
CSS1 ±Ô°Ý ´ÜÀ§ ¼³¸í
±æÀÌ ´ÜÀ§ :
   °øÅëÀ¸·Î »ç¿ëµÇ´Â Àý´ë ±æÀÌ ÁöÁ¤.
   »ç¿ë °¡´ÉÇÑ ´ÜÀ§´Â em, px, in, cm, mm, pt, pc

   width: 50px;
   margin-left: 2em;
¹éºÐÀ² : CSS1 ±Ô°Ý ¹éºÐÀ² ¼³¸í
   °øÅëÀ¸·Î »ç¿ëµÇ´Â ¹éºÐÀ² ÁöÁ¤.

   width: 80%;
»ö»ó : CSS1 ±Ô°Ý »ö»ó ¼³¸í
   Color:  °øÅëÀ¸·Î »ç¿ëµÇ´Â »ö»ó ÁöÁ¤(»ö»óÇ¥)

   color: #FF00FF;
   color: #F0F;
   color: brown;
   color: rgb(100%,0%,100%)

¼Ò°³ ÀÏ¹Ý ÅؽºÆ® ÆùÆ® ¹Ú½º »ö»ó ¸ñ·Ï »öÀÎ ¿¹Á¦
À̹®¼­(http://trio.co.kr/webrefer/css/cssgen.html)´Â
ÀÚÀ¯·ÎÀÌ ¿¬°á »ç¿ëÀÌ °¡´ÉÇÔ.
¿¹Á¦ ¸Þ´º·Î