½ºÅ¸ÀÏ ½ÃÆ®ÀÇ ¼±¾ðÀº ÀǿܷΠ°£´ÜÇÏ´Ù.¿ì¸®°¡ ÁöÁ¤ÇÏ°í ½ÍÀº
¼Ó¼º°ú ±× ¼Ó¼ºÀÇ °ª¸¸ ÁöÁ¤ÇØ Áֱ⠶§¹®ÀÌ´Ù. Á»´õ ±íÀÌ µé¾î°¡¸é ´Ù¾çÇÏ°Ô ÁöÁ¤ÇÏ´Â ¹æ¹ýÀÌ ÀÖÁö¸¸ Â÷ºÐÈ÷ ÇϳªÇϳª µé¾î°¡ º¸µµ·Ï
ÇÏÀÚ. ¿ì¼± ½ºÅ¸ÀÏ ¼±¾ðÀº ¾Æ·¡¿Í °°ÀÌ ÇàÇÏ¸é µÈ´Ù.
{PROPERTY:VALUE}
CSS Example - 1.Linking ½ºÅ¸ÀÏ ½ÃÆ® |
´ÙÀ½ÀÇ ³»¿ëÀ» copyÇØ¼ sample.css·Î ÀúÀåÇÑÈÄ ¾Æ·¡ÀÇ ¼Ò½º¸¦ ÀÌ¿ëÇØ¼
test.htmlÀ» ¸¸µçÈÄ °Ë»çÇÑ´Ù. H1{font-family:Arial;font-size:40pt;Color:red}
P{font-size:12pt;line-height:20pt} |
|
HTML Source |
<html> <HEAD> <link rel=StyleSheet
type="text/css" href="sample.css"> </HEAD> <BODY>
<H1>This is a HI stylesheet</H1> <P>This
is a P stylesheet</P> </body> </html> |
°á°úº¸±â |
|
CSS Example - 2.Embedding ½ºÅ¸ÀÏ
½ÃÆ® |
1¹ø°ú °°Àº ±â¹ýÀ» »ç¿ëÇÏÁö¸¸ º°µµÀÇ ÈÀÏÀ» ¸¸µå´Â °ÍÀÌ ¾Æ´Ï¶ó ´ÙÀ½°ú °°ÀÌ
head ÅÂ±× ¾È¿¡ »ðÀÔÇÏ´Â ¹æ¹ýÀÌ´Ù. <HEAD>
< STYLE TYPE="text/css">
TAG1{PROPERTY:VALUE}
TAG2{PROPERTY:VALUE}
......
TAGn{PROPERTY:VALUE}
</STYLE>
</HEAD> |
|
HTML Source |
<html> <HEAD> <STYLE TYPE="text/css">
H1{font-family:Arial;font-size:40pt;
Color:red}
P{font-size:12pt;line-height:20pt} </STYLE> </HEAD>
<BODY> <H1>This is a HI stylesheet</H1>
<P>This is a P stylesheet</P> </BOBY> </html> |
°á°úº¸±â |
|
CSS Example - 3.Inline ½ºÅ¸ÀÏ ½ÃÆ® |
¿ª½Ã 1¹ø 2¹ø°ú °°Àº ±â¹ýÀ» »ç¿ëÇÏÁö¸¸ º°µµÀÇ ÈÀÏÀ» ¸¸µé°Å³ª head
ÅÂ±× »çÀÌ¿¡ »ðÀÔÇÏ´Â°Ô ¾Æ´Ï¶ó ´ÙÀ½°ú °°ÀÌ Àû¿ëÇÒ ±ÛÀÚ¿¡ Á÷Á¢ inline ±â¹ýÀ» Àû¿ëÇÏ´Â ¹æ¹ýÀÌ´Ù. |
|
HTML Source |
<html> <HEAD> <BODY>
<H1 STYLE="font-family:Arial;font-size:40pt;Color:red"> This
is a HI stylesheet</H1> <P STYLE= "font-size:12pt;
line-height:20pt">This is a P stylesheet</P> </BODY>
</html> |
°á°úº¸±â |
|
|