W3C7 HTML ¹®¼­ÀÇ °øÅë ±¸Á¶Trio ȨÆäÀÌÁö
¸ñÂ÷
  1. HTML ¹®¼­ÀÇ ±¸Á¶ ¼³¸í
  2. HTML ¹öÀü Á¤º¸
  3. HTML ¿¤·¹¸àÆ®
  4. ¹®¼­ ¸Ó¸®±Û(head)
    1. HEAD ¿¤·¹¸àÆ®
    2. TITLE ¿¤·¹¸àÆ®
    3. title ¾ÖÆ®¸®ºäÆ®
    4. ¸ÞŸµ¥¾ÆÅÍ(meta data)
  5. ¹®¼­ º»Ã¼(body)
    1. BODY ¿¤·¹¸àÆ®
    2. ¿¤·¹¸àÆ® ÁöÁ¤ÀÚ: id, class ¾ÖÆ®¸®ºäÆ®
    3. ºí·°·¹º§(block-level)°ú ÀζóÀÎ(inline) ¿¤·¹¸àÆ®
    4. ±¸·ì ¿¤·¹¸àÆ®: DIV, SPAN ¿¤·¹¸àÆ®
    5. Çìµù(heading): H1, H2, H3, H4, H5, H6 ¿¤·¹¸àÆ®
    6. ADDRESS ¿¤·¹¸àÆ®

7.1 HTML ¹®¼­ÀÇ ±¸Á¶ ¼³¸í

HTML 4.0 ¹®¼­´Â ´ÙÀ½ÀÇ 3 ºÎºÐÀ¸·Î ±¸¼ºµÇ¾îÀÖ´Ù.

  1. HTML ¹öÀü Á¤º¸ ÁÙ,
  2. ¸Ó¸®±Û ¼±¾ð (HEAD ¿¤·¹¸àÆ®),
  3. ½ÇÁ¦ÀûÀÎ ¹®¼­ÀÇ ³»¿ëÀ» °®´Â º»Ã¼(body)·Î BODY ¶Ç´Â FRAMESET ¿¤·¹¸àÆ®¿¡ ¼³¸í.

°ø°£(°ø°£ ±ÛÀÚ, »õ ÁÙ, ÅÇ°ú ÄÚ¸àÆ®)´Â °¢ Ç׸ñ ¾Õ, µÚ¿¡ ¿Ã ¼ö ÀÖ´Ù. Ç׸ñ 2¿Í 3Àº HTML ¿¤·¹¸àÆ®¿¡ Á¤ÀÇ µÊ.

°£´ÜÇÑ HTML ¹®¼­ÀÇ ¿¹Á¦:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
  "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
  <HEAD>
     <TITLE>³ªÀÇ Ã¹ HTML ¹®¼­</TITLE>
  </HEAD>
  <BODY>
     <P>¿©·¯ºÐ ¾È³çÇϼ¼¿ä !
  </BODY>
</HTML>

7.2 HTML ¹öÀü Á¤º¸

HTML ¹®¼­¿¡´Â ±× ¹®¼­¿¡ »ç¿ëÇÑ HTMLÀÇ ¹öÀü Á¤º¸°¡ ±âÀç µÇ¾îÀÖ´Ù. ¹®¼­ ŸÀÔ ¼±¾ðÀº ±× ¹®¼­ÀÇ ¹®¼­ ŸÀÔ Á¤ÀÇ (DTD)ÀÇ À̸§À¸·Î Ç¥½ÃÇÑ´Ù[ISO8879 ÂüÁ¶).

HTML 4.0Àº ¼¼ °¡Áö DTD¸¦ Á¤ÀÇÇϹǷΠÁ¦ÀÛÀÚ´Â ´ÙÀ½ ¹®¼­ ŸÀÔ ¼±¾ðµé Áß Çϳª¸¦ ¹®¼­¿¡ Æ÷ÇÔ ½ÃÄѾßÇÑ´Ù. DTDµé´Â ±×µéÀÌ Áö¿øÇÏ´Â ¿¤·¹¸ÞÆ®¿¡ µû¶ó ´Ù¸£´Ù.

°¢ ¹®¼­ ŸÀÔ ¼±¾ðÀÇ URI´Â DTD¿Í ÇÊ¿äÇÑ ¿£Æ¼Æ¼(entity) ¼¼Æ®¸¦ »ç¿ëµµ±¸°¡ ´Ù¿î·Îµå ÇÒ ¼ö ÀÖµµ·Ï ÇÏ¿´´Ù. ´ÙÀ½ÀÇ URIµéÀº W3C°¡ Áö¿øÇÏ´Â HTML 4.0¸¦ À§ÇÑ DTDµé°ú ¿£Æ¼Æ¼ ¼¼Æ®¸¦ ÂüÁ¶ÇÑ´Ù.

°øÅëÀû ÁöÁ¤ÀÚ(public identifier)¿Í È­ÀÏµé »çÀÌÀÇ °áÇÕÀ» À§ÇÏ¿© SGML °³¹æ Äܼҽÿò(SGML Open Consortium: [SGMLOPEN] ÂüÁ¶]ÀÇ Ãßõ ¾ç½Ä¿¡ µû¶ó īŸ·Î±×(catalog) È­Àϸ¦ »ç¿ëÇÑ´Ù. HTML 4.0 īŸ·Î±× È­ÀÏ ¿¹Á¦Àº SGML ÂüÁ¶ Á¤º¸ ½ÃÀÛ ºÎºÐ¿¡ Æ÷ÇÔ½ÃŲ´Ù. Á¦ÀÏ µÚ µÎÀÚ´Â DTDÀÇ ¾ð¾î¸¦ ³ªÅ¸ ³»´Âµ¥, HTML¿¡¼­ Ç×»ó ¿µ¾î ("EN")ÀÌ´Ù.

7.3 HTML ¿¤·¹¸àÆ®

<!ENTITY % html.content "HEAD, BODY">

<!ELEMENT HTML O O (%html.content;)    -- ¹®¼­ ±âÃÊ(root) ¿¤·¹¸àÆ® -->
<!ATTLIST HTML
 %i18n;                               -- ¾ð¾î(lang), ±ÛÀÚ ¹æÇâ(dir) --
>

½ÃÀÛű×: ¼±ÅÃÀû, Á¾·áű×: ¼±ÅÃÀû

¾ÖÆ®¸®ºäÆ®ÀÇ Á¤ÀÇ

version = cdata [´ë¼Ò¹®ÀÚ Á߸³: CN]
ºÒ·®ÇÑ °ÍÀÌ´Ù. ÀÌ ¾ÖÆ®¸®ºäÆ®ÀÇ °ªÀº ¾î¶² HTML DTD ¹öÀüÀÌ ÇöÀçÀÇ ¹®¼­¸¦ Áö¹èÇϴ°¡¸¦ ³ªÅ¸³½´Ù. ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ¹®¼­ ŸÀÔ Á¤ÀÇ¿¡ Á¦½Ã µÈ ¹öÀü Á¤º¸¸¦ µû¸¦ ÇÊ¿ä°¡ ¾øÀ¸¹Ç·Î ºÒ·®ÇÑ °ÍÀ¸·Î µÇ¾ú´Ù.
´Ù¸¥ °÷¿¡¼­ Á¤ÀÇ µÈ ¾ÖÆ®¸®ºäÆ®

¹®¼­ ŸÀÔ Á¤ÀÇ ´ÙÀ½ ³ª¸ÓÁö HTML ¹®¼­¿¡´Â HTML ¿¤·¹¸àÆ®¸¦ °®´Â´Ù.

±×·¡¼­ ÀüÇüÀûÀÎ HTML ¹®¼­´Â ´ÙÀ½ ±¸Á¶¸¦ °®´Â´Ù.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
    "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
 ... head, body, µîÀÌ ÀÌ°÷¿¡ ¿Â´Ù...
</HTML>

7.4 ¹®¼­ ¸Ó¸®±Û(head)

7.4.1 ¸Ó¸®±Û(HEAD) ¿¤·¹¸àÆ®

<!-- %head.misc; ¾Õ¿¡¼­ "SCRIPT | STYLE | META | LINK | OBJECT"¿¡ Á¤ÀÇ -->

<!ENTITY % head.content "TITLE & BASE?">
<!ELEMENT HEAD O O (%head.content;) +(%head.misc;) -- ¹®¼­ÀÇ ¸Ó¸®±Û -->
<!ATTLIST HEAD
 %i18n;                    -- lang(¾ð¾î), dir(±ÛÀÚ ¹æÇâ) --
 profile  %URI;  #IMPLIED  -- ¸Þµð¾Æ Á¤º¸ÀÇ ¸í¸í µÈ »çÀü --
>

½ÃÀÛű×: ¼±ÅÃÀû, Á¾·áű×: ¼±ÅÃÀû

¾ÖÆ®¸®ºäÆ®ÀÇ Á¤ÀÇ

profile = uri [´ë¼Ò¹®ÀÚ Å¸ÀÔ ÂüÁ¶: CT]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â Çϳª ȤÀº º¹¼öÀÇ ¸ÞŸµ¥ÀÌÅÍ ÇÁ·ÎÈ­ÀÏ(profile)ÀÇ À§Ä¡¸¦ ³ªÅ¸ ³»¸ç °ø°£À¸·Î ºÐ¸®µÈ´Ù. ÀÌ ±Ô°Ý¿¡¼­´Â ù¹ø° URI ¸¸ÀÌ Áß¿äÇÑ Àǹ̸¦ °¡Áü¿¡µµ ºÒ±¸ÇÏ°í, »ç¿ëµµ±¸´Â Ãß°¡ÀûÀÎ »çÇ×µµ ±× °ªÀ» ¸ñ·ÏÀ¸·Î Çؼ®ÇÑ´Ù. ÇÁ·ÎÈ­ÀÏ(Profile)Àº ¾Æ·¡ ¸ÞŸµ¥ÀÌÅÍ(meta data)¿¡¼­ ´Ù·é´Ù.
´Ù¸¥ °÷¿¡¼­ Á¤ÀÇ µÈ ¾ÖÆ®¸®ºäÆ®

HEAD ¿¤·¹¸àÆ®¿¡´Â Á¦¸ñ, °Ë»ö ¿£Áø¿¡¼­ »ç¿ë ÇÒ Å°¿öµå, ¹®¼­ÀÇ ³»¿ëÀÌ ¾Æ´Ñ ±âŸ Á¤º¸µî ÇöÀç ¹®¼­¿¡ ´ë ÇÑ Á¤º¸¸¦ Æ÷ÇÔÇÑ´Ù. »ç¿ëµµ±¸´Â ÀϹÝÀûÀ¸·Î HEAD¿¡ ÀÖ´Â Á¤º¸¸¦ ±× ¹®¼­ÀÇ ³»¿ëÀ¸·Î Çؼ®ÇÏÁö ¾ÊÀ¸³ª, HEAD¿¡ Æ÷ÇÔ µÈ Á¤º¸·Î ºÎÅÍ ´Ù¸¥ ±â´ÉÀ» Åë ÇØ »ç¿ëÀÚ°¡ ÀÌ¿ë ÇÒ ¼ö ÀÖ°Ô ÇÑ´Ù.

7.4.2 Á¦¸ñ(TITLE) ¿¤·¹¸àÆ®

<!-- TITLE(Á¦¸ñ) ¿¤·¹¸àÆ®´Â ÅؽºÆ® È帧ÀÇ ºÎºÐÀÌ ¾Æ´Ï´Ù.
      ÀÌ °ÍÀº ÆäÀÌÁöÀÇ Çì´õ³ª âÀÇ À̸§À» Ç¥½ÃÇÏ¿©¾ß ÇÑ´Ù.
      °¢ ¹®¼­´Â ²À ÇÑ°³ÀÇ Á¦¸ñÀ» ÇÊ¿ä·ÎÇÑ´Ù.
  -->
<!ELEMENT TITLE - - (#PCDATA) -(%head.misc;) -- ¹®¼­ Á¦¸ñ -->
<!ATTLIST TITLE %i18n>

½ÃÀÛű×: ÇÊ¿ä ÇÔ, Á¾·áű×: ÇÊ¿ä ÇÔ

´Ù¸¥ °÷¿¡¼­ Á¤ÀÇ µÈ ¾ÖÆ®¸®ºäÆ®

°¢ HTML ¹®¼­´Â HEAD Ç׸ñ ¾È¿¡ ¹Ýµå½Ã ÇϳªÀÇ TITLE ¿¤·¹¸àÆ®¸¦ °¡Á®¾ßÇÑ´Ù.

Á¦ÀÛÀÚ´Â TITLE ¿¤·¹¸àÆ®¸¦ ±× ¹®¼­ÀÇ ³»¿ëÀ» Ç¥ÇöÇϴµ¥ »ç¿ëÇÏ¿©¾ß ÇÑ´Ù. ÀÚÁÖ »ç¿ëÀÚ´Â ¹®¼­¸¦ ³»¿ëÀ» º¸Áö ¾Ê°í Á¶È¸ÇϹǷÎ, Á¦ÀÛÀÚ´Â ³»¿ëÀ» Àß Ç¥ÇöÇÏ´Â Á¦¸ñÀ» Á¦°øÇÏ¿©¾ß ÇÑ´Ù. ³»¿ëÀ» Àß Ç¥ÇöÇÏÁö ¸øÇÏ´Â "¼Ò°³"¿Í °°Àº Á¦¸ñÀ» »ç¿ëÇÏÁö ¸»°í "xxx ȸ»ç ¼­ºñ½º ¼Ò°³"¿Í °°Àº Á¦¸ñÀ» »ç¿ëÇÏ¿©¾ß ÇÑ´Ù.

Á¢¼Ó¼º ÀÌÀ¯ ¶§¹®¿¡, »ç¿ëµµ±¸´Â »ç¿ëÀÚ¸¦ À§ÇÏ¿© Ç×»ó TITLE ¿¤·¹¸àÆ®(ÇÁ·¹ÀÓÀ» ÁöÁ¤ÇÑ ¹®¼­¿¡¼­´Â TITLE ¿¤·¹¸àÆ®¸¦ Æ÷ÇÔÇÏ¿©)¸¦ »ç¿ëÇÏ¿©¾ß ÇÑ´Ù. ÀÌ·¸°Ô ÇÏ´Â ±â´É »ç¿ëµµ±¸(¿¹: caption, spoken µî)¿¡ µû¶ó ´Ù¸£´Ù.

Á¦¸ñÀº ±ÛÀÚ ¿£Æ¼Æ¼(°­Á¶ µÈ ±ÛÀÚ, Ư¼ö ±ÛÀÚ, µî)¸¦ Æ÷ÇÔ ÇÒ ¼ö ÀÖÀ¸³ª, ´Ù¸¥ ÀÛ¼º¾î(markup)´Â Æ÷ÇÔ ÇÒ ¼ö´Â ¾ø´Ù.

Á¦¸ñÀÇ ¿¹Á¦À» º¸¸é:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
  "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
<TITLE>Àα¸ º¯µ¿¿¡ ´ë ÇÑ ¿¬±¸</TITLE>
 ... ´Ù¸¥ head ¿¤·¹¸àÆ®µé...
</HEAD>
<BODY>
 ... ¹®¼­ body ºÎºÐ...
</BODY>
</HTML>

7.4.3 Á¦¸ñ(title) ¾ÖÆ®¸®ºäÆ®

¾ÖÆ®¸®ºäÆ®ÀÇ Á¤ÀÇ

title = text [´ë¼Ò¹®ÀÚ ±¸º°: CS]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ±× ¼³Á¤ ¿¤·¹¸àÆ®¿¡ ´ë ÇÑ Âü°í(advisory) Á¤º¸¸¦ Á¦°øÇÑ´Ù.

TITLE ¿¤·¹¸àÆ®´Â Àüü ¹®¼­¿¡ ´ëÇÑ Á¤º¸¸¦ Á¦°ø¸ç ´Ü ÇÑ ¹ø ¸¸ ³ªÅ¸ ³¾ ¼ö Àִµ¥ ¹ÝÇØ, title ¾ÖÆ®¸®ºäÆ®´Â ¸î ¹øÀÌ¶óµµ ¿¤·¹¸àÆ®(element)¸¦ ³ªÅ¸ ³¯ ¼ö ÀÖ´Ù. ¾ÖÆ®¸®ºäÆ®°¡ ÀÌ ±â´ÉÀ» Áö¿øÇÏ´ÂÁö È®ÀÎÇϱâ À§Çؼ­´Â °¢ ¿¤·¹¸àÆ®ÀÇ Á¤ÀǸ¦ ÂüÁ¶Ç϶ó.

title ¾ÖÆ®¸®ºäÆ® °ªÀº »ç¿ëµµ±¸¿¡ µû¶ó ´Ù¸£°Ô Çؼ® µÉ ¼ö ÀÖ´Ù. ¿¹¸¦ µé¾î º¸´Â(visual) ºê¶ó¿ìÀú¿¡¼­´Â ÀÚÁÖ ¸¶¿ì½º°¡ ¾î¶² ¿ÀºêÁ§Æ® À§¿¡ À§Ä¡ ÇÒ ¶§ ºê¶ó¿ìÀú µµ±¸ »ó¿¡ Á¦¸ñÀ» º¸¿©ÁØ´Ù. Á¦¸ñ Á¤º¸¸¦ ¿Àµð¿À(Audio) »ç¿ëµµ±¸¿¡¼­µµ °°Àº ¹æ½ÄÀ¸·Î ¼Ò¸®·Î Ç¥Çö ÇÒ ¼ö ÀÖ´Ù. ¿¹¸¦ µé¸é link ¾ÖÆ®¸®ºäÆ®°¡ ¼³Á¤µÇ¸é, »ç¿ëµµ±¸(visual°ú non-visual)´Â »ç¿ëÀÚ¿¡°Ô ¿¬°á µÈ ÀÚ¿øÀÇ Æ¯¼ºÀ» ¾Ë·Á ÁØ´Ù.

 ... ¹®Àå ...
¿©±â¿¡ <A href="http://someplace.com/neatstuff.gif" title="³ªÀÇ ½ºÄí¹ö ´ÙÀ̺ù">
  Àü¹ø ¿©¸§ ³ªÀÇ ¼öÄí¹ö ´ÙÀ̺ù</A> »çÁøÀÌ ÀÖ´Ù.
 ... ¹®Àå ...

¿ÜºÎ ½ºÅ¸ÀϽ¬Æ®¸¦ ÁöÁ¤ÇÏ´Â LINK ¿¤·¹¸àÆ®¿Í µ¿½Ã¿¡ »ç¿ëµÇ¸é title ¾ÖÆ®¸®ºäÆ®´Â Ãß°¡ÀûÀÎ ¿ªÇÒÀ» ÇÑ´Ù. ¼¼ºÎ»çÇ×Àº ¿¬°á°ú ½ºÅ¸ÀϽ¬Æ® Ç׸ñÀ» ÂüÁ¶Ç϶ó.

ÁÖ±â: Ç¥ÁØ ±â¼ú¿¡ ÀÇÇؼ­´Â ºó¾àÇÑ ¼º´ÉÀ» ³»´Â À½¼º ÇÕ¼º Ç°ÁúÀ» °³¼±Çϱâ À§ÇÏ¿© HTMLÀÇ ÇâÈÄ ¹öÀü¿¡¼­´Â À½¼Ò(phonemic)°ú ¿îÀ²(prosodic) Á¤º¸ÀÇ ¿£ÄÚµù ¾ÖÆ®¸®ºäÆ®°¡ Æ÷ÇÔ µÉ °ÍÀÌ´Ù.

7.4.4 ¸ÞŸ µ¥ÀÌÅÍ(Meta data)

ÀÌ ±Ô°ÝÀÌ ÀÛ¼ºµÇ´Â µ¿¾È Á¦ÀÛÀÚ¿¡°Ô HTML ¹®¼­¿¡ ´õ dzºÎÇÏ°Ô ±â°è°¡ ÀÐÀ» ¼ö ÀÖ´Â Á¤º¸¿Í ´Ù¸¥ ³×Æ®¿ö±×(network)¿¡ Á¢¼Ó ÇÒ ¼ö ÀÖ´Â ÀÚ¿øµéÀÇ ÁöÁ¤À» Çã¿ëÇϱâ À§ÇÑ ÀÛ¾÷ÀÌ ÁøÇà µÇ¾ú´Ù. W3CÀÇ ÀÚ¿ø Ç¥½Ã ¾ð¾î(RDF: Resource Description Language)´Â ¸ÞŸµ¥ÀÌÅ͸¦ À§ÇÑ ÀϹÝÀûÀΠƲ·Î °³¹ßµÇ°í ÀÖ´Ù.

HTMLÀº Á¦ÀÛÀÚ°¡ ¹®¼­ÀÇ ³»¿ëÀÌ ¾Æ´Ñ ¹®¼­¿¡ ´ëÇÑ Á¤º¸¸¦ ¿©·¯°¡Áö ¹æ¹ýÀ¸·Î ÁöÁ¤ÇÏ´Â ¸ÞŸµ¥ÀÌÅÍ(meta data)¸¦ »ç¿ëÇÏ°Ô ÇÏ¿´´Ù.

¿¹¸¦ µé¾î, ¹®¼­ÀÇ Á¦ÀÛÀÚ¸¦ Ç¥½ÃÇϴµ¥ ´ÙÀ½°ú °°ÀÌ META ¿¤·¹¸àÆ®¸¦ »ç¿ëÇÑ´Ù.

<META name="Author " content="Dave Raggett">

META ¿¤·¹¸àÆ®´Â Ư¼º(property)°ú °ªÀ» °®´Â´Ù. ¿¹Á¦¿¡¼­ Ư¼ºÀº "Author", °ªÀº "Dave Raggett"ÀÌ´Ù.

ÀÌ ±Ô°Ý¿¡¼­´Â ¸ÞŸµ¥ÀÌÅÍÀÇ À¯È¿ÇÑ Æ¯¼ºµéÀ» Á¤ÀÇÇÏÁö ¾Ê¾Ò´Ù. Ư¼º°ú À¯È¿ÇÑ °ªµéÀÇ Àǹ̴ ÇÁ·ÎÈ­ÀÏ(profile)ÀÇ ÇØ´çµÇ´Â Ư¼º¿¡ Á¤ÀÇ µÇ¾îÀÖ´Ù. ¿¹¸¦ µé¾î, °Ë»ö ¿£Áø¿¡ µµ¿òÀ» ÁÖ±â À§ÇÑ »öÀÎ ¹®¼­¿¡ "author"(Á¦ÀÛÀÚ), "copyright"(ÀúÀÛ±Ç), "keywords"(Å°¿öµå), µîÀÌ Á¤ÀÇ µÇ¾îÀÖ´Ù.

¸ÞŸµ¥ÀÌÅÍÀÇ ¼³Á¤

ÀϹÝÀûÀ¸·Î ¸ÞŸµ¥ÀÌÅÍÀÇ ¼³Á¤Àº µÎ ´Ü°è·Î µÈ´Ù.

  1. Ư¼º(property)°ú ±× Ư¼ºÀÇ °ªÀ» ¼±¾ð. ÀÌ °ÍÀº µÎ °¡Áö ¹æ¹ýÀÌ µÉ ¼ö ÀÖ´Ù.
    1. ¹®¼­ ¾È¿¡¼­ META ¿¤·¹¸àÆ®·Î,
    2. ¿ÜºÎ ¹®¼­¿¡¼­ LINK ¿¤·¹¸àÆ®·Î ¸ÞŸµ¥ÀÌÅÍ¿¡ ¿¬°á½ÃÄÑ(¿¬°á ŸÀÔ ÂüÁ¶).
  2. Ư¼º°ú À¯È¿ÇÑ °ªÀÌ Á¤ÀÇ µÇ¾îÀÖ´Â ÇÁ·ÎÈ­ÀÏ(profile)¸¦ Á¶È¸ ÇÔÀ¸·Î¼­.
    ÇÁ·ÎÈ­ÀÏÀ» ÁöÁ¤Çϱâ À§Çؼ­´Â HEAD ¿¤·¹¸àÆ®¿¡¼­ profile(ÇÁ·ÎÈ­ÀÏ) ¾ÖÆ®¸®ºäÆ® »ç¿ëÇÑ´Ù.

ÇÁ·ÎÈ­ÀÏÀº HEAD ¿¤·¹¸àÆ®¸¦ Á¤ÀÇÇϹǷÎ, °°Àº ÇÁ·ÎÈ­ÀÏÀÌ ¹®¼­ ÇìµåÀÇ ¸ðµç META¿Í LINK ¿¤·¹¸àÆ®¿¡ Àû¿ë µÊ¿¡ ÁÖÀÇÇ϶ó.

»ç¿ëµµ±¸´Â ¸ÞŸµ¥ÀÌÅÍ Áö¿ø ±â´ÉÀ» ÇÊ¿ä·Î ÇÏÁöÀÀ ¾Ê´Â´Ù. ¸ÞŸµ¥ÀÌÅ͸¦ Áö¿øÇÏ´Â »ç¿ëµµ±¸ÀÇ °æ¿ì, ÀÌ ±Ô°ÝÀº ¸ÞŸµ¥ÀÌÅ͸¦ ¾î¶»°Ô ó¸®ÇÒ °ÍÀΰ¡¸¦ ÁöÁ¤ÇÏ°í ÀÖÁö ¾Ê´Ù.

META ¿¤·¹¸àÆ®

<!ELEMENT META - O EMPTY               -- ƯÀ¯ÀÇ ¸ÞŸ Á¤º¸ -->
<!ATTLIST META
 %i18n;			-- lang(¾ð¾î Á¤º¸), dir(±ÛÀÚ ¹æÇâ), ³»¿ë°ú ÇÔ°Ô »ç¿ë --
 http-equiv  NAME           #IMPLIED  -- HTTP ¹ÝÀÀ Çì´õ À̸§  --
 name        NAME           #IMPLIED  -- ¸ÞŸ Á¤º¸ À̸§ --
 content     CDATA          #REQUIRED -- °ü·Ã Á¤º¸ --
 scheme      CDATA          #IMPLIED  -- ³»¿ëÀÇ Æû ¼±Åà ¹æ½Ä --
>

½ÃÀÛű×: ÇÊ¿ä ÇÔ, Á¾·áű×: »ç¿ë ±ÝÁö

¾ÖÆ®¸®ºäÆ®ÀÇ Á¤ÀÇ

´ÙÀ½ ¾ÖÆ®¸®ºäÆ®µé¿¡ Çã¿ë µÈ °ª°ú ±× Çؼ®Àº ÇÁ·ÎÈ­ÀÏ(profile)¿¡ µû¸¥´Ù.

name = name [´ë¼Ò¹®ÀÚ ±¸º°: CS]
ÀÌ ¾ÖÆ®¸®ºäÆ®ÀÇ Æ¯¼º À̸§À» ³ªÅ¸ ³¿. ÀÌ ±Ô°ÝÀº ÀÌ ¾ÖÆ®¸®ºäÆ®ÀÇ À¯È¿ÇÑ °ªÀ» Á¤ÀÇÇÏÁö ¾ÊÀ½.
content = cdata [´ë¼Ò¹®ÀÚ ±¸º°: CS]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â Ư¼ºÀÇ °ªÀ» ³ªÅ¸ ³¿. ÀÌ ±Ô°ÝÀº ÀÌ ¾ÖÆ®¸®ºäÆ®ÀÇ À¯È¿ÇÑ °ªÀ» Á¤ÀÇÇÏÁö ¾ÊÀ½.
scheme = cdata [´ë¼Ò¹®ÀÚ ±¸º°: CS]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â Ư¼º °ªÀ» Çؼ®Çϴµ¥ »ç¿ë ÇÒ ¹æ½ÄÀÇ À̸§À» ³ªÅ¸ ³¿(ÇÁ·ÎÈ­ÀÏ ¼¼ºÎ ÂüÁ¶).
http-equiv = name [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â name ¾ÖÆ®¸®ºäÆ®ÀÇ ÀÚ¸®¿¡ »ç¿ë µÉ ¼ö ÀÖ½¿. HTTP ¼­¹öµéÀº HTTP ¹ÝÀÀ ¸Þ¼¼Áö Çì´õÀÇ Á¤º¸¸¦ ¼öÁýÇϱâ À§ÇÏ¿© ÀÌ ¾ÖÆ®¸®ºäÆ®¸¦ »ç¿ëÇÑ´Ù.
´Ù¸¥ °÷¿¡¼­ Á¤ÀÇ µÈ ¾ÖÆ®¸®ºäÆ®

META ¿¤·¹¸àÆ®´Â ¹®¼­ÀÇ Æ¯¼ºµéÀ» ÁöÁ¤(¿¹: Á¦ÀÛÀÚ , ¸¸±âÀÏ, Å°¿öµå ¸ñ·Ï, µî)Çϱâ À§ÇÏ¿© ¶Ç´Â ÀÌ Æ¯¼ºµéÀÇ °ªÀ» ÁöÁ¤Çϱâ À§ÇÏ¿© »ç¿ë ÇÒ ¼ö ÀÖ´Ù. ÀÌ ±Ô°Ý¿¡´Â Ư¼º Á¤ÀǸ¦ Æ÷ÇÔÇÏÁö ¾Ê¾Ò´Ù.

°¢ META ¿¤·¹¸àÆ®´Â Ư¼º°ú °ªÀÇ Â¦À¸·Î ¸í½ÃµÈ´Ù.

name ¾ÖÆ®¸®ºäÆ®´Â Ư¼ºÀ» ÁöÁ¤ÇÏ°í content ¾ÖÆ®¸®ºäÆ®´Â ±× Ư¼ºÀÇ °ªÀ» ÁöÁ¤ÇÑ´Ù.

Á¦ÀÛÀÚ Æ¯¼º °ªÀ» ÁöÁ¤ÇÏ´Â ¿¹:

<META name="author" content="Dave Raggett">

META¿¡¼­ content ¾ÖÆ®¸®ºäÆ®ÀÇ °ª¿¡ ¾ð¾î¸¦ ÁöÁ¤Çϱâ À§ÇÏ¿© lang(¾ð¾î) ¾ÖÆ®¸®ºäÆ®¸¦ »ç¿ë ÇÒ ¼ö ÀÖ´Ù. ÀÌ´Â À½¼º ÇÕ¼º±â°¡ ¾ð¾î¿¡ µû¶ó Àû¿ëµÇ´Â ¹ßÀ½À» ä¿ë ÇÒ ¼ö ÀÖµµ·Ï ÇØ ÁØ´Ù.

Á¦ÀÛÀÚÀÇ À̸§ÀÌ ºÒ¾î·Î Ç¥½Ã µÈ ¿¹:

<META name="author" lang="fr" content="Arnaud Le Hors">

ÁÖ±â: META ¿¤·¹¸àÆ®´Â ¸ÞŸµ¥ÀÌÅ͸¦ ³ªÅ¸³»´Â ±â´ÉÀÌÁö¸¸, ÀϺΠHTML ¿¤·¹¸àÆ®µé°ú ¾ÖÆ®¸®ºäÆ®´Â ÀÌ¹Ì ¾î¶² ¸ÞŸµ¥ÀÌÅÍÀÇ ºÎºÐÀ» ó¸® ÇÒ ¼ö ÀÖ¾î META¸¦ »ç¿ëÇÏ´Â ´ë½Å¿¡, Á¦ÀÛÀÚ¿¡ ÀÇÇØ »ç¿ë µÉ ¼ö Àִµ¥ À̰͵éÀº: TITLE ¿¤·¹¸àÆ®, ADDRESS ¿¤·¹¸àÆ®, INS¿Í DEL ¿¤·¹¸àÆ®, title ¾ÖÆ®¸®ºäÆ®¿Í cite ¾ÖÆ®¸®ºäÆ® µîÀÌ´Ù.

ÁÖ±â: META ¿¤·¹¸àÆ®¿¡ ÁöÁ¤ µÈ Ư¼ºÀÇ °ª¿¡ URIÀ» ÁöÁ¤Çϸé, ÀϺΠÁ¦ÀÛÀÚ´Â LINK ¿¤·¹¸àÆ®¸¦ ÅëÇØ ¸ÞŸµ¥ÀÌÅ͸¦ ÁöÁ¤Çϴµ¥, ´ÙÀ½ ¿¹¿Í °°À̵ȴÙ.

<META name="DC.identifier"
     content="ftp://ds.internic.net/rfc/rfc1866.txt">

ÀÌ·¸°Ôµµ ¾µ ¼ö ÀÖ´Ù.

<LINK rel="DC.identifier"          type="text/plain"
        href="ftp://ds.internic.net/rfc/rfc1866.txt">
META¿Í HTTP Çì´õ(header)

http-equiv ¾ÖÆ®¸®ºäÆ®´Â name ¾ÖÆ®¸®ºäÆ® À§Ä¡¿¡ »ç¿ë ÇÒ ¼ö ÀÖ°í ¹®¼­°¡ HTTP(Hypertext Transfer Protocol)À» ÅëÇÏ¿© ¿­·Á Áú ¶§ Ưº° ÇÑ Àǹ̸¦ °®´Â´Ù. HTTP ¼­¹öµéÀº HTTP Åë½ÅÀ» À§ÇÑ [RFC822]-style Çì´õ¸¦ ¹ß»ý½ÃÅ°±â À§ÇØ, http-equiv ¾ÖÆ®¸®ºäÆ®·Î ÁöÁ¤ µÈ Ư¼º À̸§À» °¡Áú ¼ö ÀÖ´Ù. À¯È¿ ÇÑ HTTP Çì´õÀÇ ¼¼ºÎ»çÇ×Àº HTTP ±Ô°Ý[RFC2068 ÂüÁ¶]

META ¼±¾ð ¿¹Á¦:

<META http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT">

HTTP Çì´õ´ÂÀÇ °á°ú:

Expires: Tue, 20 Aug 1996 14:25:27 GMT

ÀÌ´Â ¾ðÁ¦ »õ·Î¿î °ü·Ã ¹®¼­¸¦ °¡Á® ¿Ã °ÍÀΰ¡¸¦ °áÁ¤Çϴ īü(cache)¿¡ »ç¿ë µÉ ¼ö ÀÖ´Ù.

ÀϺΠ»ç¿ëµµ±¸´Â¼±Åà »çÇ×À» URI¿¡ µû¶ó ¹Ù²Ù´Â °ÍÀ» Æ÷ÇÔÇÏ¿©, ¸î ÃÊ ÈÄ¿¡ ÇöÀç ÆäÀÌÁö¸¦ »õ·Ó°Ô ÀÐÀ» °ÍÀΰ¡ ÇÏ´Â METAÀÇ »ç¿ëÀ» Áö¿øÇÑ´Ù.

<META http-equiv="refresh" content="3,http://www.acme.com/intro.html">

³»¿ë(content)Àº ¸î ÃÊ Áö¿¬½ÃÄÑ ´ÙÀ½ÀÇ URI·ÎºÎÅÍ ÀÐ¾î ¿Ã °ÍÀΰ¡¸¦ ³ªÅ¸³»´Â ½Ã°£ ¼ýÄ¡ÀÌ´Ù. ÀÌ ±â´ÉÀº ÀϹÝÀûÀ¸·Î »ç¿ëÀÚ°¡ ÀúÀý·Î ÀüȯÇÏ´Â ¼Ò°³ ÆäÀÌÁö¸¦ º¼ ¶§ »ç¿ëÇÑ´Ù. ±×·¯³ª, ÀϺΠ»ç¿ëµµ±¸´Â ÀÌ ±â´ÉÀ» Áö¿øÇÏÁö ¾ÊÀ¸¹Ç·Î, Á¦ÀÛÀÚ´Â ¼Ò°³ ÆäÀÌÁö¿¡ »ç¿ëÀÚ°¡ ¿©±â¿¡¼­ ¹­ÀÌÁö ¾Ê°í Ç×»ó ´Ù¸¥ ÆäÀÌÁö·Î °¥¼ö ÀÖµµ·Ï ³»¿ëÀ» Æ÷ÇÔ ½ÃÄѾßÇÑ´Ù.

META¿Í °Ë»ö ¿£Áø

ÀϹÝÀûÀ¸·Î META´Â °Ë»ö ¿£Áø(search engine)ÀÇ °Ë»ö Ç°ÁúÀ» Çâ»ó ½ÃÅ°±â À§ ÇØ Å°¿öµå¸¦ ÁöÁ¤Çϴµ¥ »ç¿ëµÈ´Ù. ¹®¼­ÀÇ ¾ð¾î °ü·Ã Á¤º¸¸¦ °®´Â ¿©·¯°³ÀÇ META ¿¤·¹¸àÆ®°¡ Á¦°ø µÉ ¶§´Â °Ë»ö ¿£ÁøÀº lang ¾ÖÆ®¸®ºäÆ®ÀÇ ÇÊÅÍ(filter)¸¦ °Åó ÂüÁ¶ µÈ ¾ð¾î¸¦ »ç¿ëÇÏ¿© °á°ú¸¦ º¸¿©ÁØ´Ù.

¿¹¸¦ µé¾î

<-- ¹Ì±¹ ¿µ¾î »ç¿ëÀÚ¸¦ À§ÇÏ¿© -->
<META name="keywords" lang="en-us" content="vacation, Greece, sunshine">
<-- ¿µ±¹ ¿µ¾î »ç¿ëÀÚ¸¦ À§ÇÏ¿© -->
<META name="keywords" lang="en"    content="holiday, Greece, sunshine">
<-- ºÒ¾î »ç¿ëÀÚ¸¦ À§ÇÏ¿© -->
<META name="keywords" lang="fr"    content="vacances, Gr&egrave;ce, soleil">

°Ë»ö ¿£ÁøÀÇ È¿°ú¸¦ ³ôÀ̱â À§ÇÏ¿© LINK ¿¤·¹¸àÆ®·Î ÇÑ ¾ð¾î¿¡¼­ ´Ù¸¥ ¾ð¾î·Î ¹ø¿ªÀ», ´Ù¸¥ ¸Þµð¾Æ(¿¹: PDF)ÀÇ ¹®¼­ ¹öÀüÀ¸·Î, ¹®¼­°¡ ¸ðµë ¼­·ùÀÇ ÀϺÎÀÌ¸é ±× ¸ðµÒ ¼­·ùÀÇ ½ÃÀÛÀ¸·Î ¿¬°á ½Ãų ¼ö ÀÖ´Ù.

Ãß°¡ÀûÀÎ µµ¿ò¸»Àº À¥½ÎÀÌÆ®¿¡¼­ÀÇ °Ë»ö ¿£Áø »öÀÎ Ç׸ñ ÂüÁ¶Ç϶ó.

META¿Í ÀÎÅÍ³Ý ³»¿ë ¼±Åà Ç÷§Æ®Æû(PICS)

ÀÎÅÍ³Ý ³»¿ë ¼±Åà Ç÷§Æ®Æû([PICS]: Platform for Internet Content Selection)Àº ÀÎÅÍ³Ý ³»¿ë°ú °ü·Ã µÈ ¶óº§(label) ¸ÞŸµ¥ÀÌÅÍÀÇ ±â¹Ý ±¸Á¶(infrastructure)ÀÌ´Ù. ´çÃÊ¿¡´Â ºÎ¸ð¿Í ¼±»ý´ÔÀÌ ¾ÆÀ̵éÀÌ ÀÎÅ׳ݿ¡ µé¾î °¥ ¼ö ÀÖµµ·Ï µ½±â À§ ÇØ µðÀÚÀÎ µÇ¾ú°í, ´Ù¸¥ »ç¿ëÀڵ鵵 ¶óº§À» »ç¿ëÇϵµ·Ï µµ¿Í ÁØ´Ù. ÀÌ°ÍÀº ÄÚµå ½ÎÀÎ(code signing), ÇÁ¶óÀ̹ö½Ã(privacy)¿Í ÁöÀû ¼ÒÀ¯±Ç °ü¸®µî¸¦ Æ÷ÇÔÇÑ´Ù.

¿¹Á¦´Â META¿¡ ÀÎÅÍ³Ý ³»¿ë ¼±Åà Ç÷§Æ®Æû(PICS) 1.1 ¶óº§À» Æ÷ÇÔÇÑ ¼±¾ðÀ» ¾î¶»°Ô Çϴ°¡¸¦ ¼³¸íÇÑ´Ù.

<HEAD>
<META http-equiv="PICS-Label" content='(PICS-1.1 "http://www.gcf.org/v2.5"
	labels on "1994.11.05T08:15-0500" until "1995.12.31T23:59-0000"
	for "http://w3.org/PICS/Overview.html"
     ratings (suds 0.5 density 0 color/hue 1))
'>
 <TITLE> ... ¹®¼­ Á¦¸ñ ... </TITLE>
</HEAD>
META¿Í µðÆúÆ® Á¤º¸

META ¿¤·¹¸àÆ®´Â ´ÙÀ½°ú °°ÀÌ ¹®¼­ µðÆúÆ®¸¦ ÁöÁ¤ ÇÒ ¼ö ÀÖ´Ù.

´ÙÀ½ ¿¹Á¦´Â ISO-8859-5·Î ¹®¼­ÀÇ ±ÛÀÚ ¿£ÄÚµùÀ» ÁöÁ¤ÇÑ´Ù.

<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-5">

¸ÞŸ µ¥ÀÌÅÍ ÇÁ·ÎÈ­ÀÏ(Meta data profile)

HEAD ¿¤·¹³ÙÆ®ÀÇ profile ¾ÖÆ®¸®ºäÆ®´Â ¸ÞŸ µ¥ÀÌÅÍ ÇÁ·ÎÈ­ÀÏ(Meta data profile)ÀÇ À§Ä¡¸¦ ÁöÁ¤ÇÑ´Ù. profile ¾ÖÆ®¸®ºäÆ®ÀÇ °ªÀº µÎ°¡Áö ¹æ½ÄÀÇ URI°¡ µÉ ¼ö ÀÖ´Ù.

ÀÌ ¿¹Á¦´Â ¹®¼­ÀÇ À妽ÌÀ» À§ ÇÑ À¯¿ëÇÑ Æ¯¼ºµéÀ» ¼³Á¤ ÇÑ °¡»ó ÇÁ·ÎÈ­ÀÏÀÌ´Ù. ÀÌ ÇÁ·ÎÈ­ÀÏ¿¡´Â "author(Á¦ÀÛÀÚ)", "copyright(ÀúÀÛ±Ç)", "keywords(Å°¿öµå)", "date(³¯ÀÚ)" µÕÀÇ Æ¯¼ºµéÀÌ Á¤ÀÇ µÇ¾î ÀÖ°í °ªµéÀº META ¼±¾ð µÚ¿¡ ¿Â´Ù.

<HEAD profile="http://www.acme.com/profiles/core">
 <TITLE>¾çÇØ °¢¼­ Ç¥Áö ¿Ï¼ºÇÏ´Â ¹æ¹ý</TITLE>
 <META name="author" content="John Doe">
 <META name="copyright" content="&copy; 1997 Acme Corp.">
 <META name="keywords" content="corporate,guidelines,cataloging">
 <META name="date" content="1994-11-06T08:49:37+00:00">
</HEAD>

ÀÌ ±Ô°ÝÀÌ ÀÛ¼ºµÇ´Â µ¿¾È¿¡´Â [RFC2068], Ç׸ñ 3.3¿¡ µû¶ó µ¥ÀÌÅÍ ¾ç½ÄÀ» »ç¿ëÇÏ´Â °ÍÀÌ º¸ÅëÀ̾ú´Ù. »ó´ëÀûÀ¸·Î ÀÌ ¾ç½ÄÀ¸·Î ó¸®ÇϱⰡ ¾î·Æ±â ¶§¹®¿¡, Á¦ÀÛÀÚ´Â [ISO8601] ³¯ÀÚ ¾ç½ÄÀº »ç¿ë ÇÒ °ÍÀ» ±ÇÇÑ´Ù. Ãß°¡ÀûÀ¸·Î INS¿Í DEL ¿¤·¹¸àÆ®¸¦ ÂüÁ¶Ç϶ó.

scheme(¹æ½Ä) ¾ÖÆ®¸®ºäÆ®´Â Á¦ÀÛÀÚ¿¡°Ô »ç¿ëµµ±¸¸¦ »ç¿ëÇϴµ¥ ¸ÞŸµ¥ÀÌÅÍÀÇ ¹Ù¸¥ Ç¥ÇöÀ» À§ÇÏ¿© Ãß°¡Àû ¹®ÀåÀ» Á¦°øÇÑ´Ù. ¸ÞŸµ¥ÀÌÅÍ°¡ ´Ù¸¥ ¾ç½ÄÀ¸·Î µÇ¾ú´Â °æ¿ì ÀÌ¿Í °°Àº Ãß°¡ÀûÀÎ Á¤º¸´Â ¸Å¿ì Áß¿äÇÏ´Ù. ¿¹¸¦ µé¾î, Á¦ÀÛÀÚ´Â ³¯ÀÚ¸¦ ¸ðÈ£ ÇÑ ¾ç½Ä "10-9-97"À¸·Î Ç¥Çö ÇÒ ¼ö ÀÖ´Àµ¥ ÀÌ°ÍÀ¸·Î 1997³â 10¿ù 9ÀÏÀÎÁö 1997³â 9¿ù 10ÀÏÀÎÁö ¾Ë ¼ö ¾ø´Ù. scheme ¾ÖÆ®¸®ºäÆ® °ª "Month-Date-Year"·Î ÀÌ ³¯ÀÚ °ªÀÇ ¸ðÈ£ ÇÑ Á¡À» ¾ø¾Ø´Ù.

´Ù¸¥ °æ¿ì, scheme ¾ÖÆ®¸®ºäÆ®´Â »ç¿ëµµ±¸¿¡°Ô ±×¸® Áß¿äÇÑ °ÍÀº ¾Æ´ÏÁö¸¸ µµ¿ò Á¤º¸¸¦ Á¦°øÇÑ´Ù.

´ÙÀ½ ¿¹Á¦¿¡¼­, schemeÀº »ç¿ëµµ±¸¿¡°Ô ±× "identifier(ÁöÁ¤ÀÚ)" Ư¼º °ªÀÌ ISBN ÄÚµå ¹øÈ£¶ó´Â °ÍÀ» ¾Ë·Á Áà µµ¿òÀ» ÁØ´Ù.

<META scheme="ISBN"  name="identifier" content="0-8230-2355-9">

scheme ¾ÖÆ®¸®ºäÆ®ÀÇ °ªÀº Ư¼º name°ú ¿¬°á µÈ profile¿¡ µû¶ó ´Ù¸£´Ù.

ÁÖ±â: Dublin Core ([DCORE])´Â ÇÁ·ÎÈ­ÀÏÀÇ ÇÑ ¿¹Á¦·Î ÀüÀÚ ¼­ÀûÀ» À§ ÇÑ Ãßõ Ư¼ºµéÀ» Á¤ÀÇÇÏ°í ÀÏÄ¡ÇÏÁö ¾Ê´Â ¸ðµ¨µé °£ÀÇ Åë¿ë¼ºÀÇ °³¼±À» ½Ãµµ ÇÏ¿´´Ù.

7.5 ¹®¼­ º»Ã¼(BODY)

7.5.1 BODY ¿¤·¹¸àÆ®

<!ELEMENT BODY O O (%block; | SCRIPT)+ +(INS | DEL) -- ¹®¼­ º»Ã¼(body) -->
<!ATTLIST BODY
 %attrs;                              -- %coreattrs, %i18n, %events --
 onload          %Script;   #IMPLIED  -- ¹®¼­¸¦ Àоú´Ù(loaded) --
 onunload        %Script;   #IMPLIED  -- ¹®¼­°¡ Á¦°Å µÇ¾ú´Ù(removed) --
>

½ÃÀÛű×: ¼±ÅÃÀû, Á¾·áű×: ¼±ÅÃÀû

¾ÖÆ®¸®ºäÆ®ÀÇ Á¤ÀÇ º¸´Â(visual) ºê¶ó¿ìÀú¿¡¼­

background = uri [´ë¼Ò¹®ÀÚ Å¸ÀÔ ÂüÁ¶: CT]
ºÒ·®ÇÑ °ÍÀÌ´Ù. ÀÌ ¾ÖÆ®¸®ºäÆ®ÀÇ °ªÀº À̹ÌÁö ÀÚ¿øÀÇ URIÀÌ´Ù. ±× À̹ÌÁö´Â ¹è°æ(background)¿¡ ÀϹÝÀûÀ¸·Î ¹ÙµÏÆÇ ½ÄÀ¸·Î ¹è¿­µÈ´Ù.
text = color [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ºÒ·®ÇÑ °ÍÀÌ´Ù. ÀÌ ¾ÖÆ®¸®ºäÆ®´Â µ¥ÀÌÅÍ(foreground) ÅؽºÆ®ÀÇ »ö»óÀ» ÁöÁ¤ÇÑ´Ù.
link = color [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ºÒ·®ÇÑ °ÍÀÌ´Ù. ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ¹æ¹® ÇÑ ÀûÀÌ ¾ø´Â ÆäÀÌÁö ¿¬°á(hypertext link) ÅؽºÆ®ÀÇ »ö»óÀ» ÁöÁ¤ÇÑ´Ù.
vlink = color [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ºÒ·®ÇÑ °ÍÀÌ´Ù. ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ¹æ¹® Çß´ø ÆäÀÌÁö ¿¬°á ÅؽºÆ®ÀÇ »ö»óÀ» ÁöÁ¤ÇÑ´Ù.
alink = color [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ºÒ·®ÇÑ °ÍÀÌ´Ù. ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ÇöÀç ¼±Åà ÇÑ ÆäÀÌÁö ¿¬°á ÅؽºÆ®ÀÇ »ö»óÀ» ÁöÁ¤ÇÑ´Ù.
´Ù¸¥ °÷¿¡¼­ Á¤ÀÇ µÈ ¾ÖÆ®¸®ºäÆ®

¹®¼­ÀÇ º»Ã¼¿¡ ¹®¼­ÀÇ ³»¿ëÀ» °®´Â´Ù. ³»¿ëÀÇ Ç¥ÇöÀº »ç¿ëµµ±¸¿¡ µû¶ó ´Ù¸¦ ¼ö ÀÖ´Ù. ¿¹¸¦ µé¾î, º¸´Â(visual) ºê¶ó¿ìÀú¿¡¼­ º»Ã¼¸¦ ÅؽºÆ®, À̹ÌÁö, »ö»ó, ±×·¡ÇÈ µîÀ» Ç¥ÇöÇÏ´Â È­ÆøÀ¸·Î »ý°¢ÇÑ´Ù. ¿Àµð¿À »ç¿ëµµ±¸¿¡¼­´Â °°Àº ³»¿ëÀÌ ¸»·Î Ç¥Çö µÈ´Ù. ÇöÀç¿¡´Â ½ºÅ¸ÀϽ¬Æ®°¡ ¹®¼­ÀÇ Ç¥Çö¿¡ ¼±È£ µÇ±â ¶§¹®¿¡ BODYÀÇ Ç¥ÇöÀû ¾ÖÆ®¸®ºäÆ®´Â ºÒ·®ÇÑ °ÍÀÌ µÇ¾ú´Ù.

ºÒ·®ÇÑ ¿¹Á¦:
´ÙÀ½ HTML ºÎºÐÀº ºÒ·®ÇÑ ¾ÖÆ®¸®ºäÆ®ÀÇ »ç¿ëÀ» ¼³¸íÇÏ°í ÀÖ´Ù. ÀÌ °ÍÀº È­¸éÀÇ ¹è°æ»öÀ» ¹é»ö, ÅؽºÆ® »ö»óÀ» °ËÁ¤, ´çÃÊ ¿¬°áÀ» Àû»ö, ÇöÀç ¼±ÅÃÇÑ ¿¬°áÀ» ºÐÈ«, ¹æ¹®Çß´ø ¿¬°áÀ» °¥»öÀ¸·Î ¼³Á¤ÇÏ¿´´Ù.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
  "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>Àα¸ÀÇ À¯µ¿¼º¿¡ °ü ÇÑ ¿¬±¸</TITLE>
</HEAD>
<BODY bgcolor="white" text="black"
 link="red" alink="fuchsia" vlink="maroon">
 ... ¹®¼­ º»Ã¼ ...
</BODY>
</HTML>

´ÙÀ½°ú °°ÀÌ ½ºÅ¸ÀϽ¬Æ®¸¦ »ç¿ëÇÏ¿© °°Àº È¿°ú¸¦ ¾òÀ» ¼ö ÀÖ´Ù.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
  "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
<TITLE>Àα¸ÀÇ À¯µ¿¼º¿¡ °ü ÇÑ ¿¬±¸</TITLE>
<STYLE type="text/css">
 BODY { background: white; color: black}
 A:link { color: red }
 A:visited { color: maroon }
 A:active { color: fuchsia }
</STYLE>
</HEAD>
<BODY>
 ... ¹®¼­ º»Ã¼ ...
</BODY>
</HTML>

¿ÜºÎ ½ºÅ¸ÀϽ¬Æ®¿¡ ¿¬°á »ç¿ëÇÏ´Â °ÍÀº ¿ø·¡ÀÇ HTML ¹®¼­¸¦ ¼öÁ¤ÇÏÁö ¾Ê°í Ç¥ÇöÀ» º¯°æÇÒ ¼ö ÀÖ´Â À¶Å뼺À» ºÎ¿©ÇÑ´Ù.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
  "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
<TITLE>Àα¸ÀÇ À¯µ¿¼º¿¡ °ü ÇÑ ¿¬±¸</TITLE>
<LINK rel="stylesheet" type="text/css" href="smartstyle.css">
</HEAD>
<BODY>
 ... ¹®¼­ º»Ã¼ ...
</BODY>
</HTML>

ÇÁ·¹ÀÓ¼¼Æ®(Frameset)¿Í HTML º»Ã¼: ÇÁ·¹ÀÓ¼¼Æ®¸¦ Æ÷ÇÔÇÏ´Â ¹®¼­¿¡¼­´Â BODY ¿¤·¹¸àÆ®¸¦ FRAMESET ¿¤·¹¸àÆ®·Î ´ëüÇÑ´Ù. Ãß°¡ Á¤º¸´Â ÇÁ·¹ÀÓÀ» ÂüÁ¶Ç϶ó.

7.5.2 ¿¤·¹¸àÆ® ÁöÁ¤ÀÚ(identifier): id¿Í class ¾ÖÆ®¸®ºäÆ®

¾ÖÆ®¸®ºäÆ®ÀÇ Á¤ÀÇ

id = name [´ë¼Ò¹®ÀÚ ±¸º°: CS]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ¿¤·¹¸àÆ®¿¡ À̸§(name)À» ºÎ¿©ÇÑ´Ù. ÀÌ À̸§À» Àü ¹®¼­¸¦ ÅëÇÏ¿© °°Àº À̸§ÀÌ ÀÖÀ¸¸é ¾ÊµÈ´Ù.
class = cdata-list [´ë¼Ò¹®ÀÚ ±¸º°: CS]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ¿¤·¹¸àÆ®¿¡ Çϳª ȤÀº ¿©·¯°³ÀÇ Å¬¶ó½º(class) À̸§À» ºÎ¿©ÇÑ´Ù. ¿©·¯ ¿¤·¹¸àÆ®¿¡¼­ °°Àº Ŭ¶ó½º À̸§ ȤÀº À̸§µéÀ» °¡Áú ¼ö ÀÖÀ¸¸ç, ¿©·¯ Ŭ¶ó½º À̸§µéÀ» °¡Áú ¶§´Â °ø°£À¸·Î ºÐ¸®µÈ´Ù.

id ¾ÖÆ®¸®ºäÆ®´Â ¿¤·¹¸àÆ®¿¡ Áߺ¹µÇÁö ¾Ê´Â(unique) ÁöÁ¤ÀÚ(identifier)¸¦ ÁöÁ¤ÇÑ´Ù(ÀÌ´Â SGML¿¡ ÀÇÇÏ¿© È®ÀÎ µÉ ¼ö ÀÖ½¿).

¿¹¸¦ µé¾î, ´ÙÀ½ µÎ ¹®´ÜÀº id °ª¿¡ ÀÇÇÏ¿© ±¸ºÐµÈ´Ù.

<P id="myparagraph">ÀÌ°ÍÀº µ¶Æ¯ ÇÑ À̸§ÀÌ ºÎ¿© µÈ ¹®´ÜÀÌ´Ù.</P>
<P id="yourparagraph">À̰͵µ ´Ù¸¥ µ¶Æ¯ ÇÑ À̸§ÀÌ ºÎ¿© µÈ ¹®´ÜÀÌ´Ù.</P>

id ¾ÖÆ®¸®ºäÆ®´Â HTML¿¡¼­ ¸î °¡Áö ÀÓ¹«¸¦ °®´Â´Ù.

¹Ý¸é¿¡ ¾ÖÆ®¸®ºäÆ®¿¡ Çϳª ÀÌ»óÀÇ class¸¦ ÁöÁ¤ ÇÒ ¼ö ÀÖ´Ù. Çϳª ÀÌ»óÀÇ class À̸§À» ¿¤·¹¸àÆ®¿¡ ÁöÁ¤Çϸé, ±× ¿¤·¹¸àÆ®´Â ÀÌ Å¬¶ó½º¿¡ ¼ÓÇØ ÀÖ´Ù°í ¸» ÇÒ ¼ö ÀÖ´Ù. ÇϳªÀÇ class À̸§Àº ¿©·¯ ¿¤·¹¸àÆ®¿¡ ÀÇÇØ °øÀ¯ µÉ ¼ö ÀÖ´Ù. class ¾ÖÆ®¸®ºäÆ®´Â HTML¿¡¼­ ¸î °¡Áö ÀÓ¹«¸¦ °®´Â´Ù.

´ÙÀ½ ¿¹Á¦´Â ¹®¼­ ¸Þ¼¼Áö ÀÛ¼ºÀ» À§ÇÏ¿© SPAN ¿¤·¹¸àÆ®¸¦ id¿Í class ¾ÖÆ®¸®ºäÆ®¿Í Á¶ÇÕÇÏ¿© »ç¿ëÇÏ¿´´Ù. ¸Þ¼¼Áö´Â ¿µ¾î¿Í ºÒ¾î µÎ°¡Áö·Î ³ªÅ¸³­´Ù.

<!-- ¿µ¾î ¸Þ¼¼Áö -->
<P><SPAN id="msg1" class="info" lang="en">Variable declared twice</SPAN>
  <!   ---   (º¯¼ö°¡ µÎ ¹ø ¼±¾ð µÊ)   --->
<P><SPAN id="msg2" class="warning" lang="en">Undeclared variable</SPAN>
  <!   ---   (¼±¾ð µÇÁö ¾ÊÀº º¯¼ö)   --->
<P><SPAN id="msg3" class="error" lang="en">Bad syntex for variable name</SPAN>
  <!   ---   (ºÒ·®ÇÑ Ç¥ÇöÀÇ º¯¼ö À̸§À¸·Î)   --->
<!-- ºÒ¾î ¸Þ¼¼Áö -->
<P><SPAN id="msg1" class="info" lang="fr">
     Variable d&eacute;clar&eacute;e deux fois</SPAN>
<P><SPAN id="msg2" class="warning" lang="fr">
     Variable ind&eacute;finie</SPAN>
<P><SPAN id="msg3" class="error" lang="fr">
     Erreur de syntexe pour variable</SPAN>

´ÙÀ½ CSS ½ºÅ¸ÀÏ ÁöÁ¤Àº º¼ ¼ö ÀÖ´Â »ç¿ëµµ±¸¿¡°Ô Á¤º¸(info)¸¦ ³ì»ö, °æ°í(worning)¸¦ ³ë¶û, ¿À·ù(error)¸¦ Àû»öÀ¸·Î Ç¥½ÃÇϵµ·Ï Áö½ÃÇÑ´Ù.

SPAN.info    { color: green }
SPAN.warning { color: yellow }
SPAN.error   { color: red }

ºÒ¾îÀÇ "msg1°ú ¿µ¾î "msg1"Àº °°Àº id °ªÀ» °®°í ÀÖ¾î ÇÑ ¹®¼­¿¡ °°ÀÌ ³ªÅ¸ ³¯ ¼ö ¾øÀ½¿¡ ÁÖÀÇÇ϶ó.

Á¦ÀÛÀÚ´Â id ¾ÖÆ®¸®ºäÆ®¸¦ Ãß°¡ÀûÀ¸·Î °³º° ¸Þ¼¼ÁöÀÇ Ç¥ÇöÀ» Çâ»ó½ÃÅ°±â À§Çؼ­ ȤÀº ±× ¾ÖÆ®¸®ºäÆ®µéÀ» ¸ñÇ¥ ¾ÞÄ¿·Î ¸¸µé±â À§ ÇØ »ç¿ë ÇÒ ¼ö ÀÖ´Ù.

°ÅÀÇ ¸ðµç HTMLÀÇ ¿¤·¹¸àÆ®´Â ÁöÁ¤ÀÚ(identifier)¿Í Ŭ¶ó½º(class) Á¤º¸¸¦ °¡Áú ¼ö ÀÖ´Ù.

ÇÁ·Î±×·£ ¾ð¾î¿¡ ´ëÇÑ ¹®¼­ÀÇ ÀÛ¼º ¿¹¸¦ °¡Á¤ ÇØ º¸ÀÚ. ±× ¹®¼­´Â ¿©·¯°³ÀÇ ¹Ì¸® °áÁ¤ µÈ ¾ç½ÄÀ» °®´Â´Ù. ±× ¾ç½ÄÀ» À§ ÇØ ¿©±â¼­ PRE ¿¤·¹¸àÆ®¸¦ »ç¿ëÇÏ°í Ŭ¶ó½º "example"¿¡ ¼Ó ÇØÀÖ´Â PRE ¿¤·¹¸àÆ®ÀÇ °æ¿ì ³ì»öÀ» ¹è°æ»öÀ¸·Î ÁöÁ¤ÇÑ´Ù.

<HEAD>
<TITLE> ... ¹®¼­ Á¦¸ñ ...</TITLE>
<STYLE type="text/css">
 PRE.example { background: green }
</STYLE>
</HEAD>
<BODY>
<PRE class="example" id="example-1">
 ...¿¹Á¦ ³»¿ëÀº ¿©±â¿¡ ...
</PRE>
</BODY>

ÀÌ ¿¹Á¦¿¡¼­ id ¾ÖÆ®¸®ºäÆ®¸¦ ¼³Á¤ÇϹǷμ­, (1) ¿©±â¿¡ ¿¬°á½ÃÅ°´Â ÇÏÀÌÆÛ¸µÅ©(hyperlink)¸¦ ¸¸µé¼ö ÀÖ°í, (2) Á÷Á¢ÀûÀÎ ÁöÁ¤À¸·Î ½ºÅ¸ÀÏ Á¤º¸·Î Ŭ¶ó½º ½ºÅ¸ÀÏÀ» µ¤¾î ¾º¿ï ¼ö ÀÖ´Ù.

ÁÖ±â: id ¾ÖÆ®¸®ºäÆ®´Â ¾ÞÄ¿ À̸§¿¡ »ç¿ë µÉ ¶§ name ¾ÖÆ®¸®ºäÆ®¿Í À̸§ ÀÚ¸®¸¦ °°ÀÌ »ç¿ëÇÑ´Ù. Ãß°¡ Á¤º¸´Â id¿¡ ÀÇ ÇÑ ¾ÞÄ¿¸¦ ÂüÁ¶Ç϶ó.

7.5.3 ºí·°·¹º§(Block-level)°ú ÀζóÀÎ(inline) ¿¤·¹¸àÆ®

BODY¿¡ ³ªÅ¸³ª´Â HTML ¿¤·¹¸àÆ®µéÀ» ºí·°·¹º§(block-level)À̶ó ºÎ¸£°í, ´Ù¸¥ °ÍµéÀ» ÀζóÀÎ(inline: "text level"À̶ó°íµµ ÇÔ)À̶óÇÑ´Ù. ±× µéÀÇ Â÷ÀÕÁ¡Àº ¸î°¡Áö ÀÖ´Ù.

³»¿ë(Content) ¸ðµ¨
ÀϹÝÀûÀ¸·Î ºí·°·¹º§ ¿¤·¹¸àÆ®µéÀº ÀζóÀÎ ¿¤·¹¸àÆ®µé°ú ´Ù¸¥ ºí·°·¹º§ ¿¤·¹¸àÆ®À»¸¦ Æ÷ÇÔ ÇÒ ¼ö ÀÖ´Ù. ¹Ý¸é ÀζóÀÎ ¿¤·¹¸àÆ®µé´Â ÀϹÝÀûÀ¸·Î µ¥ÀÌÅÍ¿Í ´Ù¸¥ ¿¤·¹¸àÆ®µé ¸¸ °¡Áú ¼ö ÀÖ´Ù. ÀÌ ±¸Á¶Àû Â÷ÀÌ´Â ºí·° ¿¤·¹¸àÆ®µéÀÌ ÀζóÀÎ ¿¤·¹¸àÆ®µé º¸´Ù ´õ Å« ±¸Á¶¸¦ °®´Ù.
¾ç½Ä(Formatting)
¿ø·¡ ºí·°·¹º§ ¿¤·¹¸àÆ®µéÀº ÀζóÀÎ ¿¤·¹¸àÆ®µé°ú ´Ù¸¥ ¾ç½ÄÀ» °®´Â´Ù. ÀϹÝÀûÀ¸·Î ºí·°·¹º§ ¿¤·¹¸àÆ®µéÀº »õ·Î¿î ÁÙ¿¡¼­ ½ÃÀÛÇϳª, ÀζóÀÎ ¿¤·¹¸àÆ®¸¦Àº ±×·¸Áö ¾Ê´Ù. °ø°£, ÁٹٲÞ(line break)¿Í ºí·° ¾ç½Ä(block format)ÀÇ Ãß°¡ Á¤º¸´Â ÅؽºÆ®¸¦ ÂüÁ¶Ç϶ó.
¹æÇ⼺(Directionality)
À¯´ÏÄÚµå[UNICODE]ÀÇ ¾ç¹æÇâ ÅؽºÆ® ±â´ÉÀÇ ±â¼úÀû ÀÌÀ¯µé·Î ºí·°·¹º§°ú ÀζóÀÎ ¿¤·¹¸àÆ®µéÀº ¹æÇ⼺ Á¤º¸¸¦ ÃëÇÏ´Â ¹æ¹ýÀÌ ´Ù¸£´Ù. ¼¼ºÎ»çÇ×Àº ÅؽºÆ® ¹æÇâ Ư¼ºÀ» ÂüÁ¶Ç϶ó.

½ºÅ¸ÀϽ¬Æ®´Â ¿¤·¹¸àÆ®°¡ ºí·°·¹º§ ¶Ç´Â ÀζóÀÎÀ¸·Î Çؼ® ÇÒ °ÍÀΰ¡¸¦ Æ÷ÇÔÇÏ¿© ¿¤·¹¸àÆ®µéÀÇ ¼­·Î ´Ù¸¥ ¹æ½ÄÀ» ±¸º°ÇÏ´Â ¼ö´ÜÀ» Á¦°øÇÑ´Ù. LIST(¸ñ·Ï) ¿¤·¹¸àÆ®¸¦ À§ÇÑ ÀζóÀÎ ½ºÅ¸ÀÏ°ú °°Àº ÀϺÎÀÇ °æ¿ì¿¡´Â ¹®Á¦°¡ ¾øÀ¸³ª, ÀϹÝÀûÀ¸·Î ¸» ÇØ Á¦ÀÛÀÚ´Â ÀÌ¿Í °°Àº ¹æ¹ýÀ¸·Î HTML ¿¤·¹¸àÆ®µéÀÇ ÀϹÝÀûÀΠǥÇöÀ» µ¤¾î ¾º¿ì´Â °ÍÀ» ÇÇÇؾßÇÑ´Ù.

ºí·°·¹º§°ú ÀζóÀÎ ¿¤·¹¸àÆ®µéÀ» À§ ÇÑ ÀüÅëÀûÀΠǥÇö ¹æ½ÄÀÇ º¯°æÀº ÅؽºÆ®ÀÇ ¾ç¹æÇâ ±â´É¿¡µµ ¿µÇâÀ» ÁØ´Ù. ½ºÅ¸ÀϽ¬Æ®ÀÇ ¾ç¹æÇ⼺¿¡ ´ëÇÑ ¿µÇâ ÂüÁ¶.

7.5.4 ±¸·ì ¿¤·¹¸àÆ®: DIV, SPAN ¿¤·¹¸àÆ®

<!ELEMENT DIV - - (%flow;)*            -- ƯÀ¯ ¾ð¾î/½ºÅ¸ÀÏ ¿ë±â -->
<!ATTLIST DIV
 %attrs;                              -- %coreattrs, %i18n, %events --
>
<!ELEMENT SPAN - - (%inline;)*         -- ƯÀ¯ ¾ð¾î/½ºÅ¸ÀÏ ¿ë±â -->
<!ATTLIST SPAN
 %attrs;                              -- %coreattrs, %i18n, %events --
>

½ÃÀÛű×: ÇÊ¿ä ÇÔ, Á¾·áű×: ÇÊ¿ä ÇÔ

´Ù¸¥ °÷¿¡¼­ Á¤ÀÇ µÈ ¾ÖÆ®¸®ºäÆ®

DIV¿Í SPAN ¿¤·¹¸àÆ®¸¦ id¿Í class ¾ÖÆ®¸®ºäÆ®¸¦ °áÇÕÇÏ¿© »ç¿ëÇÏ¿© ¹®¼­ ±¸Á¶¿¡ ƯÀ¯ ÇÑ ±â´ÉÀ» Ãß°¡ ÇÒ ¼ö ÀÖ´Ù. ÀÌ ¿¤·¹¸àÆ®µéÀº ÀζóÀÎ(SPAN) ¶Ç´Â ºí·°·¹º§(DIV)ÀÇ ³»¿ë(content)À» Á¤ÀÇÇϸç, ³»¿ë¿¡ ´ë ÇÑ ´Ù¸¥ Ç¥ÇöÀû ¹®±¸´Â ¾ø´Ù. ±×·¡¼­ Á¦ÀÛÀÚ´Â ÀÌ ¿¤·¹¸àÆ®µéÀ» ½ºÅ¸ÀϽ¬Æ®, lang ¾ÖÆ®¸®ºäÆ® µî°ú °áÇÕÇÏ¿© »ç¿ëÇÏ¿© ÀÚ½ÅÀÇ ÇÊ¿ä¿Í ±¸¹Ì¿¡ ¸ÂÃß¾î HTML¿¡ Àû¿ë ÇÒ ¼ö ÀÖ´Ù.

¿¹¸¦ µé¾î °í°´ Á¤º¸ÀÇ µ¥ÀÌÅͺ£À̽º¿¡ ±âÃʸ¦ µÐ HTML ¹®¼­¸¦ ¸¸µç´Ù°í °¡Á¤ ÇØ º¸ÀÚ. HTML¿¡´Â °í°´À̸§, ÀüÈ­ ¹øÈ£, ÀüÀÚ ¿ìÆí ÁÖ¼Ò, µî°ú °°Àº ¿ÀºêÁ§Æ®¸¦ ÁöÁ¤ÇÏ´Â ¿¤·¹¸àÆ®µéÀÌ ¾øÀ¸¹Ç·Î, ¿øÇÏ´Â ±¸Á¶ÀûÀÎ È¿°ú¿Í Ç¥ÇöÀûÀÎ È¿°ú¸¦ ¾ò±â À§ÇØ DIV¿Í SPANÀ» »ç¿ëÇÑ´Ù. Á¤º¸¸¦ ±¸¼ºÇϱâ À§ÇÏ¿© ¿ì¸®´Â TABLE ¿¤·¹¸àÆ®¸¦ ¾Æ·¡¿Í °°ÀÌ »ç¿ë ÇÒ ¼ö ÀÖ´Ù.

<!-- °í°´ µ¥ÀÌÅͺ£À̽º·Î ºÎÅÍÀÇ µ¥ÀÌÅÍ ¿¹Á¦:  -->
<!-- °í°´À̸§: Stephane Boyera,
	ÀüÈ­ ¹øÈ£: (212) 555-1212, ÀüÀÚ ¿ìÆí ÁÖ¼Ò: sb@foo.org -->

<DIV id="client-boyera" class="client">
<P><SPAN class="client-title">°í°´ Á¤º¸:</SPAN>
<TABLE class="client-data">
<TR><TH>¼º:<TD>Boyera</TR>
<TR><TH>À̸§:<TD>Stephane</TR>
<TR><TH>ÀüÈ­ ¹øÈ£:<TD>(212) 555-1212</TR>
<TR><TH>ÀüÀÚ ¿ìÆí:<TD>sb@foo.org</TR>
</TABLE>
</DIV>

<DIV id="client-lafon" class="client">
<P><SPAN class="client-title">°í°´ Á¤º¸:</SPAN>
<TABLE class="client-data">
<TR><TH>¼º:<TD>Lafon</TR>
<TR><TH>À̸§:<TD>Yves</TR>
<TR><TH>ÀüÈ­ ¹øÈ£:<TD>(617) 555-1212</TR>
<TR><TH>ÀüÀÚ ¿ìÆí:<TD>yves@coucou.com</TR>
</TABLE>
</DIV>

³ªÁß¿¡ ÀÌµé µ¥ÀÌÅͺ£À̽º Ç׸ñµéÀÇ Ç¥ÇöÀ» Àß Çϱâ À§ÇÏ¿© ½ºÅ¸ÀϽ¬Æ®¸¦ ½±°Ô Ãß°¡ ÇÒ ¼ö ÀÖ´Ù.

´Ù¸¥ »ç¿ë ¿¹Á¦ class¿Í id ¾ÖÆ®¸®ºäÆ®¸¦ ÂüÁ¶Ç϶ó.

º¸´Â »ç¿ëµµ±¸´Â ÀϹÝÀûÀ¸·Î DIV ¿¤·¹¸àÆ®ÀÇ ¾Õ°ú µÚ¿¡ ¾Æ·¡ ¿¹Á¦¿Í °°ÀÌ ÁٹٲÞÀ» ³Ö´Â´Ù.

<P>aaaaaaaaa<DIV>bbbbbbbbb</DIV><DIV>ccccc<P>ccccc</DIV>

ÀÌ°ÍÀº ¾Æ·¡¿Í °°ÀÌ Ç¥ÇöµÈ´Ù.

aaaaaaaaa
bbbbbbbbb
ccccc

ccccc

7.5.5 Çìµù(Heading): H1, H2, H3, H4, H5, H6 ¿¤·¹¸àÆ®

<!ENTITY % heading "H1 | H2 | H3 | H4 | H5 | H6">
<!-- H1(°¡Àå Áß¿ä)ºÎÅÍ H6(°¡Àå ´ú Áß¿ä)±îÁö 6 ´Ü°è°¡ ÀÖ½¿. -->

<!ELEMENT (%heading;)  - - (%inline;)* -- Çìµù -->
<!ATTLIST (%heading;)
 %attrs;                              -- %coreattrs, %i18n, %events --
>

½ÃÀÛű×: ÇÊ¿ä ÇÔ, Á¾·áű×: ÇÊ¿ä ÇÔ

´Ù¸¥ °÷¿¡¼­ Á¤ÀÇ µÈ ¾ÖÆ®¸®ºäÆ®

Çìµù ¿¤·¹¸àÆ®´Â Ç׸ñÀ» °³·«ÀûÀ¸·Î ¼Ò°³Çϱâ À§ÇÏ¿© Áß¿äÇÑ »çÇ×(topic)À» ±â¼úÇÑ´Ù. Çìµù Á¤º¸´Â ¿¹¸¦ µé¾î »ç¿ëµµ±¸¿¡ ÀÇÇÏ¿© ÀÚµ¿ÀûÀ¸·Î ¹®¼­ÀÇ ¸ñÂ÷¸¦ ¸¸µå´Âµ¥ »ç¿ë µÉ ¼ö ÀÖ´Ù.

HTMLÀÇ ÇìµùÀº °¡Àå Áß¿äÇÑ H1·Î ºÎÅÍ °¡Àå ´ú Áß¿äÇÑ H6±îÁö 6 ´Ü°è°¡ ÀÖ´Ù. º¸´Â ºê¶ó¿ìÀú¿¡¼­ ÀϹÝÀûÀ¸·Î Áß¿äÇÑ Çìµù Àϼö·Ï Å« ±ÛÀڷΠǥÇöÇÑ´Ù.

´ÙÀ½ ¿¹Á¦´Â ÇìµùÀ» ±× ´ÙÀ½¿¡ µû¶ó¿À´Â ¹®¼­ Ç׸ñÀÇ DIV ¿¤·¹¸àÆ®¿ÍÀ» ¾î¶»°Ô °áÇÕÇÏ¿© »ç¿ë ÇÒ °ÍÀΰ¡¸¦ º¸¿© ÁØ´Ù. ±×·¸°Ô ÇÏ¿© ½ºÅ¸ÀϽ¬Æ®·Î Ç׸ñ (¹è°æ»ö»ó, Æùµå ¼³Á¤, µî)ÀÇ ½ºÅ¸ÀÏÀ» Á¤ÀÇ ÇÒ ¼ö ÀÖ´Ù.

<DIV class="section" id="forest-elephants">
<H1>½£ ¼ÓÀÇ ÄÚ³¢¸®µé</H1>
<P>ÀÌ Ç׸ñ¿¡¼­´Â Àß ¾Ë·ÁÁ® ÀÖÁö ¾Ê´Â ½£ ¼ÓÀÇ ÄÚ³¢¸® µé¿¡ ´ëÇØ ¾Ë¾Æº»´Ù.
 ...ÀÌ Ç׸ñ °è¼Ó ...
<DIV class="subsection" id="forest-habitat">
<H2>¼­½Ä</H2>
<P>½£ ¼ÓÀÇ ÄÚ³¢¸®µéÀº ³ª¹« ¾È¿¡¼­ »ìÁö ¾Ê°í ³ª¹«µé »çÀÌ¿¡¼­ »ê´Ù.
 ...ÀÌ ºÎ¼Ó Ç׸ñ °è¼Ó...
</DIV>
</DIV>

ÀÌ ±¸Á¶´Â ½ºÅ¸ÀÏ Á¤º¸·Î ¾Æ·¡¿Í °°ÀÌ Àå½Ä ÇÒ ¼ö ÀÖ´Ù.

<HEAD>
<TITLE>... ¹®¼­ Á¦¸ñ ...</TITLE>
<STYLE type="text/css">
DIV.section { text-align: justify; font-size: 12pt}
DIV.subsection { text-indent: 2em }
H1 { font-style: italic; color: green }
H2 { color: green }
</STYLE>
</HEAD>

¹øÈ£ÀÖ´Â Ç׸ñµé°ú ÂüÁ¶
HTMLÀº ÇìµùÀ¸·Î ºÎÅÍ ÀÚüÀûÀ¸·Î Ç׸ñ ¹øÈ£À» »ý¼ºÇÏÁö ¾Ê´Â´Ù. ±×·¯³ª »ç¿ëµµ±¸°¡ À̸¦ Áö¿ø ÇÒ ¼ö ÀÖ´Ù. ¸ÓÁö¾Ê¾Æ CSS¿Í °°Àº ½ºÅ¸ÀϽ¬Æ® ¾ð¾î°¡ Á¦ÀÛÀÚµé·Î ÇÏ¿©±Ý Ç׸ñ ¹øÈ£¸¦ ó¸® ÇÒ ¼ö ÀÖ°Ô ÇØ ÁÙ °ÍÀÌ´Ù. ÀÎ¼â µÈ ¹®¼­¿¡¼­ ¾ÕÀ¸·Î(forward) ÂüÁ¶¸¦ ½±°Ô: Ç׸ñ 7.2 ÂüÁ¶Ç϶ó.

¾î¶² »ç¶÷µéÀº Çìµù ´Ü°è ¶Ù¾î ³Ñ±â¸¦ ºÒ·®ÇÑ °ÍÀ¸·Î »ý°¢Çϴµ¥, ±×µéÀº H2¸¦ ¶Ù¾î ³ÑÀº H1 H3 H1À» ¼ö¿ëÇÏÁö ¾Ê°í H1 H2 H1À» ¼ö¿ëÇÑ´Ù.

7.5.6 ADDRESS(ÁÖ¼Ò) ¿¤·¹¸àÆ®

<!ELEMENT ADDRESS - - (%inline;)* -- Á¦ÀÛÀÚ¿¡ ´ëÇÑ Á¤º¸ -->
<!ATTLIST ADDRESS
 %attrs;                         -- %coreattrs, %i18n, %events --
>

½ÃÀÛű×: ÇÊ¿ä ÇÔ, Á¾·áű×: ÇÊ¿ä ÇÔ

´Ù¸¥ °÷¿¡¼­ Á¤ÀÇ µÈ ¾ÖÆ®¸®ºäÆ®

ADDRESS ¿¤·¹¸àÆ®´Â Á¦ÀÛÀÚ°¡ Á¢ÃËÀ» À§ÇÑ ¿¬¶ôó Á¤º¸¸¦ Á¦°øÇϱâ À§ÇÏ¿© ¹®¼­ ¶Ç´Â Æû(form)°ú °°Àº ¹®¼­ÀÇ Áß¿ä ºÎºÐ¿¡ »ç¿ë ÇÒ ¼ö ÀÖ´Ù. ÀÌ ¿¤·¹¸àÆ®´Â ÁÖ·Î ¹®¼­ÀÇ ½ÃÀÛ ¶Ç´Â ³¡ ºÎºÐ¿¡ »ç¿ëÇÑ´Ù.

¿¹¸¦ µé¾î W3C À¥ ½ÎÀÌÆ®ÀÇ HTML °ü·Ã µÈ ÆäÀÌÁö¿¡ ´ÙÀ½ÀÇ ¿¬¶ôó Á¤º¸¸¦ Æ÷ÇÔ ÇÒ ¼ö ÀÖ´Ù.

<ADDRESS>
<A href="../People/Raggett/">Dave Raggett</A>,
<A href="../People/Arnaud/">Arnaud Le Hors</A>,
<A href="Activity">W3CÀÇ HTML °ü·Ã È°µ¿</A>¸¦ À§ÇÑ »ç¶÷ÀÇ ¿¬¶ôó<BR>
$Date: 1998/04/02 00:20:03 $
</ADDRESS>
±ÍÇÏÀÇ ºê¶ó¿ìÀú¿¡¼­ ÀÌ Ç¥ÇöÀº ¾Æ·¡¿Í °°´Ù.(À¯È¿ÇÏÁö ¾ÊÀº ¿¬°á)
Dave Raggett Arnaud Le Hors W3CÀÇ HTML °ü·Ã È°µ¿¸¦ À§ÇÑ »ç¶÷ÀÇ ¿¬¶ôó
$Date: 1998/04/02 00:20:03 $

ÀÌ Trio ȨÆäÀÌÁö ¹®¼­(http://trio.co.kr/webrefer/html40/struct/global.html)´Â ÀÚÀ¯·ÎÀÌ ¿¬°á »ç¿ëÀÌ °¡´ÉÇÔ.