CSS »ç¿ë¹ý
CSS ¹®¹ý
Ŭ·¡½º¿Í ¾ÆÀ̵ð
ÁÖ¼®
ÅØ½ºÆ®
color
direction
backgroud-color
line-height
letter-spacing
text-align
text-decoration
text-indent
word-spacing
¹è°æ
background-color
background-image
background-repeat
background-position
background-attachment
Font
Å©±â ´ÜÀ§
Box Model
°æ°è¼±(border)
¸®½ºÆ®(list)
³×À̹ö ºÏ¸¶Å© ´ÙÀ½ Áñ°Üã±â ¸¶°¡¸°
HTML¹®¼­¿¡ CSS¸¦ »ç¿ëÇÏ´Â 3°¡Áö ¹æ¹ý

HTML¹®¼­¿¡ CSS¸¦ »ç¿ëÇÏ´Â ¹æ¹ýÀº 3°¡Áö°¡ ÀÖ½À´Ï´Ù.

  • ¿ÜºÎ ½ºÅ¸ÀÏ ½ÃÆ®(External Style Sheet)
  • ³»ºÎ ½ºÅ¸ÀÏ ½ÃÆ®(Internal Style Sheet)
  • HTMLű׳»¿¡ ½ºÅ¸ÀÏ ÁöÁ¤(Inline Styles)

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

css¶ó´Â È®ÀåÀÚ¸¦ °¡Áø ½ºÅ¸ÀÏ ½ÃÆ® ÆÄÀÏÀ» ¸¸µé°í ÀÌ ÆÄÀÏÀ» HTML ¹®¼­¿¡ ¿¬°áÇÏ¿© »ç¿ëÇÏ´Â ¹æ¹ýÀÔ´Ï´Ù.

<head>
 <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

ÀÌ ¹æ¹ýÀÇ ÀåÁ¡Àº ȨÆäÀÌÁö ÀüüÀÇ ½ºÅ¸ÀÏÀ» Àϰü¼ºÀÖ°Ô À¯ÁöÇϸ鼭 º¯°æ½Ã¿¡µµ ÀϰýÀûÀ¸·Î º¯°æµÇ¹Ç·Î ȨÆäÀÌÁö Á¦ÀÛÀÇ È¿À²¼ºÀ» ±Ø´ëÈ­ ÇÒ ¼ö ÀÖ½À´Ï´Ù.

¹Ý¸é ¿ÜºÎ ½ºÅ¸ÀÏ ½ÃÆ® ÆÄÀÏÀ» °è¼ÓÀûÀ¸·Î °ü¸®ÇØÁָ鼭 HTML ¹®¼­¸¦ ¸¸µé¾î ³ª°¡¾ß Çϱ⿡ ºÒÆíÇÑ °æ¿ì°¡ ÀÖ½À´Ï´Ù. ±×¸®°í ¿ÜºÎ ½ºÅ¸ÀÏ ½ÃÆ® ÆÄÀÏÀÌ Áö³ªÄ¡°Ô º¹ÀâÇØÁö¸é °ï¶õÇϹǷΠcssÆÄÀÏÀ» °ü¸®ÇÏ´Â ³ëÇϿ찡 ÇÊ¿äÇÕ´Ï´Ù.

±×·³¿¡µµ ºÒ±¸Çϰí Àü¹®ÀûÀΠȨÆäÀÌÁö¸¦ ¸¸µé·Á¸é ¿ÜºÎ ½ºÅ¸ÀÏ ½ÃÆ®¸¦ Àû±ØÀûÀ¸·Î Ȱ¿ëÇØ¾ß ÇÕ´Ï´Ù.

³»ºÎ ½ºÅ¸ÀÏ ½ÃÆ®(Internal Style Sheet)

HTML¹®¼­³»¿¡¼­ <head>¿Í </head>»çÀÌ¿¡ ½ºÅ¸ÀÏÀ» Á¤ÀÇÇÏ´Â ¹æ¹ýÀÔ´Ï´Ù.

<head>
 <style type="text/css">
 <!--
  body {font-size:9pt;}
 //-->
 </style>
</head>

HTML¹®¼­¸¶´Ù ½ºÅ¸ÀÏÀ» ¸Å¹ø ÁöÁ¤ÇØ ÁÖ¾î¾ß ÇÏÁö¸¸, ÇÑ ¹®¼­¿¡¸¸ ÇØ´çµÇ´Â ½ºÅ¸ÀÏÀ» ÁöÁ¤ÇÒ¶§ »ç¿ëÇÏ¸é µË´Ï´Ù.

HTMLű׳»¿¡ ½ºÅ¸ÀÏ ÁöÁ¤(Inline Styles)

À§ÀÇ ¹æ¹ýµé¿¡ ºñÇØ¼­ Àû¿ë¹üÀ§°¡ ´õ¿í Á¼¾ÆÁø ÇüÅÂÀÔ´Ï´Ù. ½ºÅ¸ÀÏÀ» Àû¿ëÇÏ°í ½ÍÀº HTMLű׾ȿ¡¼­ Á¤ÀÇÇÏ´Â ¹æ¹ýÀÔ´Ï´Ù.

<p style="color:gray;">ÀÌ ¹®´ÜÀÇ »ö»óÀº ȸ»öÀ¸·Î ÁöÁ¤µË´Ï´Ù.</p>

ÀÌ ¹®´ÜÀÇ »ö»óÀº ȸ»öÀ¸·Î ÁöÁ¤µË´Ï´Ù.

³»¿ë°ú ½ºÅ¸ÀÏÀÇ ºÐ¸® ±×¸®°í ÀÌ·Î ÀÎÇÑ ½ºÅ¸ÀÏ Àϰýº¯°æÀÇ È¿À²¼º Ãø¸éÀ¸·Î º¼¶§´Â ¹Ù¶÷Á÷ÇÏÁö ¾Ê´Â ¹æ¹ýÀÔ´Ï´Ù.

±×·¯³ª À§ÀÇ ¼Ò½º¿¡¼­µµ º¸µíÀÌ Á÷°üÀûÀ¸·Î »ç¿ëÀÌ °¡´ÉÇÏ´Ù´Â ÀåÁ¡ÀÌ Àֱ⿡ °­Á¸¦ ÁøÇàÇÒ¶§´Â ÁÖ·Î ÀÌ ¹æ¹ýÀ» »ç¿ëÇϰڽÀ´Ï´Ù.

Copyright © Homejjang.com All rights reserved.