ÀÌ ÆäÀÌÁö¿¡ Æ÷ÇÔµÈ Á¤º¸´Â W3C ÀÇ HTML and Style Sheets Working Draft ¸¦ ±âÃÊ·Î ÀÛ¼ºµÇ¾ú½À´Ï´Ù. ÀÌ ¹®¼´Â ÀÛ¾÷ÁßÀÎ ¹®¼À̹ǷΠ¿©±â¿¡ Æ÷ÇÔµÈ Á¤º¸´Â ¾Æ¹«¶§³ª º¯°æµÉ ¼ö ÀÖ½À´Ï´Ù. ³íÀÇµÈ ¹æ¹ýÀ» Áö¿øÇÏ´Â ºê·Î¿ìÀú´Â ¸¹Áö ¾Ê½À´Ï´Ù.
Style Sheet¿Í HTMLÀ» ¿¬°á½ÃÅ°´Â ¸¹Àº ¹æ¹ýÀÌ Á¸ÀçÇϸç, °¢°¢ ÀåÁ¡°ú ´ÜÁ¡À» °¡Áö°í ÀÖ´Ù. »õ·Î¿î HTML ÅÂ±×¿Í ¼Ó¼ºÀÌ Style Sheet¸¦ HTML ¹®¼¿¡ ½±°Ô º´ÇÕÇÒ ¼ö ÀÖµµ·Ï µµÀԵǾú´Ù.
¿ÜºÎ Style Sheet°úÀÇ ¿¬°á
¿ÜºÎ style sheetÀº HTMLÀÇ LINK ű׸¦ ÅëÇØ HTML ¹®¼¿Í ¿¬°áµÉ ¼ö ÀÖ´Ù.
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<LINK REL=StyleSheet HREF="color-8b.css"
TYPE="text/css" TITLE="8-bit Color Style" MEDIA="screen, print">
<LINK REL="Alternate StyleSheet" HREF="color-24b.css"
TYPE="text/css" TITLE="24-bit Color Style" MEDIA="screen, print">
<LINK REL=StyleSheet HREF="aural.css" TYPE="text/css" MEDIA=aural>
<LINK> ű״ HTML ¹®¼¿¡¼ HEAD »çÀÌ¿¡ µÎ¾î¾ß ÇÑ´Ù. ¿É¼ÇÀÎ TYPE ¼Ó¼ºÀº MIME Çü½Ä--CSSÀÇ °æ¿ì text/css--À» ÁöÁ¤Çϴµ¥ »ç¿ëµÇ¸ç, ºê·Î¿ìÀú°¡ Áö¿øÇÏÁö ¸øÇÏ´Â Style Sheet Çü½ÄÀº ¹«½ÃÇÒ ¼ö ÀÖµµ·Ï ÇØÁØ´Ù. ¿É¼ÇÀÎ MEDIA ¼Ó¼ºÀº Style Sheet°¡ Àû¿ëµÇ¾î¾ßÇÏ´Â ¸Åü¸¦ ÁöÁ¤ÇÑ´Ù. °¡´ÉÇÑ °ªÀº ´ÙÀ½°ú °°´Ù.
- print, ÇÁ¸°ÅÍ Ãâ·ÂÀÎ °æ¿ì
- screen, ȸé Ãâ·ÂÀÎ °æ¿ì
- projection, ÇÁ·ÎÁ§ÅÍ Ãâ·ÂÀÎ °æ¿ì
- braille, Á¡ÀÚÃâ·Â ÀåÄ¡·Î Ãâ·ÂÇÏ´Â °æ¿ì
- aural, À½¼º Ãâ·ÂÀÎ °æ¿ì
- all, ¸ðµç ¸Åü¸¦ ÅëÇÑ Ãâ·ÂÀÎ °æ¿ì(³»Á¤Ä¡)
¿©·¯ ¸Åü¸¦ ÁöÁ¤ÇÒ ¶§¿¡´Â °¢ ¸Åü¸¦ ½°Ç¥·Î ºÐ¸®Çϰųª allÀ» »ç¿ëÇÑ´Ù
REL ¼Ó¼ºÀº HTML¹®¼¿Í ¿¬°áµÈ ÆÄÀÏ»çÀÌÀÇ °ü°è¸¦ Á¤ÀÇÇϴµ¥ »ç¿ëµÈ´Ù. REL=StyleSheetÀº ¿µ±¸ÀûÀÎ ½ºÅ¸ÀÏÀ̳ª ³»Á¤µÈ ½ºÅ¸ÀÏÀ» ÁöÁ¤ÇÏ´Â ¹Ý¸é REL="Alternate StyleSheet"Àº º¸Á¶ ½ºÅ¸ÀÏÀ» ÁöÁ¤ÇÑ´Ù. ¿¹ÀÇ Ã¹¹ø° <LINK>¿¡¼ ó·³ TITLE ¼Ó¼ºÀÌ ¾ø´Â °æ¿ì ¿µ±¸ÀûÀÎ ½ºÅ¸ÀÏ·Î Á¤ÀǵȴÙ.
³»Á¤µÈ ½ºÅ¸ÀÏÀº ¿¹¿¡¼ µÎ¹ø° <LINK>¿¡¼Ã³·³ ÀÚµ¿ÀûÀ¸·Î Àû¿ëµÇ´Â ½ºÅ¸ÀÏÀÌ´Ù. REL=StyleSheet°ú TITLE¸¦ ÇÔ²² »ç¿ëÇؼ ³»Á¤µÈ ½ºÅ¸ÀÏÀ» ÁöÁ¤ÇÑ´Ù.
º¸Á¶ ½ºÅ¸ÀÏÀº REL="Alternate StyleSheet"¸¦ ÀÌ¿ëÇؼ ÁöÁ¤ÇÑ´Ù. ¿¹¿¡¼ ¼¼¹ø° <LINK> ű״ º¸Á¶ ½ºÅ¸ÀÏÀ» ÁöÁ¤ÇÑ´Ù. º¸Á¶ ½ºÅ¸ÀÏÀº »ç¿ëÀÚ°¡ ³»Á¤µÈ ½ºÅ¸ÀÏÀ» ´ëÄ¡ÇϱâÀ§ÇØ ¼±ÅÃÇÒ ¼ö ÀÖ´Ù.
¶ÇÇÑ ÇϳªÀÇ ½ºÅ¸ÀÏÀÌ ¿©·¯ Style Sheet¸¦ ÅëÇØ ÁÖ¾îÁú ¼öµµ ÀÖ´Ù.
<LINK REL=StyleSheet HREF="basics.css" TITLE="Contemporary">
<LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary">
<LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary">
ÀÌ ¿¹¿¡¼ ¼¼°³ÀÇ Style-Sheet°¡ ³»Á¤µÈ ½ºÅ¸ÀϷμ Àû¿ëµÉ ÇϳªÀÇ "Contemporary"·Î °áÇյȴÙ. ¿©·¯°³ÀÇ Style Sheet¸¦ ÇϳªÀÇ ½ºÅ¸ÀÏ·Î °áÇÕÇϱâÀ§ÇØ, °¢°¢ÀÇ Style Sheet¿¡ µ¿ÀÏÇÑ TITLEÀ» »ç¿ëÇØ¾ß ÇÑ´Ù.
¿ÜºÎ Style Sheet´Â ½ºÅ¸ÀÏÀÌ ¸¹Àº ÆäÀÌÁö¿¡ Àû¿ëµÉ ¶§ ÀÌ»óÀûÀÌ´Ù. ¿ÜºÎ ½ºÅ¸ÀÏ ½¬Æ®·Î ÀúÀÚ´Â °£´ÜÈ÷ ÇÑ ÆÄÀÏÀ» º¯°æÇÔÀ¸·Î¼ Àü »çÀÌÆ®ÀÇ ¿Ü°üÀ» º¯°æÇÒ ¼ö ÀÖ´Ù. »Ó¸¸¾Æ´Ï¶ó ´ëºÎºÐÀÇ ºê·Î¿ìÀú´Â ¿ÜºÎ ½ºÅ¸ÀÏ ½¬Æ®¸¦ ij½¬¿¡ º¸°üÇϹǷΠÀÏ´Ü ½ºÅ¸ÀÏ ½¬Æ®°¡ ij½¬¿¡ º¸°üµÇ¸é ÆäÀÌÁö¸¦ Ç¥½ÃÇϴµ¥ ¹ß»ýÇÏ´Â Áö¿¬À» ÇÇÇÒ ¼ö ÀÖ´Ù.
Microsoft Internet Explorer 3 Àº ¿ÜºÎ ½ºÅ¸ÀÏ ½¬Æ®¿¡¼ ¹è°æ ±×¸²À» Áö¿øÇÏÁö ¾Ê´Â´Ù. ÀÌ·¯ÇÑ ¹ö±×°¡ ÀÖÀ¸¹Ç·Î ÀúÀÚ´Â ¹è°æ±×¸²À» »ç¿ëÇϱâÀ§ÇØ ³¢¿ö³Ö±â(embedding)³ª ÀζóÀÎ(inlining) ½ºÅ¸ÀÏ ¶Ç´Â BODY ű×ÀÇ BACKGROUND ¼Ó¼º°ú °°Àº ´Ù¸¥ ¹æ¹ýÀ» »ç¿ëÇÒ °ÍÀ» ±Ç°íÇÑ´Ù.
Style Sheet ³¢¿ö³Ö±â(Embedding a Style Sheet)
Style Sheet´Â STYLE ű׷Π¹®¼ ³»¿¡ ³¢¿ö³ÖÀ» ¼ö ÀÖ´Ù.
<STYLE TYPE="text/css" MEDIA=screen>
<!--
BODY { background: url(foo.gif) red; color: black }
P EM { background: yellow; color: black }
.note { margin-left: 5em; margin-right: 5em }
-->
</STYLE>
STYLE ű״ ¹®¼³»¿¡¼ HEAD ű׻çÀÌ¿¡ ¿Í¾ß ÇÑ´Ù. ¿É¼ÇÀÎ TYPE ¼Ó¼ºÀº LINK ű׿¡¼¿Í °°Àº ±â´ÉÀ¸·Î MIME Çü½ÄÀ» ÁöÁ¤Çϴµ¥ »ç¿ëµÈ´Ù. µû¶ó¼ À¯»çÇÏ°Ô TITLE°ú MEDIA ¼Ó¼º ¶ÇÇÑ STYLE ű׳»¿¡¼ ÁöÁ¤µÉ ¼ö ÀÖ´Ù.
STYLE ű׸¦ ÀνÄÇÏÁö ¸øÇÏ´Â ¿À·¡µÈ ºê·Î¿ìÀúÀÇ °æ¿ì STYLE űװ¡ BODY ÅÂ±× »çÀÌ¿¡ ¿Â´Ù¸é STYLE ű×ÀÇ ³»¿ëÀ» º¸¿©ÁÖ°Ô µÇ¸ç °á°úÀûÀ¸·Î Style Sheet¸¦ »ç¿ëÀÚ°¡ º¸°ÔµÈ´Ù. ÀÌ°ÍÀ» ¸·±âÀ§ÇØ STYLE ű×ÀÇ ³»¿ëÀº À§ÀÇ ¿¹¿¡¼ ó·³ SGML ÁÖ¼®(<!-- comment -->)¿¡ Æ÷ÇÔ½ÃÄÑ¾ß ÇÑ´Ù.
Style Sheet ³¢¿ö³Ö±â´Â ÇϳªÀÇ ¹®¼°¡ À¯ÀÏÇÑ ½ºÅ¸ÀÏÀ» °¡Áú¶§ »ç¿ëµÈ´Ù. µ¿ÀÏÇÑ Style Sheet°¡ ¿©·¯ ¹®¼¿¡¼ »ç¿ëµÈ´Ù¸é, ±×¶§ ¿ÜºÎ style sheet¸¦ »ç¿ëÇÏ´Â °ÍÀÌ Àû´çÇÏ´Ù.
½ºÅ¸ÀÏ ½¬Æ® °¡Á®¿À±â(Importing a Style Sheet)
Style Sheet´Â CSSÀÇ @import ¹®À¸·Î ºÒ·¯¿Ã ¼ö ÀÖ´Ù. @import ¹®Àº CSS ÆÄÀÏÀ̳ª STYLE ÅÂ±× ³»¿¡¼ »ç¿ëµÈ´Ù.
<STYLE TYPE="text/css" MEDIA="screen, projection">
<!--
@import url(http://www.htmlhelp.com/style.css);
@import url(/stylesheets/punk.css);
DT { background: yellow; color: black }
-->
</STYLE>
´Ù¸¥ CSS ±ÔÄ¢ÀÌ STYLE ű׳»¿¡ Æ÷Ç﵃ ¼ö ÀÖÁö¸¸ @import ¹®Àº Style SheetÀÇ ½ÃÀۺο¡ ÀÖ¾î¾ß ÇÑ´Ù´Â °Í¿¡ ÁÖÀÇÇϱ⠹ٶõ´Ù. Style Sheet³»¿¡ ÁöÁ¤µÈ ÀÓÀÇÀÇ ±ÔÄ¢Àº ºÒ·¯¿Â ½ºÅ¸ÀÏ ½¬Æ®³»ÀÇ µ¿ÀÏÇÑ ±ÔÄ¢º¸´Ù ¿ì¼±ÇÑ´Ù. ¿¹¸¦µé¾î ºÒ·¯¿Â ½ºÅ¸ÀÏ ½¬Æ®Áß Çϳª°¡ DT { background: aqua }¸¦ Æ÷ÇÔÇÒÁö¶óµµ DT ű״ ³ë¶õ ¹è°æ»öÀ» °®´Â´Ù.
Style SheetÀ» ºÒ·¯¿À´Â ¼ø¼´Â À̵éÀ» ¾î¶»°Ô Á¾¼Ó½Ãų °ÍÀΰ¡¸¦ °áÁ¤Çϴµ¥ Áß¿äÇÏ´Ù. À§ÀÇ ¿¹¿¡¼ style.css°¡ STRONG ű׸¦ Àû»öÀ¸·Î º¸¿©Áöµµ·Ï ÁöÁ¤ÇÏ°í ÀÖ°í punk.css°¡ STRONG ű׸¦ ³ë¶õ»öÀ¸·Î º¸¿©Áöµµ·Ï ÁöÁ¤ÇÏ°í ÀÖ´Ù¸é ³ªÁß¿¡ ºÒ·¯¿Â ±ÔÄ¢ÀÇ ¿ì¼±¼øÀ§°¡ ³ôÀ¸¹Ç·Î STRONG ű״ ³ë¶õ»öÀ¸·Î º¸¿©Áú °ÍÀÌ´Ù.
ºÒ·¯¿Â ½ºÅ¸ÀÏ ½¬Æ®´Â ½ºÅ¸ÀÏ ½¬Æ®¸¦ ¸ðµâÈÇÒ ¶§ À¯¿ëÇÏ´Ù. ¿¹¸¦µé¾î ¾î¶² »çÀÌÆ®´Â »ç¿ëµÈ ¼±ÅÃÀÚ¿¡ÀÇÇØ ½ºÅ¸ÀÏ ½¬Æ®¸¦ ºÐ¸®ÇÑ´Ù. BODY, P, H1, H2¿Í °°Àº ±âº»ÀûÀΠű׿¡´ëÇÑ ±ÔÄ¢À» Á¤ÀÇÇÑ simple.cssÀÖ°í, CODE, BLOCKQUOTE, DFN°ú °°ÀÌ Ãß°¡ÀûÀΠű׸¦ Á¤ÀÇÇÑ extra.css¶ó´Â ½ºÅ¸ÀÏ ½¬Æ®°¡ ÀÖ´Ù. ¶ÇÇÑ table ű׿¡´ëÇÑ ±ÔÄ¢À» Á¤ÀÇÇϴµ¥ »ç¿ëµÉ table.css¶ó´Â ½ºÅ¸ÀÏ ½¬Æ®°¡ ÀÖ´Ù. ÀÌµé ¼¼°³ÀÇ ½ºÅ¸ÀÏ ½¬Æ®´Â @import ¹®À¸·Î ÇÊ¿ä½Ã HTML ¹®¼³»¿¡ Æ÷ÇÔ½Ãų ¼ö ÀÖ´Ù. ÀÌ ¼¼°³ÀÇ ½ºÅ¸ÀÏÀº LINK ű׸¦ ÅëÇØ °áÇÕµÉ ¼öµµ ÀÖ´Ù.
½ºÅ¸ÀÏÀÇ Áï½Ãó¸®(Inlining Style)
½ºÅ¸ÀÏÀº STYLE ¼Ó¼ºÀ» »ç¿ëÇؼ Áï½Ã ó¸®µÉ ¼ö ÀÖ´Ù. STYLE ¼Ó¼ºÀº ÀÓÀÇÀÇ BODY ű×(BODY ÅÂ±× ÀÚ½ÅÀ» Æ÷ÇÔÇؼ)¿¡ Àû¿ëµÉ ¼ö ÀÖ´Ù. ÀÌ ¼Ó¼ºÀº ¼Ó¼º °ªÀ¸·Î¼ ÀÓÀÇ °¹¼öÀÇ CSS ¼±¾ðÀ» ÃëÇÑ´Ù. ¿©±â¼ °¢°¢ÀÇ ¼±¾ðÀº ¼¼¹ÌÄܷп¡ÀÇÇØ ºÐ¸®µÈ´Ù. ¿¹´Â ´ÙÀ½°ú °°´Ù.
<P STYLE="color: red; font-family: 'New Century Schoolbook', serif">
New Century Schoolbook ±Û²ÃÀ» »ç¿ëÇÒ ¼ö ÀÖ´Ù¸é
ÀÌ ¹®´ÜÀº Àû»öÀÇ New Century Schoolbook ±Û²Ã·Î Ç¥½ÃµÈ´Ù.</P>
Å« µû¿ÈÇ¥´Â ½ºÅ¸ÀÏÀ» ¼±¾ðÇϴµ¥ »ç¿ëµÇ¹Ç·Î STYLE ¼Ó¼º³»¿¡¼ New Century Schoolbook¸¦ ÀοëÇϴµ¥ ÀÛÀº µû¿ÈÇ¥¸¦ »ç¿ëÇÏ¿´´Ù.
½ºÅ¸ÀÏÀÇ Áï½Ã 󸮴 ÇÁ¸®Á¨Å×À̼ǰú ¹®ÀåÀ» È¥ÇÕÇؼ »ç¿ëÇÔÀ¸·Î¼ ½ºÅ¸ÀÏ ½¬Æ®ÀÇ ¸¹Àº ÀåÁ¡À» ÀҴ´Ù. ÀÌ ¹æ¹ýÀº ¾î¶² ½ºÅ¸ÀÏÀÌ ¾î¶² ű׿¡ ÇÑ ¹ø¸¸ Àû¿ëµÇ´Â °æ¿ìó·³ µå¹°°Ô »ç¿ëÇØ¾ß ÇÑ´Ù.
CLASS ¼Ó¼º
CLASS ¼Ó¼ºÀº ƯÁ¤ ű׿¡ ¼ÓÇÑ ½ºÅ¸ÀÏ Å©·¡½º¸¦ ÁöÁ¤Çϴµ¥ »ç¿ëµÈ´Ù. ¿¹¸¦µé¾î ´ÙÀ½ÀÇ ½ºÅ¸ÀÏ ½¬Æ®´Â punk¿Í warning À̶ó´Â Å©·¡½º¸¦ »ý¼ºÇϰԵȴÙ.
.punk { color: lime; background: #ff80c0 }
P.warning { font-weight: bolder; color: red }
À̵é Å©·¹½º´Â CLASS ¼Ó¼ºÀ¸·Î HTML ³»¿¡¼ ÂüÁ¶µÉ ¼ö ÀÖ´Ù.
<H1 CLASS=punk>µ¶ÀÚÀûÀÎ ±â´ÉÈ®Àå</H1>
<P CLASS=warning>¸¹Àº µ¶ÀÚÀûÀÎ ±â´ÉÈ®ÀåÀº ÀÌ °ÍÀ» Áö¿øÇÏ´Â ºê·Î¿ìÀúÀ̵ç
±×·¸Áö ¸øÇÑ ºê·Î¿ìÀúÀÌµç ºÎÁ¤ÀûÀÎ È¿°ú¸¦ °¡Áú ¼ö ÀÖ´Ù.
ÀÌ ¿¹¿¡¼ punk Å©·¡½º´Â ½ºÅ¸ÀÏ ½¬Æ®³»¿¡ punk Å©·¡½º¿Í ¿¬°üµÈ HTML ű׸¦ °¡Áö°í ÀÖÁö ¾ÊÀ¸¹Ç·Î ÀÓÀÇÀÇ BODY ű׿¡ Àû¿ëµÉ ¼ö ÀÖ´Ù. À§¿¡¼ ÁÖ¾îÁø ½ºÅ¸ÀÏ ½¬Æ®¸¦ »ç¿ëÇÑ´Ù¸é warning Å©·¡½º´Â ´ÜÁö P ű׿¡¸¸ Àû¿ëµÉ ¼ö ÀÖ´Ù.
Å©·¡½ºÀÇ ¿Ü°üÀÌ ¾Æ´Ï¸® ±â´É¿¡µû¶ó Å©·¡½ºÀÇ À̸§À» ºÙÀÌ´Â °ÍÀº ÁÁÀº ½À°üÀÌ´Ù. À§ÀÇ ¿¹¿¡¼ warning Å©·¡½º´Â red¶ó°í À̸§ ºÙÀÏ ¼öµµ ÀÖÁö¸¸ ÀÌ·¯ÇÑ À̸§Àº, Å©·¡½ºÀÇ ½ºÅ¸ÀÏÀ» ´Ù¸¥ »öÀ¸·Î º¯°æÇϰųª À½¼ºÀνĿ¡ »ç¿ëÇϱâÀ§ÇØ À½¼º ½ºÆ®ÀÏÀ» Á¤ÀÇÇÏ±æ ¿øÇÏ´Â °æ¿ì, Àǹ̰¡ ¾ø¾îÁø´Ù.
Å©·¡½º´Â HTML ¹®¼³»¿¡ ±¸Á¶ÀûÀ¸·Î µ¿ÀÏÇÑ ºÎºÐ¿¡´ëÇØ ¼·Î ´Ù¸¥ ½ºÅ¸ÀÏÀ» Àû¿ëÇÏ´Â °¡Àå È¿°úÀûÀÎ ¹æ¹ýÀÌ´Ù. ¿¹¸¦µé¾î ÀÌ ÆäÀÌÁö´Â CSS ÄÚµå¿Í HTML Äڵ忡´ëÇØ ¼·Î´Ù¸¥ ½ºÅ¸ÀÏÀ» ÁÖ´Â Å©·¡½º¸¦ »ç¿ëÇÏ°í ÀÖ´Ù.
ID ¼Ó¼º
ID ¼Ó¼ºÀº ¾î¶² ű׿¡´ëÇØ µ¶Æ¯ÇÑ ½ºÅ¸ÀÏÀ» Á¤ÀÇÇϴµ¥ »ç¿ëµÈ´Ù.
#wdg97 { font-size: large }
°ú °°Àº CSS ±ÔÄ¢Àº ID ¼Ó¼ºÀ» ÅëÇØ HTML ³»¿¡ Àû¿ëµÉ ¼ö ÀÖ´Ù.
<P ID=wdg97>DoAÀÇ ³îÅÍ¿¡ ¿Â°É ȯ¿µÇÑ´Ù !!!</P>
°¢°¢ÀÇ ID ¼Ó¼ºÀº ÇØ´ç ¹®¼¸¦ ÅëÇØ À¯ÀÏÇÑ °ªÀ» °¡Á®¾ßÇÑ´Ù. ÀÌ °ªÀº Ãʱ⠹®ÀÚµÚ¿¡ ¹®ÀÚ, ¼ýÀÚ, ÇÏÀÌÇÂ, ¸¶Ä§Ç¥µîÀÌ À̾îÁ®¾ß ÇÑ´Ù. ¹®ÀÚ´Â A-Z¿Í a-z±îÁö·Î Á¦ÇѵȴÙ.
½ºÅ¸ÀÏÀ» Àû¿ëÇϱâÀ§ÇØ ID¸¦ »ç¿ëÇÏ´Â °ÍÀº ¹Ù¶÷Á÷ÇÏÁö ¸øÇÏ´Ù. ¿Ö³ÄÇϸé ÀÌ ½ºÅ¸ÀÏÀº ¹®¼³»¿¡¼ Çѹø¸¸ Àû¿ëµÇ±â ¶§¹®ÀÌ´Ù.
SPAN ű×
SPAN ű״ ÀúÀÚ°¡ ÷ºÎÇÒ ¼ö ¾ø´Â ½ºÅ¸ÀÏÀ» ±¸Á¶Àû HTML ű׿¡ ºÎ¿©ÇÒ ¼ö ÀÖµµÇϱâÀ§ÇØ HTML¿¡ µµÀԵǾú´Ù. SPANÀº ½ºÅ¸ÀÏ ½¬Æ®³»¿¡¼ ¼±ÅÃÀڷμ »ç¿ëµÉ ¼ö ÀÖÀ¸¸ç, STYLE, CLASS, ID ¼Ó¼ºÀ» Çã¿ëÇÑ´Ù.
SPANÀº Æò¹® ű×(text-level element)À̹ǷΠHTML ³»¿¡¼ EM, STRONG°ú °°Àº ű׷μ »ç¿ëµÈ´Ù. EM, STRONG ű׿ÍÀÇ ÁÖµÈ Â÷ÀÌÁ¡Àº EM, STRONG űװ¡ ±¸Á¶Àû Àǹ̸¦ °¡Áö°í ÀÖ´Â ¹Ý¸í¿¡ SPAN´Â ±×·¯ÇÑ Àǹ̸¦ °¡Áö°í ÀÖÁö ¾Ê´Ù. ÀÌ°ÍÀº ¼øÀüÈ÷ ½ºÅ¸ÀÏÀ» Àû¿ëÇϱâÀ§Çؼ Á¸ÀçÇÏ¸ç µû¶ó¼ ½ºÅ¸ÀÏ ½¬Æ®¸¦ »ç¿ëÇÒ ¼ö ¾øÀ» ¶§¿¡´Â ¾Æ¹«·± È¿°ú¸¦ °®Áö ¸øÇÑ´Ù.
SPANÀÇ °£´ÜÇÑ ¿¹´Â ´ÙÀ½°ú °°´Ù.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Experimental 19960712//EN">
<HTML>
<HEAD>
<TITLE>Example of SPAN</TITLE>
<STYLE TYPE="text/css" MEDIA="screen, print, projection">
<!--
.firstwords { font-variant: small-caps }-->
</STYLE>
</HEAD>
<BODY>
<P>¹®´ÜÀÇ <SPAN CLASS=firstwords>ù ¸î´Ü¾î</SPAN>´Â
ÀÛÀº ´ë¹®ÀÚÀϼö ÀÖ´Ù. ½ºÅ¸ÀÏÀº <SPAN STYLE="font-family: Arial">Arial</SPAN>
¿Í °°ÀÌ ´Ü¾îÀÇ ½ºÅ¸ÀÏ·Î º¯°æÇϱâÀ§ÇØ ÀζóÀ뵃 ¼ö ÀÖ´Ù.</P>
DIV ű×
DIV ű״ ±â´ÉÀûÀ¸·Î SPAN ÅÂ±×¿Í À¯»çÇϸç, ÁÖµÈ Â÷ÀÌ´Â DIV ( "division"ÀÇ Ãà¾à¾î) ű״ ºí·°Å±׶ó´Â Á¡ÀÌ´Ù. DIV ű״ ¹®´Ü, Á¦¸ñ, Ç¥, ½ÉÁö¾î ´Ù¸¥ DIV ű׷ΠÆ÷ÇÔÇÒ ¼ö ÀÖ´Ù. ÀÌ·¯ÇÑ Æ¯Â¡À¸·Î Àå, ¿ä¾à, °¢ÁÖ, ³ëÆ®¿Í °°Àº ¼·Î ´Ù¸¥ ÄÁÅ×À̳ʸ¦ ¸¸µå´Â °æ¿ì DIV űװ¡ ¾ÆÁÖ ÀÌ»óÀûÀÌ´Ù.
<DIV CLASS=note>
<H1>Divisions</H1>
<P>ÀÌ DIV ű״ HTML 3.2¿¡¼ Á¤ÀǵǾúÁö¸¸ HTML 3.2¿¡¼´Â ´ÜÁö ALIGN
¼Ó¼º¸¸ÀÌ Çã¿ëµÈ´Ù. HTML, CougarÀÇ ´ÙÀ½ ¹öÀüÀº ´Ù¸¥ °ÍÁß¿¡¼ CLASS, STYLE,
ID ¼Ó¼ºÀ» Ãß°¡ÇÒ °ÍÀÌ´Ù.</P>
<P>DIV ű״ ´Ù¸¥ ºí·° ű׸¦ Æ÷ÇÔÇϹǷΠDIV ű״ ÀÌ ³ëÆ®¿Í °°ÀÌ
¸¹Àº ³»¿ëÀ» °®´Â ºÎºÐÀ» »ý¼ºÇϴµ¥ À¯¿ëÇÏ´Ù.
<P>ÀÌ Å±״ ´Ý¾ÆÁÖ¾î¾ß ÇÑ´Ù.</P>
</DIV>
Ÿ´ç¼º¿¡´ëÇÑ ³ëÆ®
¸î¸î CSS Çü½Ä ¹®¼µé¸¸ÀÌ HTML 3.2 (Wilbur) ¼öÁØ¿¡¼ À¯È¿ÇÒ °ÍÀÌ´Ù. HTML 3.2´Â SPAN ű׸¦ Á¤ÀÇÇÏÁö ¾Ê°í ÀÖÀ¸¸ç CLASS, STYLE, ID ¼Ó¼ºÀ» Á¤ÀÇÇÏÁö ¾Ê°í ÀÖ´Ù. ½ÉÁö¾î´Â LINK¿Í STYLE ű׿¡´ëÇÑ TYPE°ú MEDIA ¼Ó¼ºÀÇ Áö¿øµµ ¹Ì¾àÇÏ´Ù.
ÀÌ·¯ÇÑ ½ºÅ¸ÀÏ°ú ¿¬°üµÈ ÅÂ±×¿Í ¼Ó¼ºÀÌ CSS¸¦ Áö¿øÇÏÁö ¸øÇÏ´Â ºê·Î¿ìÀú¿¡ À¯ÇØÇÑ °ÍÀº ¾Æ´Ï´Ù(´Ü ºê·Î¿ìÀú°¡ È®½ÇÈ÷ CSS¸¦ ¹«½ÃÇÒ ¼ö ÀÖ¾î¾ß ÇÑ´Ù). ÀÌ·¯ÇÑ ÅÂ±×¿Í ¼Ó¼ºÀ» »ç¿ëÇÏ´Â ¹®¼µéÀº Cougar DTD ÀÇ °æ¿ì¿¡´Â À¯È¿ÇÏ´Ù. ¸¹Àº À¥ ÆäÀÌÁöÀÇ Å¸´ç¼ºÀ» °Ë»çÇÏ´Â À¥ ÆäÀÌÁö °Ë»ç±â(validators)µéÀÌ Cougar¸¦ Áö¿øÇÏÁö ¾Ê´Â ¹Ý¸é WebTechs Validation Service ´Â À̸¦ Áö¿øÇÑ´Ù.
MEDIA ¼Ó¼ºÀº Cougar¿¡ ÃÖ±Ù Ãß°¡µÇ¾úÁö¸¸ WebTechs¿¡ÀÇÇØ »ç¿ëµÇ´Â Cougar DTD¿¡¼´Â ¾ÆÁ÷ ¹Ý¿µÇÏÁö ¸øÇÏ°í ÀÖ´Ù.