|
[±âÃÊ] ½ºÅ¸ÀÏ ½ÃÆ®ÀÇ Á¤ÀÇ + 3°¡Áö ÇüÅÂÀÇ Àû¿ë ¹æ¹ý
2006.02.16 13:58
±Û¾´ÀÌ : ¿î¿µÀÚ
Á¶È¸ : 993
̵̧ : 0
CSS [cascading style sheets] |
±âÁ¸ÀÇ HTMLÀº À¥ ¹®¼¸¦ ´Ù¾çÇÏ°Ô ¼³°èÇÏ°í ¼ö½Ã·Î º¯°æÇϴµ¥ ¸¹Àº Á¦¾àÀÌ µû¸£´Âµ¥, À̸¦ º¸¿ÏÇϱâ À§ÇØ ¸¸µé¾îÁø °ÍÀÌ ½ºÅ¸ÀÏ ½ÃÆ®ÀÌ°í ½ºÅ¸ÀÏ ½ÃÆ®ÀÇ Ç¥ÁؾÈÀÌ ¹Ù·Î CSS ÀÌ´Ù. °£´ÜÈ÷ ½ºÅ¸ÀϽÃÆ®¶ó°íµµ ÇÑ´Ù.
HTMLÀ» ÀÌ¿ëÇؼ À¥ ÆäÀÌÁö¸¦ Á¦ÀÛÇÒ °æ¿ì Àü¹ÝÀûÀΠƲ¿¡¼ ¼¼¼¼ÇÑ ±Û²Ã Çϳª Çϳª¸¦ ÀÏÀÏÀÌ ÁöÁ¤ÇØÁÖ¾î¾ß ÇÏÁö¸¸, À¥ ÆäÀÌÁöÀÇ ½ºÅ¸ÀÏ(ÀÛ¼ºÇü½Ä)À» ¹Ì¸® ÀúÀåÇØ µÎ¸é À¥ ÆäÀÌÁöÀÇ ÇÑ °¡Áö ¿ä¼Ò¸¸ º¯°æÇصµ °ü·ÃµÇ´Â Àüü ÆäÀÌÁöÀÇ ³»¿ëÀÌ ÇѲ¨¹ø¿¡ º¯°æµÇ¹Ç·Î, ¹®¼ ÀüüÀÇ ÀÏ°ü¼ºÀ» À¯ÁöÇÒ ¼ö ÀÖ°í ÀÛ¾÷ ½Ã°£µµ ´ÜÃàµÈ´Ù.
µû¶ó¼ À¥ °³¹ßÀÚµéÀº º¸´Ù dzºÎÇÑ µðÀÚÀÎÀ¸·Î À¥À» ¼³°èÇÒ ¼ö ÀÖ°í, ±ÛÀÚÀÇ Å©±â, ±ÛÀÚü, ÁÙ°£°Ý, ¹è°æ »ö»ó, ¹è¿À§Ä¡ µîÀ» ÀÚÀ¯·Ó°Ô ¼±ÅÃÇϰųª º¯°æÇÒ ¼ö ÀÖÀ¸¸ç À¯Áö¡¤º¸¼öµµ °£ÆíÇÏ°Ô ÇÒ ¼ö ÀÖ´Ù.
°¢±â ´Ù¸¥ »ç¿ëÀÚ È¯°æ¿¡¼ µ¿ÀÏÇÑ ÇüÅÂÀÇ ¹®¼¸¦ Á¦°øÇÑ´Ù´Â ÀÌÁ¡µµ ÀÖ´Ù. CSS·Î ¸¸µé¾îÁø ¹®¼´Â »ç¿ëÀÚµéÀÇ ºê¶ó¿ìÀú ȯ°æ¿¡ µû¶ó ȨÆäÀÌÁö°¡ ´Ù¸£°Ô ³ªÅ¸³ª´Â ÀÏÀÌ ¾ø°í ¾î´À ȯ°æ¿¡¼³ª Á¦ÀÛÀÚ°¡ ÀǵµÇÑ´ë·Î ±× È¿°ú°¡ Àü´ÞµÈ´Ù. [³×À̹ö ¹é°ú»çÀü] | ½ºÅ¸ÀÏ ½ÃÆ®¸¦ À¥ ¹®¼¿¡ Àû¿ëÇÏ´Â ¹æ¹ý¿¡´Â ´ÙÀ½°ú °°Àº 3°¡Áö°¡ ÀÖ´Ù.
ù°, ÀζóÀÎ(Inline) ¹æ½Ä. ÇÊ¿äÇÒ¶§ ÁïÈïÀûÀ¸·Î »ç¿ë. <HEAD>~</HEAD>¿¡ ½ºÅ¸ÀÏ¿¡ ´ëÇÑ »çÀü Á¤ÀǾøÀÌ ÁïÈïÀûÀ¸·Î ÇÊ¿äÇÒ ¶§ ¸¶´Ù <BODY>~</BODY>»çÀÌÀÇ Æ¯Á¤ ÅÂ±× ¿¡ ½ºÅ¸ÀϽÃÆ® Äڵ带 »ðÀÔÇÏ´Â ¹æ¹ý.
ÀζóÀÎ(Inline) ¹æ½Ä Àû¿ë ¿¹ |
°á°úȸé |
<TABLE BORDER="1"> <TR> <TD STYLE="font-size:30px">³ª¶óµðÀÚÀÎ</TD> </TR> </TABLE> |
| µå¸²À§¹ö MX 2004 ¸¦ »ç¿ëÇÏ¸é ¼Ò½ºº¸±â â¿¡¼ ÄÚµå ÀÚµ¿¿Ï¼º ±â´ÉÀ» »ç¿ëÇÒ ¼ö ÀÖÀ¸¹Ç·Î ½ºÅ¸ÀϽÃÆ®ÀÇ ¸ðµç ¼Ó¼ºÀ» ¿Ü¿ì°í ÀÖÀ» ÇÊ¿ä´Â ¾ø´Ù. ¼Ò½ºº¸±â â¿¡¼ TDµûÀ§ÀÇ ±âÁ¸ HTMLÅÂ±× ¾È¿¡ Ä¿¼¸¦ ³õÀº ´ÙÀ½ Space Å°¸¦ ´·¯ ÇÑÄ ¶ç¿ì±â ÇÏ°Ô µÇ¸é ÇØ´ç ű׿¡ Àû¿ëÇÒ ¼ö ÀÖ´Â HTML¸í·É¾î ¶Ç´Â CSS¸í·É¾î°¡ ³ªÅ¸³ª±â ¶§¹®¿¡ »ç¿ëÀÚ´Â ¡é¡èÅ° ¶Ç´Â ¸¶¿ì½º¸¦ ÀÌ¿ëÇÏ¿© ¿øÇÏ´Â ¼Ó¼º°ú °ªÀ» ¼±ÅÃÇϱ⸸ ÇÏ¸é µÈ´Ù. Áï, HTMLű×ÀÇ ¼Ó¼º ¶Ç´Â CSSÀÇ ¼Ó¼º¸¸ ÀÌÇØÇÏ°í ÀÖÀ¸¸é µÈ´Ù.
µÑ°, ÀÓº£µðµå(Embeded) ¹æ½Ä. ÇöÀç ¹®¼¿¡¼¸¸ »ç¿ë. <HEAD>~</HEAD>»çÀÌ¿¡ ƯÁ¤ HTMLű×(BODY, TABLE, TD, INPUT, SELECT.. µûÀ§)¿¡ ´ëÇÏ¿© »ç¿ëÀÚ°¡ ¿øÇÏ´Â ÇüÅÂÀÇ ½ºÅ¸ÀÏ·Î ÅÂ±× Àç Á¤ÀÇ ÇØ ³õÀ¸¸é ÇöÀç ¹®¼ÀÇ º»¹® HTMLű״ »ç¿ëÀÚÀÇ ÅÂ±× Àç Á¤ÀÇ¿¡ µû¸£°Ô µÈ´Ù. ¸¸¾à TD¿¡ ´ëÇÏ¿© Àç Á¤ÀÇ ÇÏ¿´´Ù¸é ÇöÀç ¹®¼ÀÇ ¸ðµç TD´Â »ç¿ëÀÚ°¡ Á¤ÀÇÇÑ ÇüÅ ´ë·Î ³ªÅ¸³´Ù. ÀÌ·¸°Ô TD¸¦ Àç Á¤ÀÇ ÇÏ´Â ¹æ¹ýÀº ÈçÈ÷ ¹®¼ ³» ¸ðµç ¼Ã¼ÀÇ Å©±â¸¦ ÇÑ°¡Áö Å©±â·Î ÅëÀÏÇϱâ À§ÇÏ¿© ÀÚÁÖ »ç¿ëµÇ´Â ¹æ¹ýÀ¸·Î¼ ´ëºÎºÐÀÇ ¹®ÀÚµéÀÌ TDÅÂ±× ¾È¿¡ Æ÷ÇԵǾî ÀÖ´Ù´Â Á¡À» ÀÌ¿ëÇÑ °ÍÀÌ´Ù.
ÅÂ±× Àç Á¤ÀÇ ÀÓº£µðµå(Embede) ¹æ½Ä |
°á°úȸé |
<HTML>
<HEAD> <STYLE TYPE="text/css"> <!-- td {font-size: 30px;} --> </STYLE> </HEAD>
<BODY> <TABLE BORDER="1"> <TR> <TD>³ª¶óµðÀÚÀÎ</TD> </TR> </TABLE> </BODY>
</HTML> |
| ´Ü, ÀÌ·¸°Ô TDű׸¦ Àç Á¤ÀÇÇÑ °æ¿ì ÇöÀç ¹®¼ÀÇ ¸ðµç TDű׿¡ ´ëÇÏ¿© ¿µÇâÀ» ¹ÌÄ¡°Ô µÇ¹Ç·Î ¿¹¿Ü¸¦ Çã¿ëÇÒ ¼ö ÀÖ´Â ¹æ¹ýÀ» »ç¿ëÇÒ ¼ö ÀÖ´Ù. ÀÌ°ÍÀº TD¿Í °°Àº HTML ű׸¦ Àç Á¤ÀÇÇÏ´Â ´ë½Å CLASS(¿ì¸®¸»·Î ±»ÀÌ ¹ø¿ªÇÏÀÚ¸é ÁýÇÕ)¶ó´Â ÇüÅÂÀÇ ½ºÅ¸ÀϽÃÆ®¸¦ ¸¸µé¾î ³õ°í »ç¿ëÀÚ°¡ ÁöÁ¤ÇÏ´Â ´ë»ó¿¡ ´ëÇÏ¿©¸¸ ½ºÅ¸ÀϽÃÆ®¸¦ Àû¿ëÇØ ÁÖ´Â °ÍÀÌ´Ù. »ç¿ëÀÚ´Â ¹®¼ÀÇ <HEAD>~</HEAD>¿¡ CLASS ¶ó´Â °ÍÀ» Á¤ÀÇÇØ ³õ°í º»¹®ÀÇ Æ¯Á¤ ű׾ȿ¡ CLASS="***" À̶ó´Â Äڵ带 »ðÀÔÇÏ¿© ¹®¼ Àüü¿¡ ½ºÅ¸ÀÏÀÌ Àû¿ëµÇ´Â °ÍÀ» ¹æÁöÇÏ°í ÇÊ¿äÇÑ °÷¿¡¸¸ ½ºÅ¸ÀÏÀ» Àû¿ëÇÒ ¼ö ÀÖ°Ô µÈ´Ù.
CLASS Á¤ÀÇ ÀÓº£µðµå(Embede) ¹æ½Ä |
°á°úȸé |
<HTML>
<HEAD> <STYLE TYPE="text/css"> <!-- .title {font-size: 30px;} --> </STYLE> </HEAD>
<BODY> <TABLE BORDER="1"> <TR> <TD CLASS="title">³ª¶óµðÀÚÀÎ</TD> </TR> </TABLE> </BODY>
</HTML> |
| <HEAD>~</HEAD>¿¡¼ Á¤Àdz»¸° title À̶ó´Â CLASS À̸§Àº »ç¿ëÀÚ ÀÓÀÇ·Î ¸¸µé¾î³»´Â °ÍÀ¸·Î¼ ¿µ¹®, ¼ýÀÚ ¸¸ »ç¿ë °¡´ÉÇÏ¸ç ´ë¼Ò¹®ÀÚ¸¦ ±¸ºÐÇÏÁö ¾Ê°í ¶ç¾î¾²±â ÇÒ ¼ö ¾øÀ¸¸ç TD, TABLE µûÀ§ÀÇ HTML ÅÂ±×¿Í µ¿ÀÏÇÑ À̸§Àº »ç¿ëÇÒ ¼ö ¾ø´Ù. <HEAD>~</HEAD>¿¡¼ CLASS¸¦ Á¤ÀÇÇÏ´Â ¹æ¹ýÀº CLASSÀ̸§ ¾Õ¿¡ Á¡À» Âï¾î ÁÖ´Â °ÍÀ¸·Î¼ HTML ÅÂ±× Àç Á¤ÀÇ ¹æ½Ä°ú ±¸ºÐµÇµµ·Ï ÇÑ´Ù.
¸¸¾à ÇÑ°¡Áö ´ë»ó¿¡ ¼·Î Ãæµ¹ÇÏ´Â ÅÂ±× Àç Á¤ÀÇ ½ºÅ¸ÀÏ°ú CLASS Á¤ÀÇ ½ºÅ¸ÀÏÀÌ µ¿½Ã¿¡ Àû¿ëµÇ¾ú´Ù¸é CLASS ¹æ½ÄÀÇ ½ºÅ¸ÀϽÃÆ®°¡ ¿ì¼± Àû¿ëµÉ °ÍÀÌ´Ù.
¼Â°, ¸µÅ©(Link) ¹æ½Ä. ¿©·¯°³ÀÇ ¹®¼¿¡¼ »ç¿ë. ½ºÅ¸ÀϽÃÆ® Á¤ÀÇ ÆÄÀÏ(***.css)À» º°µµ·Î ¸¸µé¾î ³õ°í ¸ðµç ¹®¼¿¡¼ ***.cssÆÄÀÏÀ» ºÒ·¯¿À±â ÇÏ¿© »ç¿ëÇÏ´Â ¹æ½ÄÀ¸·Î À¥ ºê¶ó¿ìÀú´Â ¹®¼°¡ ·ÎµùµÉ ¶§ ¸µÅ©µÈ ***.css ÆÄÀÏÀ» »ç¿ëÀÚÀÇ »ùƲ¿¡ ÇÔ²² ³»·Á¹Þ±â ÇÑ´Ù. ÅÂ±× Àç Á¤ÀÇ ¹æ½Ä°ú CLASS ¹æ½ÄÀ¸·Î ½ºÅ¸ÀÏÀ» »çÀü Á¤ÀÇ ÇØ ³õÀ» ¼ö ÀÖ´Ù´Â °ÍÀº ÀÓº£µðµå(Embeded)¹æ½Ä°ú µ¿ÀÏÇÏ´Ù.
style.css ÆÄÀÏÀÇ ¼Ò½º ÄÚµå |
td {font-size: 12px;} /* td ű׸¦ Àç Á¤ÀÇ ÇÏ¿´À½ */ .title {font-size: 30px;} /* title À̶ó´Â À̸§À¸·Î CLASS ¸¦ Á¤ÀÇ ÇÏ¿´À½ */ |
¸µÅ©(Link) ¹æ½ÄÀ¸·Î ½ºÅ¸ÀÏÀ» Àû¿ëÇÑ ¿¹ |
°á°úȸé |
<HTML>
<HEAD> <LINK HREF="style.css" REL="stylesheet" TYPE="text/css"> </HEAD>
<BODY> <TABLE BORDER="1"> <TR> <TD CLASS="title">Á¦¸ñ</TD> </TR> <TR> <TD>³»¿ë</TD> </TR> </TABLE> </BODY>
</HTML> |
| style.cssÆÄÀÏ¿¡´Â TD¿¡ ´ëÇÑ ÅÂ±× Àç Á¤ÀÇ¿Í titleÀ̶ó´Â CLASS°¡ »çÀü Á¤ÀǵǾî ÀÖ´Ù. ÀÌ·¸°Ô ½ºÅ¸ÀϽÃÆ® Á¤ÀǷθ¸ ÀÌ·ç¾îÁø CSS¹®¼´Â HTML¹®¼¿Í ´Þ¶ó¼ À¥ ºê¶ó¿ìÀú°¡ Ãâ·ÂÇÏÁö ¾Ê°í HTML ¹®¼¸¦ Àå½ÄÇÏ´Â ¿ëµµ·Î¸¸ »ç¿ëµÈ´Ù. ¶ÇÇÑ CSS¹®¼´Â ¿ÀÁ÷ ½ºÅ¸ÀϽÃÆ®¿¡ ´ëÇÑ »çÀü Á¤ÀǸ¸ ÀÖÀ» »Ó ´Ù¸¥ ű׳ª ¸í·É¾î´Â ÇÊ¿äÄ¡ ¾Ê°í ÁÖ¼®ÀÌ ÇÊ¿äÇÑ °æ¿ì <!--...--> ´ë½Å /*...*/ À¸·Î ÁÖ¼®Ã³¸® ÇÒ ¼ö ÀÖ´Ù.
CSS¹®¼¸¦ HTML¹®¼¿¡ ¸µÅ©ÇÏ¿© Àû¿ëÇÏ´Â ¹æ¹ýÀº ¿¹Á¦¿Í °°ÀÌ ¹®¼ÀÇ <HEAD>~</HEAD>¿¡ <LINK HREF="style.css" REL="stylesheet" TYPE="text/css">¶ó°í Àû¾îÁÖ¾î style.cssÆÄÀÏÀ» ÇöÀçÀÇ ¹®¼¿¡ ¸µÅ©ÇÑ ´ÙÀ½ º»¹®ÀÎ <BODY>~</BODY>¿¡¼ ÇÊ¿äÇÑ ºÎºÐ¿¡ CLASS¸¦ Àû¿ë Çϱ⸸ ÇÏ¸é µÈ´Ù. CSS¹®¼ÀÇ ÆÄÀϸíÀº »ç¿ëÀÚ°¡ ÀÓÀÇ·Î Á¤ÇÏ´Â °ÍÀ¸·Î ¼ýÀÚ¿Í ¿µ¹®¸¸ »ç¿ë °¡´ÉÇÏ¸ç ´ë¼Ò¹®ÀÚ¸¦ ±¸ºÐÇÑ´Ù.
¸¸¾à ÇÑ°¡Áö ´ë»ó¿¡ ¼·Î Ãæµ¹ÇÏ´Â ¸µÅ©(Link) ½ºÅ¸ÀÏ°ú ÀÓº£µðµå(Embede) ½ºÅ¸ÀÏÀÌ µ¿½Ã¿¡ Àû¿ëµÇ¾ú´Ù¸é ÀÓº£µðµå(Embede) ¹æ½ÄÀÇ ½ºÅ¸ÀϽÃÆ®°¡ ¿ì¼± Àû¿ëµÉ °ÍÀÌ´Ù. |
|
ÀλýÀº ª½À´Ï´Ù.
±×·¯¹Ç·Î ´Ù¸¥ »ç¶÷ÀÌ ¿ä±¸ÇÏ´Â »îÀ» »ì¸é¼ ½Ã°£À» ³¶ºñÇؼ´Â ¾È µË´Ï´Ù.
µ·°ú ¸í¿¹¸¦ ¾òÁö ¸øÇÏ´õ¶óµµ ³¡±îÁö ÀÚ½ÅÀÇ ±æÀ» °íÁýÇϽʽÿÀ |
|
|