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
¸ñ·Ï
´ÙÀ½ >
¡¡
|