8-2-5.CSSÀÇ ÁÖ¼®

¾î´À ¾ð¾î¿¡³ª ±â´ÉÀ» Àá½Ã Á¤Áö½ÃÅ°°Å³ª ¼³¸íÀ» ´Ù´Â ÁÖ¼®Àº ²À ÇÊ¿äÇÏ´Ù. <h2>¿¡ ´ëÇÑ ½ºÅ¸Àϸ¸ Á¦°ÅÇϱâ À§ÇØ ½ºÅ¸ÀÏ ÁöÁ¤¹®À» HTML ÁÖ¼®À¸·Î °¨½Î º¸ÀÚ.

 

<style>

     body { background:yellow; }

     <!-- h2 { font-size:225%; color:green; text-align:center; } -->

     p { text-align:justify; }

     li { font-size:80%; color:red; font-weight:bold; }

</style>

 

½ºÅ¸ÀÏ ÁöÁ¤¹®À» ÁÖ¼®À¸·Î ¹­¾úÀ¸¹Ç·Î <h2> ½ºÅ¸ÀÏÀº ¹«½ÃµÉ °Í °°Áö¸¸ Á¤ÀÛ Ãâ·ÂÇØ º¸¸é ÁÖ¼®¾ÈÀÇ ½ºÅ¸ÀÏÀÌ ±×´ë·Î Àû¿ëµÇ¾î ¹ö¸°´Ù. ¿Ö³ÄÇÏ¸é ¿ª»çÀûÀÎ ÀÌÀ¯·Î CSS´Â HTML ÁÖ¼® Ç¥½Ã¸¦ ¹«½ÃÇϵµ·Ï µÇ¾î Àֱ⠶§¹®ÀÌ´Ù. ÁÖ¼® ¾ÈÀÇ ³»¿ëÀ» ¹«½ÃÇÏ´Â °ÍÀÌ ¾Æ´Ï¶ó ÁÖ¼® Ç¥½Ã ÀÚü¸¦ ¹«½ÃÇØ ¹ö¸°´Ù. °ú°Å CSS¸¦ ÀÌÇØÇÏÁö ¸øÇÏ´Â ºê¶ó¿ìÀú°¡ CSS ¹®ÀåÀ» À¥ ÆäÀÌÁö¿¡ ±×´ë·Î Ãâ·ÂÇÏ´Â ºÎÀÛ¿ëÀ» ÇØ°áÇϱâ À§ÇØ ½ºÅ¸ÀÏ ÁöÁ¤¹®À» ÁÖ¼®À¸·Î °¨½Î´Â ²Ä¼ö¸¦ »ç¿ëÇß¾ú´ø ÀûÀÌ ÀÖ´Ù.

±×·¡¼­ ÃÖ½ÅÀÇ CSS ¿£ÁøÀº ȣȯ¼º À¯Áö¸¦ À§ÇØ HTML ÁÖ¼®ÀÇ ¾ÈÂʵµ Àо Àû¿ëÇÑ´Ù. CSSÀÇ °ø½ÄÀûÀÎ ÁÖ¼®Àº /* */·Î Á¤ÀǵǾî ÀÖ´Ù. Àá½Ã Á¤Áö½ÃÅ°°íÀÚ ÇÏ´Â ¹®ÀåÀÇ ¾çÂÊÀ» /* */·Î °¨½Î¾ß ÇÑ´Ù. À̶§ /* °ýÈ£ ´ÙÀ½°ú */ °ýÈ£ ÀÌÀü¿¡´Â ¹Ýµå½Ã °ø¹éÀ» µÎ¾î¾ß ÇÑ´Ù. ÀϺΠºê¶ó¿ìÀú¿¡¼­ °ø¹éÀÌ ¾øÀ¸¸é ÁÖ¼®À¸·Î ÀÎÁ¤ÇÏÁö ¾Ê´Â ¹ö±×°¡ ÀÖ´Ù.

 

<style>

     body { background:yellow; }

     /* h2 { font-size:225%; color:green; text-align:center; } */

     p { text-align:justify; }

     li { font-size:80%; color:red; font-weight:bold; }

</style>

 

<h2> ű׿¡ ´ëÇÑ ½ºÅ¸ÀÏ ÁöÁ¤¹®ÀÌ ¹«½ÃµÇ¾î ±âº» ½ºÅ¸ÀÏ´ë·Î Ãâ·ÂµÉ °ÍÀÌ´Ù. ¾çÂÊÀ» ¸ðµÎ °¨½Î¾ß ÇϹǷΠÇÑ ÁÙ¸¸ ÁÖ¼® ó¸®ÇÒ ¶§´Â ºÒÆíÇÑ ¸éÀÌ ÀÖ´Ù. C ¾ð¾î¿¡ Àͼ÷ÇÑ »ç¶÷Àº ´õºí ½½·¹½¬·Î ÇÑ ÁÙ ÁÖ¼®À» ó¸®ÇÒ ¼ö ÀÖÀ½À» Àß ¾Ë°í ÀÖÀ» °ÍÀÌ´Ù. °ú¿¬ ÅëÇÏ´ÂÁö ÇÑ ÁÙ ÁÖ¼®À» ³Ö¾î º¸ÀÚ.

 

<style>

     body { background:yellow; }

     // h2 { font-size:225%; color:green; text-align:center; }

     p { text-align:justify; }

     li { font-size:80%; color:red; font-weight:bold; }

</style>

 

ÀÌ·¸°Ô ¾ÕÂÊ¿¡ //¸¦ ³Ö¾îµµ <h2> ½ºÅ¸ÀÏÀÌ ¹«½ÃµÈ´Ù. // ÁÖ¼®ÀÌ ÅëÇÏ´Â ÀÌÀ¯´Â °ø½ÄÀûÀÎ ÁÖ¼®À̾°¡ ¾Æ´Ï¶ó CSS°¡ ÀÌÇØÇÏÁö ¸øÇÏ´Â ±âÈ£¿©¼­ ÀÌ ÁÙÀ» Åë°·Î ¹«½ÃÇϱ⠶§¹®ÀÌ´Ù. µû¶ó¼­ // °¡ ¾Æ´Ï¶ó ¾Æ¹«°Å¶óµµ Àǹ̾ø´Â ¸»À» ¾Õ¿¡ Àû¾î ³õ±â¸¸ ÇÏ¸é µÈ´Ù. ½ÉÁö¾î´Â ´ÙÀ½°ú °°ÀÌ Çѱ۷ΠÀû¾î ³öµµ »ó°ü ¾ø´Ù.

 

<style>

     body { background:yellow }

     ¾ß, ÀÌ°Ç ¹«½ÃÇØ! h2 { font-size:225%; color:green; text-align:center; }

     p { text-align:justify; }

     li { font-size:80%; color:red; font-weight:bold; }

</style>

 

°íÀÇ·Î ¿¡·¯¸¦ ¹ß»ý½ÃÄÑ Çؼ®ÇÏÁö ¸øÇϵµ·Ï ÈѹæÀ» ³õÀ½À¸·Î½á ÁÖ¼®ÀÇ È¿°ú¸¦ ³»´Â °ÍÀÌ´Ù. À¥ ºê¶ó¿ìÀú´Â À¢¸¸Çؼ­´Â ¿¡·¯ ¸Þ½ÃÁö¸¦ Ãâ·ÂÇÏÁö ¾ÊÀ¸¸ç ÀڱⰡ ÀÌÇØÇÏÁö ¸øÇÏ´Â ³»¿ëÀ» Á¶¿ëÈ÷ ¹«½ÃÇÒ »ÓÀÌ´Ù. ÆäÀÌÁö¸¦ ¾Æ¹«¸® °³¶±°°ÀÌ ¸¸µé¾î ³öµµ ÀڱⰡ ÀÌÇØÇÒ ¼ö Àִµ¥±îÁö ÃÖ´ëÇÑ Çؼ®Çؼ­ ±º¼Ò¸®¾øÀÌ Ãâ·ÂÇÑ´Ù.

±×·¯³ª À§ µÎ °æ¿ì´Â Á¶¿ëÈ÷ ¿¡·¯ ó¸®µÇ¾î ¹«½ÃµÈ °Íó·³ º¸ÀÏ »ÓÀÌÁö Á¤»óÀûÀÎ ÁÖ¼® 󸮴 ¾Æ´Ï´Ù. ºê¶ó¿ìÀú¸¶´Ù ¿¡·¯¸¦ ó¸®ÇÏ´Â ¹æ½ÄÀÌ ´Ù¸£°í // ±âÈ£ÀÇ °æ¿ì´Â ±â´ÉÀÌ ¸íÈ®È÷ Á¤ÀǵǾî ÀÖÁö ¾Ê¾Æ ¾î¶² ºÎÀÛ¿ëÀÌ ¹ß»ýÇÒÁö ¿¹ÃøÇÒ ¼ö ¾ø´Ù. CSS¿¡´Â °ø½ÄÀûÀÎ ÇÑ ÁÙ ÁÖ¼®ÀÌ ¾øÀ¸¹Ç·Î Á¤¼®´ë·Î /* */·Î °¨½Î´Â °ÍÀÌ ¿Ç´Ù.