070-8260-2526

ÆòÀÏ ¿ÀÀü 9½Ã ~ ¿ÀÈÄ 6½Ã
´ÜÀ§³óÇù

352-0331-1626-83

¿¹±ÝÁÖ:°­¸¸¼öÅ×Å©³ÝÄÚ¸®¾Æ


ÀÚÁÖ¹¯´Â Áú¹®
Ȩ > °í°´¼¾ÅÍ > ÀÚÁÖ¹¯´Â Áú¹®

Á¶È¸¼ö 7470
Áú¹® CSS ÀÚ¼¼ÇÑ °­ÁÂ
CSS ÀÚ¼¼ÇÑ °­ÁÂ_
ebelieve
´äº¯Ã¤Å÷ü 71.1%
2006.07.04 23:18
 

css ¸¦ ¹è¿ì½Ã±â À§Çؼ­´Â xhtml (css+html) »çÀüÀ» ±¸¸ÅÇϼż­ º¸½Ã´Â°ÍÀÌ ´õ ÁÁ½À´Ï´Ù
Àúµµ css¸¦ ¹è¿ï·Á°íÇßÀ»¶§ À¥¿¡¼­´Â ÁÁÀº°÷ÀÌ ¾ø¾î ¿À·ÎÁö Ã¥º¸°í °øºÎÇß½À´Ï´Ù
* À¥ 2.0À» À̲ô´Â ¹æźÀ¥ À̶õ Ã¥Àº cssÀÇ Á߿伺¿¡ ´ëÇØ ³ª¿ÍÀÖ½À´Ï´Ù
* ½Ç¿ë¿¹Á¦·Î ¹è¿ì´Â À¥Ç¥ÁØ À̶õ Ã¥Àº css¸¦ È°¿ëÇÏ´Â ¿¹Á¦·Î cssÀÇ °¨À» ÁÖ´õ±º¿ä
* Á¤º¸¹®È­»çÀÇ xhtml »çÀü À» ÀÌ¿ëÇÏ¿© cssÀÇ ¸ðµç ¼Ó¼ºÀ» ¿Ü¿ü½À´Ï´Ù
(xhtmlÀº html+css ¶ó°í »ý°¢ÇϽøéµË´Ï´Ù)
 
p {font-size:12px;}
ÀÌ°ÍÀÇ ¶æÀº ¸ðµç pű׿¡´Â 12px¸¸Å­ÀÇ ÆùÆ® Å©±â¸¦ ÁְԵ˴ϴÙ
 
p a {font-size:14px;}
ÀÌ°ÍÀÇ ¶æÀº p ÅÂ±× ¾È¿¡ÀÖ´Â a ű׵éÇÑÅ׸¸ ÆùƮũ±â¸¦ 14px·Î ÁÖ¶ó´Â À̾߱âÀÔ´Ï´Ù
 
p, a, body {font-size:16px}
ÀÌ°ÍÀÇ ¶æÀº pÅÂ±×¿Í aÅÂ±× body ű×ÀÇ ³»¿ëµéÀº ÆùƮũ±â¸¦ 16px·Î ÁÖ¶ó´Â ¶æÀÔ´Ï´Ù
 
À§Ã³·³ Á¤ÇÑÈÄ¿¡ <p>³»¿ëÀ» <p>³»¿ë</p> ¸¦ »ç¿ëÇÏ°Ô µÇ¸é ÀÚµ¿À¸·Î À§¿¡¼­ Á¤ÇÑ°ÍÀÌ Àû¿ëµË´Ï´Ù
 
½ºÅ¸ÀϽÃÆ® ±¸¼º
ÅÂ±× {¼Ó¼º:¼Ó¼º°ª; ¼Ó¼º:¼Ó¼º°ª;¡¦¡¦}
ÅÂ±× : Àû¿ëÇÒ ÅÂ±× È¤Àº id, class
¼Ó¼º : ¾î¶°ÇÑ°ÍÀ»
¼Ó¼º°ª : ¾î¶»°Ô Àû¿ëÇÑ´Ù
 
Áï, font {color:red; font-size:12px;}
html ¹®¼­¿¡ ÀÖ´Â font ¶õ ű׵éÀº ¸ðµÎ fontÀÇ »ö±òÀº »¡°­À¸·Î Àû¿ëÇÑ´Ù´Â ¶æ
 
¼Ó¼º:¼Ó¼º°ª À¸·Î : À» ÀÌ¿ëÇÏ¿© ±¸ºÐÇÕ´Ï´Ù
´Ù¸¥ ¼Ó¼ºÀ» Àû¿ëÇÒ¶§´Â ; À» ÀÌ¿ëÇÏ¿© ³ª´«ÈÄ À§Ã³·³ °è¼Ó ÀÌ¾î ³ª°©´Ï´Ù
 
 
½ºÅ¸ÀϽÃÆ®¿¡¼­ ´õ Áß¿äÇÑ class¿Í id¿¡ ´ëÇØ ¸»¾¸µå¸®°Ú½À´Ï´Ù
 
.ccc {font-color:red;}
ÀÌ ¶æÀº class¸¦ ccc¶ó´Â À̸§À¸·Î Á¤ÇØÁÖ°í ÀÌ À̸§À» °¡Áø°ÍµéÀÇ ±ÛÀÚ¸¦ »¡°­À¸·ÎÇ϶óÀÔ´Ï´Ù. ÀÌ·¸°Ô Á¤ÇÑ°ÍÀ» ű׿¡ Àû¿ëÇϱâ À§Çؼ­´Â ű׿¡ class=À̸§À» Àû¾îÁֽøéµË´Ï´Ù. À§ ³»¿ëÀ» div ű׿¡ Àû¿ëÇÏ°í ½Í´Ù¸é <div class="ccc">¶ó°í Çϸé À§¿¡¼­ Á¤ÇÑ°ÍÀÌ Àû¿ëµË´Ï´Ù. ¶Ç font ű׿¡ Àû¿ëÇÏ°í ½Í´Ù¸é <font class="ccc">¶ó°í Çϸé font ű׿¡ Á¤ÇØÁý´Ï´Ù. ÀÌ class ´Â ¾ÆÁÖ ¿©·¯¹ø ¿øÇϴ°÷¿¡¼­ »ç¿ëÀÌ °¡´ÉÇÏ´ä´Ï´Ù.
 
#ccc {font-color:green;}
ÀÌ ¶æÀº idÀÇ À̸§À» ccc·Î Áشٴ À̾߱âÀÔ´Ï´Ù. À§ ³»¿ëÀº ccc¶ó´Â id¸¦ °¡Áø ű׿¡ ÆùÆ® »ö±òÀº ÃÊ·Ï»öÀ¸·Î Áشٴ À̾߱âÀÔ´Ï´Ù. »ç¿ë¹ýÀº ¸¸¾à div ű׿¡ Àû¿ëÇÏ°í ½Í´Ù¸é <div class="ccc"> ¶ó°í ÇÏ¿© »ç¿ëÇϽøéµË´Ï´Ù.
 
ÀÌÁ¦ ½½½½ ¹«¾ùÀΰ¡ ÀÌ»óÇÏ´Ù°í »ý°¢ÀÌ µå½Ç°ÍÀÔ´Ï´Ù. ±×·¸´Ù¸é class¿Í id´Â °°Àº°ÍÀÌ ¾Æ´Ï³Ä? ¶ó´Â Áú¹®ÀÌ ¶°¿À¸£½Ç°Ì´Ï´Ù. ÇÏÁö¸¸ ÀÌ µÎ°³´Â ´Ù¸£´ä´Ï´Ù. class ´Â ¾ÆÁÖ ¿©·¯¹ø ¾Æ¹«°÷¿¡¼­³ª ºÒ·¯¼­ ¾µ¼öÀÖÁö¸¸ id´Â µü Çѹø¹Û¿¡ »ç¿ëÇÒ¼ö ¾ø´ä´Ï´Ù. Áï ·¹À̾ƿôÀ» ¸¸µé¶§ ¾î¶² ºÎºÐÀº ÆäÀÌÁö¿¡¼­ ´Ü Çѹø¸¸ ³ª¿Í¾ß°ÚÁÒ. ±×·²¶§ id¸¦ »ç¿ëÇÕ´Ï´Ù. css¸¦ ÀÌ¿ëÇÑ ·¹À̾ƿôÀº div¿¡ background ¼Ó¼ºÀ» ÀÌ¿ëÇÏ¿© ¹è°æÀ̹ÌÁö¸¦ ³Ö´Â ¹æ½ÄÀ¸·Î ·¹À̾ƿôÀ» ±¸¼ºÇϰԵ˴ϴÙ. ¶Ç div´Â tableÀÇ cell °³³ä°ú °°´Ù°í º¸½Ã¸éµË´Ï´Ù. (ÇöÀç ¾Æ½¬¿îÁ¡Àº valign űװ¡ °¡Áø±â´ÉÀ» css·Î ±¸ÇöÇÏÁö ¸øÇѴٴ°ÍÀÔ´Ï´Ù. ´ë½Å position À̶õ ¼Ó¼ºÀÌ Àִµ¥ ÀÌ°ÍÀ» ÀÌ¿ëÇϱⰡ ¸Å¿ì ±î´Ù·Ó½À´Ï´Ù)
 
 
±ôºýÇÑ°ÍÀÌÀÖ±º¿ä
 
½ºÅ¸ÀϽÃÆ® Àû¿ë¹æ¹ýÀº 3°¡ÁöÀÔ´Ï´Ù
°­ÇÏ°í ¾àÇÏ´Ù´Â ¶æÀº ÀÌ 3°¡Áö ¼Ó¼ºÀ» ¸ðµÎ µ¿½Ã¿¡ Àû¿ëÇßÀ»¶§ Á¦ÀÏ °­ÇÑ°ÍÀÌ ¾àÇÑ°Í¿¡¼­ Á¤ÇÑ °ÍÀ» ¹«½ÃÇÏ°í Àû¿ëµÇ°ÔµË´Ï´Ù.
 
1. Á¦ÀÏ °­ÇÑ ½ºÅ¸ÀϽÃÆ®
<ÅÂ±× style="¼Ó¼º:¼Ó¼º°ª; ¼Ó¼º:¼Ó¼º°ª;"> ¸¦ ÀÌ¿ëÇÑ ¹æ½ÄÀÔ´Ï´Ù
¿¹¸¦ µé¾î <font style="color:green; font-size:12px;">ó·³ »ç¿ëÇÕ´Ï´Ù
 
2. µÑ°·Î °­ÇÑ ½ºÅ¸ÀϽÃÆ®
<style type="text/css">
<!--
³»¿ë
-->
</style>
 
3. °¡Àå ¾àÇÑ ½ºÅ¸ÀϽÃÆ®
<link rel="stylesheet" type="text/css" href="¹®¼­ÁÖ¼Ò />
 
 
±Û¾²´Ùº¸´Ï ÁöÀúºÐÇØÁ³±º¿ä
 
À§ 3°¡Áö Ã¥¸¸ º¸½Ã¸é html ¾Æ½Ã´ÂºÐÀ̶ó¸é ±Ý¹æ ¹è¿ì½Ç¼öÀÖ½À´Ï´Ù
¾Æ´Ï css Á߿伺À» ¾Æ½Å´Ù¸é ½Ç¿ë °ü·Ã Ã¥°ú »çÀü¸¸ º¸½Ã¸é ±Ý¹æ ¹è¿ì½Ç¼öÀÖ½À´Ï´Ù
ÀÚ¼¼È÷ Àо½Ã°í Áú¹®ÀÖÀ¸½Ã¸é ÂÊÁöÁÖ¼¼¿ä