W3C12 ¿¬°á(Link)Trio ȨÆäÀÌÁö
¸ñÂ÷
  1. ¿¬°á°ú ¾ØÄ¿(anchor)ÀÇ ¼Ò°³
    1. ¿¬°á µÈ ÀÚ¿øÀÇ ¹æ¹®
    2. ±âŸ ¿¬°á °ü°è
    3. ¾ØÄ¿¿Í ¿¬°áÀÇ ¼³Á¤
    4. ¿¬°á Á¦¸ñ
    5. ±¹Á¦È­¿Í ¿¬°á
  2. A ¿¤·¹¸àÆ®
    1. ¾ØÄ¿ À̸§ÀÇ ¹®¹ý
    2. ³×½ºÆ® µÈ(nested) ¿¬°áÀº Ʋ¸° °ÍÀÌ´Ù.
    3. id ¾ÖÆ®¸®ºäÆ®¸¦ °®´Â ¾ØÄ¿
    4. ÀÚ¿øÀÌ ¾ø°Å³ª ÀÎ½Ä ÇÒ ¼ö ¾ø´Â ÀÚ¿øÀÇ °æ¿ì
  3. ¹®¼­ÀÇ °ü°è: LINK ¿¤·¹¸àÆ®
    1. ¾ÕÀ¸·Î(forward)¿Í µÚ·Î(reverse)ÀÇ ¿¬°á
    2. ¿¬°á°ú ¿ÜºÎ ½ºÅ¸ÀϽ¬Æ®
    3. ¿¬°á°ú °Ë»ö ¿£Áø(search engine)
  4. °æ·Î(path) Á¤º¸: BASE ¿¤·¹¸àÆ®
    1. »ó´ë URI ã±â

12.1 ¿¬°á(link)°ú ¾ØÄ¿(anchor)ÀÇ ¼Ò°³

HTMLÀº dzºÎÇÑ ÅؽºÆ®¿Í ±¸Á¶È­ µÈ ¹®¼­¸¦ À§ÇÏ¿© ¸¹Àº ¹®±¸¸¦ Á¦°øÇϳª, ´Ù¸¥ Á¦ÀÛ ¾ð¾î¿Í ´Ù¸¥ Á¡Àº ÇÏÀÌÆÛ ÅؽºÆ®(hypertext)¿Í ¹®¼­ ¿¬°á ±â´É(interactive)µéÀ» °®°í ÀÖ´Ù´Â °ÍÀÌ´Ù. ÀÌ Ç׸ñÀº ±âº»ÀûÀÎ ÇÏÀÌÆÛ ¸µÅ©ÀÇ ±¸Á¶ÀÎ ¿¬°á(link: hyperlink ¶Ç´Â Web link)À» ¼³¸íÇÑ´Ù. ¿¬°áÀ̶õ ÇÑ À¥ ÀÚ¿øÀ¸·Î ºÎÅÍ ´Ù¸¥ À¥ ÀÚ¿ø¿¡ ¿¬°áÇÏ´Â °ÍÀÌ´Ù. ´Ü¼øÇÑ °³³äÀÌÁö¸¸ ÀÌ ¿¬°áÀÌ À¥À» ¼º°øÀûÀ¸·Î º¸±ÞµÇ°Ô ÇÑ ÇϳªÀÇ ÇÙ½ÉÀûÀÎ ÈûÀÌ µÇ¾ú´Ù.

link´Â ¾ØÄ¿(anchor)¿Í ¹æÇâ(direction) µÎ°³ÀÇ ³¡À» °¡Áö°í ÀÖ´Ù. ¿¬°áÀº ¿øõ("source") ¾ØÄ¿·Î »çÀÛÇÏ°í, ¸ñÇ¥("destination" ) ¾ØÄ¿·Î ³¡³ª¸ç, ÀÌ´Â À̹ÌÁö, ºñµð¿À Á¶°¢(video clip), ¼Ò¸®(sound bite), ÇÁ·Î±×·¥, HTML ¹®¼­, HTML ¹®¼­ ¾ÈÀÇ ¿¤·¹¸àÆ® µî ¾î¶² À¥ ÀÚ¿øµµ µÉ ¼ö ÀÖ´Ù.

12.1.1 ¿¬°á µÈ ÀÚ¿øÀÇ ¹æ¹®

¿¬°áÀÇ µðÆúÆ® ÀÛµ¿Àº ´Ù¸¥ À¥ ÀÚ¿øÀ» Àоî ÀÛ¿ëÇÏ°Ô ÇÏ´Â °ÍÀÌ´Ù. ÀÌ ÀÛµ¿Àº ±× ¿¬°áÀ» Å©¸¯Çϰųª Å°º¸µå¿¡¼­ ÀÔ·ÂÇÏ´Â µîÀ¸·Î ¼±Åà ÇßÀ» ¶§ ÀϾ´Ù.

´ÙÀ½ HTMLÀº µÎ°³ÀÇ ¿¬°áÀ» °®´Âµ¥, ÇϳªÀÇ ¸ñÇ¥ ¾ØÄ¿´Â "chapter2.html"ÀÇ À̸§À» °®´Â HTML ¹®¼­ÀÌ°í, ´Ù¸¥ ÇϳªÀÇ ¸ñÇ¥ ¾ØÄ¿´Â "forest.gif"¶ó´Â À̹ÌÁö È­ÀÏÀÌ´Ù.

<BODY>
 ... ´Ù¸¥ ÅؽºÆ® ...
<P>Ãß°¡ Á¤º¸´Â <A href="chapter2.html">Ç׸ñ 2</A>¿¡¼­ º¼ ¼ö ÀÖ´Ù.
 ÀÌ <A href="../images/forest.gif">À̹ÌÁö</A>µµ º¸½Ã¿À.
</BODY>

¸¶¿ì½º¸¦ Å©¸¯Çϰųª, Å°º¸µå¿¡¼­ ÀÔ·ÂÇϰųª, À½¼º ¸í·É µîÀ¸·Î ÀÌµé ¿¬°áÀ» ÀÛµ¿½ÃÅ°¸é, »ç¿ëÀÚ´Â À̵é ÀÚ¿øµéÀ» ¹æ¹® ÇÒ ¼ö ÀÖ´Ù. °¢ ÀÚ¿ø ¾ØÄ¿ÀÇ href ¾ÖÆ®¸®ºäÆ®´Â URI·Î ¸ñÇ¥ ¾ØÄ¿ÀÇ ÁÖ¼Ò¸¦ ÁöÁ¤ÇÑ´Ù.

¿¬°áÀÇ ¸ñÇ¥(destination) ¾ØÄ¿´Â HTML ¹®¼­ ¾È¿¡ ÀÖ´Â ¿¤·¹¸àÆ®°¡ µÉ ¼ö ÀÖ´Ù. ¸ñÇ¥ ¾ØÄ¿´Â ¾ØÄ¿ À̸§°ú ºÎºÐ ÁöÁ¤ÀÚ(fragment identifier) À̸§À» Æ÷ÇÔÇÏ´Â ¾î¶² URI ÁÖ¼Ò¸¦ °¡Á®¾ßÇÑ´Ù.

HTML ¹®¼­¿¡¼­ ¸ñÇ¥ ¾ØÄ¿´Â A ¿¤·¹¸àÆ®¿¡¼­ name ¾ÖÆ®¸®ºäÆ®·Î À̸§ Áö¿ö Áø °ÍÀ̳ª, id ¾ÖÆ®¸®ºäÆ®·Î À̸§Áö¿ö Áø ´Ù¸¥ ¾î¶² ¿¤·¹¸àÆ®µµ µÉ ¼ö ÀÖ´Ù.

±×·¡¼­ ¿¹¸¦ µé¾î, Á¦ÀÛÀÚ´Â °°Àº ¹®¼­ ¾È¿¡¼­ Çì´õ(header) ¿¤·¹¸àÆ® H2, H3 µî¿¡ ¿¬°áÇÏ´Â ¸ñÂ÷¸¦ ¸¸µé ¼ö ÀÖ´Ù. A ¿¤·¹¸àÆ®¸¦ ÀÌ¿ëÇÏ¿© ¸ñÇ¥ ¾ØÄ¿ÀÇ ÀÛ¼ºÀº ¾Æ·¡¿Í °°ÀÌ ÇÒ ¼ö ÀÖ´Ù.

<H1>¸ñÂ÷</H1>
<P><A href="#section1">¼Ò°³</A><BR>
<A href="#section2">¹è°æ</A><BR>
<A href="#section2.1">°³ÀÎÀû ÁÖ¼®</A><BR>
 ...¸ñÂ÷ÀÇ ³ª¸ÓÁö ºÎºÐ ...
 ...¹®¼­ º»Ã¼(body)...
<H2><A name="section1">¼Ò°³</A></H2>
 ...section 1...
<H2><A name="section2">¹è°æ</A></H2>
 ...section 2...
<H3><A name="section2.1">°³ÀÎÀû ÁÖ¼®</A></H3>
 ...section 2.1...

Çì´õ(header) ¿¤·¹¸àÆ®µé ÀÚü¿¡¼­ ¾ØÄ¿µéÀ» ¸¸µé¾î °°Àº È¿°ú¸¦ ³¾ ¼ö ÀÖ´Ù.

<H1>¸ñÂ÷</H1>
<P><A href="#section1">¼Ò°³</A><BR>
<A href="#section2">¹è°æ</A><BR>
<A href="#section2.1">°³ÀÎÀû ÁÖ¼®</A><BR>
 ...¸ñÂ÷ÀÇ ³ª¸ÓÁö ºÎºÐ ...
 ...¹®¼­ º»Ã¼(body)...
<H2 id="section1">¼Ò°³</H2>
 ...section 1...
<H2 id="section2">¹è°æ</H2>
 ...section 2...
<H3 id="section2.1">°³ÀÎÀû ÁÖ¼®</H3>
 ...section 2.1...

12.1.2 ±âŸ ¿¬°á(link) °ü°è

¹«¾ùº¸´Ùµµ ¸¹ÀÌ »ç¿ë µÇ´Â ¹æ¹ýÀº À§ÀÇ ¿¹Á¦¿¡¼­ ¼³¸í µÈ °Í°ú °°ÀÌ ´Ù¸¥ À¥ ÀÚ¿øÀ» ¿¬°áÇÏ¿© ÀдÂ(retrieve) °ÍÀÌ´Ù. ±×·¯³ª, Á¦ÀÛÀÚ ´Ü¼øÈ÷ "ÀÌ ¿¬°áÀÇ °ü·Ã ÀÚ¿øÀ» ¹æ¹®ÇÏ¿© È°¼ºÈ­ ½ÃÄѶó"´Â ´ë½Å, ÀÚ¿øµé »çÀÌÀÇ ´Ù¸¥ °ü°èµéÀ» Ç¥ÇöÇÏ´Â ¿¬°áÀ» ÇÒ ÇÊ¿ä°¡ ÀÖÀ» ¼ö ÀÖ´Ù. ´Ù¸¥ ŸÀÔ°úÀÇ °ü°è¸¦ ÁöÁ¤ ÇÑ ¿¬°áÀº ±× ¿øõ ¾ØÄ¿¿¡ ÁöÁ¤ µÈ Çϳª ÀÌ»óÀÇ ¿¬°á ŸÀÔ(type)À» °®´Â´Ù.

¿¬°áÀÇ ÀÓ¹«(role)´Â A ¶Ç´Â LINK¿¡ ÁöÁ¤ µÈ rel°ú rev ¾ÖÆ®¸®ºäÆ®¸¦ ÀÇÇÏ¿© Á¤ÀǵȴÙ.

¿¹¸¦ µé¾î LINK ¿¤·¹¸àÆ®¿¡ ÀÇÇÏ¿© Á¤ÀÇ µÈ ¿¬°áÀº ÀÏ·ÃÀÇ ¹®¼­µé ¾È¿¡¼­ÀÇ ±× ¹®¼­ÀÇ À§Ä¡¸¦ ÁöÁ¤ ÇÒ ¼ö ÀÖ´Ù.

´ÙÀ½ ¿¹Á¦¿¡¼­ "Chapter 5"ÀÇ Á¦¸ñÀ» °¡Áø ¹®¼­ ¾È¿¡¼­ ÀÌÀü°ú ´ÙÀ½ Àå(chapter)À» °¡¸®Å°´Â ¿¬°áÀ» °®´Â´Ù.

<HEAD>
 ... ´Ù¸¥ Çìµå(head) Á¤º¸ ...
<TITLE>Chapter 5</TITLE>
 <LINK rel="prev" href="chapter4.html">
 <LINK rel="next" href="chapter6.html">
</HEAD>

ù¹ø° ¿¬°áÀÇŸÀÔÀº "prev"ÀÌ°í, µÎ¹ø°´Â "next"À̸ç, ÀÌ µÎ°¡Áö´Â Àß ÀÚÁÖ »ç¿ëµÇ´Â ¿¬°á ŸÀÔÀÌ´Ù.

LINK·Î ÁöÁ¤ µÈ ¿¬°áµéÀº »ç¿ëµµ±¸¿¡ ÀÇÇÏ¿© Ç×ÇØ ¼ö´Ü(navigation tool) µîÀÇ ´Ù¸¥ ¹æ¹ýÀ¸·Î Ç¥ÇöµÇÁö ¸¸, ¹®¼­ÀÇ ³»¿ë°ú ´õºÎ·¯ Ç¥½ÃÇÏ´Â °ÍÀº ¾Æ´Ï´Ù.

±× °ÍÀÌ Ç×ÇØ¿¡ »ç¿ëµÇÁö ¾Ê´õ¶óµµ Èï¹Ì ÀÖ´Â ¹æ½ÄÀ¸·Î Çؼ® µÉ ¼ö ÀÖ´Ù. ¿¹¸¦ µé¾î, ÀÏ·ÃÀÇ HTML ¹®¼­µéÀ» ÇϳªÀÇ ¹®¼­ ó·³ ÀμâÇÏ´Â »ç¿ëµµ±¸¿¡¼­, ÀÌ ¿¬°á Á¤º¸¸¦ ¿¬¼Ó µÈ ¹®¼­µéÀÇ ±âº» ÇüÅ·Π»ç¿ë ÇÒ ¼ö ÀÖ´Ù. ¿¬°á°ú °Ë»ö ¿£Áø(search engine)¿¡ Ãß°¡ Á¤º¸°¡ Á¦°ø µÇ¾ú´Ù.

12.1.3 ¾ØÄ¿(anchor)¿Í ¿¬°á(link)ÀÇ ¼³Á¤

¿©·¯°³ÀÇ HTML ¿¤·¹¸àÆ®¿Í ¾ÖÆ®¸®ºäÆ®°¡ ´Ù¸¥ ÀÚ¿ø, ¿¹¸¦ µé¾î IMG, FORM ¿¤·¹¸àÆ® µî,¿¡ ¿¬°áÀ» ¸¸µéÁö ¸¸, ÀÌ Àå¿¡¼­´Â LINK¿Í A ¿¤·¹¸àÆ®¿¡ ÀÇÇÏ¿© ¸¸µé¾î Áö´Â ¿¬°á°ú ¾ØÄ¿¿¡ ´ëÇÏ¿© ¾Ë¾Æº»´Ù. LINK ¿¤·¹¸àÆ®´Â ¹®¼­ÀÇ Çìµå(head)¿¡ ¸¸ °¡Áú ¼ö ÀÖ°í, A ¿¤·¹¸àÆ®´Â º»Ã¼(body)¿¡ ¸¸ °¡Áú ¼ö ÀÖ´Ù.

A ¿¤·¹¸àÆ®¿¡ href ¾ÖÆ®¸®ºäÆ®°¡ ÁöÁ¤µÇ¾î ÀÖÀ¸¸é, ÀÌ ¿¤·¹¸àÆ®´Â »ç¿ëÀÚ°¡ À¥ ÀÚ¿øÀ» È°¼ºÈ­ ÇÒ ¶§ ¿¬°áÇØ¾ß ÇÒ ¾ØÄ¿ÀÇ À§Ä¡(source)ÀÇ ÁöÁ¤ÀÌ´Ù. ±× ¾ØÄ¿ÀÇ À§Ä¡´Â A ÀνºÅº½º(instance)ÀÇ À§Ä¡ÀÌ°í ¸ñÇ¥(destination) ¾ØÄ¿´Â ±× À¥ÀÇ ÀÚ¿øÀÌ´Ù.

¿¬°á µÈ ÀÚ¿øÀº »ç¿ëµµ±¸¿¡ ÀÇÇÏ¿©, ¿¹¸¦ µé¸é, »ç¿ëµµ±¸ÀÇ °°Àº â(window)¿¡ »õ·Î¿î HTML ¹®¼­¸¦ ¿­°Å³ª, ´Ù¸¥ â¿¡ ¿­°Å³ª, ÀÚ¿øÀ» ó¸®Çϱâ À§ ÇØ »õ·Î¿î ÇÁ·Î±×·¥À» ½ÃÀÛÇÏ´Â µîÀÇ ¿©·¯ °¡Áö ¹æ¹ýÀ¸·Î Ç¥Çö ÇÒ ¼ö ÀÖ´Ù. A ¿¤·¹¸àÆ®´Â ÅؽºÆ®(, À̹ÌÁö, µîÀÇ ³»¿ëÀ» °®±â ¶§¹®¿¡, »ç¿ëµµ±¸´Â ³»¿ë¿¡ ¹ØÁÙÀ» ±ß´Â µîÀÇ ¹æ¹ýÀ¸·Î ÀÌµé ³»¿ëÀÌ ¿¬°áµÇ¾îÀִٴ ǥÇöÇÑ´Ù.

A ¿¤·¹¸àÆ®¿¡ name ¶Ç´Â id ¾ÖÆ®¸®ºäÆ®°¡ ¼³Á¤µÇ¸é, ÀÌ ¾ÖÆ®¸®ºä´Â ´Ù¸¥ ¿¬°áµé°ú ±¸º°µÈ´Ù´Â °ÍÀ» ÀǹÌÇÑ´Ù.

Á¦ÀÛÀÚ´Â °°Àº A ¾È¿¡ name°ú href ¾ÖÆ®¸®ºäÆ®¸¦ µ¿½Ã¿¡ ¼³Á¤ ÇÒ ¼ö ÀÖ´Ù.

LINK ¿¤·¹¸àÆ®´Â ÇöÀçÀÇ ¹®¼­¿Í ´Ù¸¥ ÀÚ¿ø°úÀÇ °ü°è¸¦ Á¤ÀÇÇÑ´Ù. LINK´Â ³»¿ë(content)À» °¡Áö°í ÀÖÁö ¾ÊÁö¸¸, »ç¿ëµµ±¸¿¡ µû¶ó¼­´Â Á¤ÀÇ µÈ °ü°è¸¦ Ç¥Çö ÇÒ ¼öµµ ÀÖ´Ù.

12.1.4 ¿¬°á Á¦¸ñ(title)

title ¾ÖÆ®¸®ºäÆ®´Â Ãß°¡ÀûÀÎ ¿¬°á Ư¼ºÀ» Á¦°øÇϱâ À§ÇÏ¿©, A¿¡¼­³ª LINK¿¡¼­ ´Ù »ç¿ë ÇÒ ¼ö ÀÖ´Ù. ÀÌ Á¤º¸´Â »ç¿ëµµ±¸·Î ÇÏ¿©±Ý ¸»Çϰųª, µµ±¸ Á¶°¢À¸·Î Ç¥ÇöÇϰųª, Ä¿¼­ À̹ÌÁö¸¦ º¯È­ ½ÃÅ°´ÂµîÀ¸·Î Ç¥Çö Çϴµ¥ »ç¿ë µÉ ¼ö ÀÖ´Ù.

¾Õ ¿¹Á¦ÀÇ °¢ ¿¬°á¿¡ Á¦¸ñÀ» Àû¿ëÇϸé:

<BODY>
 ... ´Ù¸¥ ÅؽºÆ® ...
 <P>Ãß°¡ Á¤º¸´Â 
	<A href="chapter2.html" title="Ç׸ñ 2·Î °£´Ù">Ç׸ñ 2</A>¿¡ ÀÖ´Ù.
 <A href="./chapter2.html" title="Ç׸ñ 2ÀÌ´Ù.">Ç׸ñ 2</A>.
 ÀÌ <A href="../images/forest.gif" title="Ç׸ñ 2ÀÌ´Ù.">À̹ÌÁö</A>µµ º¸½Ã¿À.
</BODY>

12.1.5 ±¹Á¦È­¿Í ¿¬°á(link)

¿¬°áµéÀº ´Ù¸¥ Á¾·ùÀÇ ±ÛÀÚ ¿£ÄÚµùÀ¸·Î µÈ ¹®¼­¸¦ Áö½Ã ÇÒ ¼ö Àֱ⠶§¹®¿¡, A¿Í LINK ¿¤·¹¸àÆ®´Â charset ¾ÖÆ®¸®ºäÆ®¸¦ Áö¿øÇÑ´Ù. ÀÌ ¾ÖÆ®¸®ºäÆ®´Â Á¦ÀÛÀÚ°¡ »ç¿ëµµ±¸¿¡°Ô ¿¬°á »ó´ëÆí µ¥ÀÌÅÍ¿¡ ´ëÇÑ ¿£ÄÚµù Á¤º¸¸¦ Á¦°øÇÑ´Ù.

hreflang ¾ÖÆ®¸®ºäÆ®´Â »ç¿ëµµ±¸¿¡°Ô ¿¬°á ÀÚ¿øÀÇ ¾ð¾î Á¤º¸¸¦ Á¦°øÇÑ´Ù. ÀÌ´Â lang ¾ÖÆ®¸®ºäÆ®°¡ ¿¤·¹¸àÆ®ÀÇ ³»¿ëÀ̳ª ¾ÖÆ®¸®ºäÆ® °ªÀÇ ¾ð¾î¿¡ ´ëÇÑ Á¤º¸¸¦ Á¦°øÇÏ´Â °Í°ú °°Àº ¹æ½ÄÀÌ´Ù.

»ç¿ëµµ±¸´Â ÀÌ Ãß°¡ÀûÀÎ Á¤º¸¸¦ º¸¿ÏÇÏ¿© »ç¿ëÀÚ¿¡°Ô ¾ûÅ͸®·Î Ç¥½ÃÇÏ´Â °ÍÀ» ÇÇÇØ¾ß ÇÏ°í, ±× ´ë½Å ¹®¼­ÀÇ ¹Ù¸¥ Ç¥ÇöÀ» À§ÇÑ ÀÚ¿øÀ» Á¦°øÇϰųª, ±×¿Í °°Àº ÀÚ¿øÀÇ Á¦°øÀÌ ºÒ°¡´ÉÇϸé, ÃÖ¼ÒÇÑ ±× ¹®¼­°¡ Àß Ç¥ÇöµÇÁö ¾ÊÀ»¼ö ÀÖ´Ù´Â Á¡À» °æ°íÇÏ°í, ±× ÀÌÀ¯¸¦ ¼³¸í ÇØ¾ß ÇÑ´Ù.

12.2 A ¿¤·¹¸àÆ®

<!ELEMENT A - - (%inline;)* -(A)     -- ¾ØÄ¿(anchor) -->
<!ATTLIST A
 %attrs;                             -- %coreattrs, %i18n, %events --
 charset     %Charset;      #IMPLIED -- ¿¬°á ÀÚ¿øÀÇ ±ÛÀÚ ¿£ÄÚµù(char encoding)--
 type        %ContentType;  #IMPLIED -- ¾È³»Àû(advisory) ÄÁÅÙÆ®(content) ŸÀÔ --
 name        CDATA          #IMPLIED -- ¿¬°á À̸§(named link)ÀÇ ¸ñÇ¥ --
 href        %URI;          #IMPLIED -- ¿¬°á µÈ ÀÚ¿øÀÇ URI --
 hreflang    %LanguageCode; #IMPLIED -- ¾ð¾î ÄÚµå --
 rel         %LinkTypes;    #IMPLIED -- ¿¬°á(link) ŸÀÔ(type) ¾ÕÀ¸·Î --
 rev         %LinkTypes;    #IMPLIED -- ¿¬°á ŸÀÔ µÚ·Î --
 accesskey   %Character;    #IMPLIED -- Á¢¼ÓÅ°(key) ±ÛÀÚ --
 shape       %Shape;        rect     -- »ç¿ëÀÚÃø À̹ÌÁö¸Ê°ú °°ÀÌ »ç¿ë --
 coords      %Coords;       #IMPLIED -- »ç¿ëÀÚÃø À̹ÌÁö¸Ê°ú °°ÀÌ »ç¿ë --
 tabindex    NUMBER         #IMPLIED -- ÅÇ(tab)¹øÈ£·Î ÁöÁ¤ÇÑ À§Ä¡ --
 onfocus     %Script;       #IMPLIED -- ÃÊÁ¡(focus) ¸¶Ãã ¿¤·¹¸àÆ® --
 onblur      %Script;       #IMPLIED -- ÃÊÁ¡ ¾ø¾Ú ¿¤·¹¸àÆ® --
>

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

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

name = cdata [´ë¼Ò¹®ÀÚ ±¸º°: CS]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ÇöÀç ¾ØÄ¿(anchor)°¡ ´Ù¸¥ ¿¬°á°ú ±¸º°µÇµµ·Ï Çϱâ À§ÇÑ À̸§À» ÁöÁ¤ÇÏ´Â °ÍÀ̸ç, ÀÌ ¾ØÄ¿ À̸§Àº ÇÑ ¹ø ¸¸(unique) ÀÖ¾î¾ß Çϸç, ÇöÀçÀÇ ¹®¼­¿¡¼­ Àû¿ëµÈ´Ù. ÀÌ ¾ÖÆ®¸®ºäÆ®´Â id ¾ÖÆ®¸®ºäÆ®¿Í °°Àº ÀÚ¸®¸¦ »ç¿ëÇÑ´Ù.
href = uri [´ë¼Ò¹®ÀÚ Å¸ÀÔ ÂüÁ¶: CT]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â À¥ ÀÚ¿øÀÇ À§Ä¡¸¦ ÁöÁ¤ÇÏ¿© ÇöÀçÀÇ ¿¤·¹¸àÆ®(source anchor)¿Í ÀÌ ¾ÖÆ®¸®ºäÆ®°¡ ÁöÁ¤ÇÑ ¸ñÇ¥ ¾ØÄ¿(destination anchor)»çÀ̸¦ ¿¬°á ½ÃÄÑ ÁØ´Ù.
hreflang = langcode [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â href°¡ ÁöÁ¤ µÈ °æ¿ì¿¡ ÇÑÇØ, href·Î ÁöÁ¤ µÈ ÀÚ¿øÀÇ ±âÃÊ ¾ð¾î¸¦ ÁöÁ¤ÇÑ´Ù.
type = content-type [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ¸ñÇ¥ ÁÖ¼Ò¿¡ ¿¬°á µÈ ³»¿ëÀÇ Å¸ÀÔ(ÄÁÅÙÆ® ŸÀÔ : content type)¿¡ ´ëÇÑ ¾È³»Àû(advisory) ÈùÆ®(hint)¸¦ Á¦°øÇÑ´Ù. ÀÌ´Â »ç¿ëµµ±¸°¡, ¸¸ÀÏ ³»¿ë¿¡ Áö¿øÇÏÁö ¾Ê´Â ÄÁÅÙÆ® ŸÀÔÀÌ Æ÷ÇԵȴٴ °ÍÀÌ ¾Ë·ÁÁö¸é, ±× ³»¿ëÀ» °¡Á®¿À´Â ´ë½Å Àû´çÇÑ ±â´ÉÀ» »ç¿ëÇϵµ·Ï ÇÑ´Ù.
ÀÌ ¾ÖÆ®¸®ºäÆ®¸¦ »ç¿ëÇÏ´Â Á¦ÀÛÀÚ´Â, ÀÌ °ÍÀÌ ¿¬°á µÈ ¸ñÇ¥ ÁÖ¼ÒÀÇ ³»¿ë¿¡¼­ ÀÏÁ¤ÇÏÁö(consistent) ¾ÊÀ» ¼ö ÀÖ½¿¿¡ ´ëÇÑ À§Ç輺¿¡ ´ëÇÑ Ã¥ÀÓÀ» Áø´Ù(ÀÏÁ¤ÇÏÁö ¾ÊÀ» ¼ö ÀÖ½¿À» °¨¾ÈÇØ¾ß ÇÑ´Ù)
ÇöÀçÀÇ ÄÁÅÙÆ® ŸÀÔµéÀÇ ¸ñ·ÏÀº [MIMETYPES]¸¦ ÂüÁ¶Ç϶ó.
rel = link-types [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ÇöÀç ¹®¼­¿Í href ¾ÖÆ®¸®ºäÆ®¿¡ ÁöÁ¤ µÈ ¾ØÄ¿¿ÍÀÇ °ü°è¸¦ ÁöÁ¤ÇÑ´Ù. ÀÌ ¾ÖÆ®¸®ºäÆ® °ªÀº ¿¬°á ŸÀÔ ¸ñ·Ï¿¡¼­ ºóÄ­À¸·Î ºÐ¸®µÈ´Ù.
rev = link-types [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ÇöÀç ¹®¼­ÀÇ href ¾ÖÆ®¸®ºäÆ®·Î ÁöÁ¤ µÈ ¾ØÄ¿·Î ºÎÅÍ µÚ·Î ¿¬°á(reverse link)À» ±â¼úÇϱâ À§ÇÏ¿© »ç¿ëµÈ´Ù. ¾ÖÆ®¸®ºäÆ®ÀÇ °ªÀº ¿¬°á ŸÀÔ ¸ñ·Ï¿¡¼­ ºóÄ­À¸·Î ºÐ¸®µÈ´Ù.
charset = charset [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ¿¬°áÀÌ ÁöÁ¤ ÇÑ ÀÚ¿øÀÇ ±ÛÀÚ ¿£ÄÚµù ¹æ½ÄÀ» ÁöÁ¤ÇÑ´Ù. ¼¼ºÎ»çÇ×Àº ±ÛÀÚ ¿£ÄÚµùÀ» ÂüÁ¶Ç϶ó.
´Ù¸¥ °÷¿¡¼­ Á¤ÀÇ µÈ ¾ÖÆ®¸®ºäÆ®

°¢ A ¿¤·¹¸àÆ®(element)´Â ÇϳªÀÇ ¾ØÄ¿(anchor)¸¦ Á¤ÀÇÇÑ´Ù.

  1. A ¿¤·¹¸àÆ®ÀÇ ³»¿ëÀº ¾ØÄ¿ÀÇ À§Ä¡¸¦ ÁöÁ¤ÇÑ´Ù.
  2. name ¾ÖÆ®¸®ºäÆ®´Â ´Ù¸¥ ¿¬°áµé°ú ±¸º° ÇÒ ¼ö ÀÖµµ·Ï ¾ØÄ¿ÀÇ À̸§À» ÁöÁ¤ÇÑ´Ù.(id¿¡ ÀÇÇÑ ¾ØÄ¿µµ ÂüÁ¶).
  3. href ¾ÖÆ®¸®ºäÆ®´Â ÇϳªÀÇ ¿¬°áÀ» À§ÇÑ ÀÚ¿øÀÇ ¾ØÄ¿¸¦ ¸¸µç´Ù.

Á¦ÀÛÀÚ´Â ¾ØÄ¿¸¦ ÁöÁ¤ÇÏÁö ¾Ê°íµµ A ¿¤·¹¸àÆ®·Î¸¦ ¸¸µé ¼ö Àִµ¥, ÀÌ´Â href, nameÀ̳ª id°¡ Á¤ÀǵÇÁö ¾Ê´Â °ÍÀÌ´Ù. ÀÌµé ¾ÖÆ®¸®ºäÆ®ÀÇ °ªÀº ³ªÁß¿¡ ½ºÅ©¸³Æ®(script)¸¦ Åë ÇØ ¼³Á¤ ÇÒ ¼ö ÀÖ´Ù.

¾Æ·¡ ¿¹Á¦¿¡¼­ A ¿¤·¹¸àÆ®´Â ÇϳªÀÇ ¿¬°áÀ» Á¤ÀÇÇÑ´Ù. ¾ØÄ¿ÀÇ À§Ä¡´Â ÅؽºÆ® "W3C Web site"ÀÌ°í ¸ñÇ¥ ¾ØÄ¿(destination anchor)´Â "http://www.w3.org/"ÀÌ´Ù.

 W3C¿¡ ´ë ÇÑ Ãß°¡ÀûÀÎ Á¤º¸´Â
   <A href="http://www.w3.org/">W3C Web site</A>¸¦ ÂüÁ¶Ç϶ó.

ÀÌ ¿¬°áÀº ¿ùµå¿ÍÀ̵åÀ¥(World Wide Web Consortium)ÀÇ È¨ÆäÀÌÁö¸¦ ÁöÁ¤ÇÑ´Ù. »ç¿ëÀÚ°¡ »ç¿ëµµ±¸¿¡¼­ ÀÌ ¿¬°áÀ» È°¼ºÈ­ ½ÃÅ°¸é »ç¿ëµµ±¸´Â ±× ÀÚ¿ø, ÀÌ·± °æ¿ì, HTML ¹®¼­¸¦ Àоî Ç¥Çö ÇÒ °ÍÀÌ´Ù.

»ç¿ëµµ±¸´Â ÀϹÝÀûÀ¸·Î »ç¿ëÀÚ¿¡°Ô ¸íÈ®ÇÏ°Ô ÇÒ ¼ö ÀÖµµ·Ï ¹ØÁÙÀ» ±ß´ø°¡ ºñµ¥¿À¸¦ µÚ·Î µ¹¸®´ø°¡ ÇÏ´Â µîÀÇ ¹æ½ÄÀ¸·Î ¿¬°áÀ» Ç¥ÇöÇÑ´Ù. Ãß°¡ÀûÀΠǥÇöÀº »ç¿ëµµ±¸¿¡ µû¶ó ´Ù¸£´Ù. Ç¥ÇöÀº »ç¿ëÀÚ°¡ ±× ¿¬°áÀ» ÀÌ¹Ì ¹æ¹® Çß¾ú´Â°¡ ¾Æ´Ñ°¡¿¡ µû¶ó ´Ù¸¦ ¼ö ÀÖ´Ù. ÀÌ¹Ì ¹æ¹® (¾È)Çß´ø ¿¬°áÀÇ º¸´Â Ç¥ÇöÀº ´ÙÀ½°ú °°À» ¼ö ÀÖ´Ù.

 W3C¿¡ ´ë ÇÑ Ãß°¡ÀûÀÎ Á¤º¸´Â W3C Web site¸¦ ÂüÁ¶Ç϶ó.
                             ~~~~~~~~~~~~
±ÍÇÏÀÇ ºê¶ó¿ìÀú·Î
 W3C¿¡ ´ë ÇÑ Ãß°¡ÀûÀÎ Á¤º¸´Â ¿µ¹® W3C Web site¸¦ ÂüÁ¶Ç϶ó.

»ç¿ëµµ±¸¿¡°Ô Á¤È®ÇÏ°Ô ¸ñÇ¥ ¼­·ùÀÇ ±ÛÀÚ ¿£ÄÚµù ¹æ½ÄÀ» ¾Ë·Á ÁÖ·Á¸é, charset ¾ÖÆ®¸®ºäÆ®·Î ¼³Á¤ÇÑ´Ù.

 W3C¿¡ ´ë ÇÑ Ãß°¡ÀûÀÎ Á¤º¸´Â
 <A href="http://www.w3.org/" charset="ISO-8859-1">W3C Web site</A> ÂüÁ¶.

È­ÀÏ "one.html" ¾ÈÀÇ "anchor-one" À¸·Î À̸§ ÁÖ¾îÁø ¾ØÄ¿¸¦ °¡Á¤Çϸé:

 ... È­ÀÏ one.html Áß ¾ØÄ¿ Àü ¹®Àå ...
 <A name="anchor-one">ÀÌ °÷ÀÌ anchor oneÀÇ À§Ä¡ÀÌ´Ù.</A>
 ... ¾ØÄ¿ ´ÙÀ½ ¹®Àå ...

ÀÌ´Â ÅؽºÆ® "ÀÌ °÷ÀÌ anchor oneÀÇ À§Ä¡ÀÌ´Ù."·Î ¾ØÄ¿¸¦ ¸¸µç´Ù.

ÀϹÝÀûÀ¸·Î A°¡ ¾ØÄ¿ ¸¸À» Á¤ÀÇ ÇßÀ» ¶§´Â AÀÇ ³»¿ëÀº ¾î¶² Ưº° ÇÑ ¹æ¹ýÀ¸·Îµµ Ç¥Çö µÈÁö ¾Ê´Â´Ù.

¾ØÄ¿°¡ ÁöÁ¤µÇ¸é °°Àº ¹®¼­ ȤÀº ´Ù¸¥ ¾ØÄ¿¸¦ ÁöÁ¤ÇÏ´Â URI°¡ "#" ±ÛÀÚ¸¦ °¡Áö¸é, ±× ´ÙÀ½¿¡ ¾ØÄ¿ À̸§(anchor name)ÀÌ µû¶ó ³ª¿À´Âµ¥, À̸¦ ºÎºÐ ÁöÁ¤ÀÚ(fragment identifier)¶óÇÑ´Ù.

¾Æ·¡ ÀÌ·± URIÀÇ ¿¹Á¦°¡ ÀÖ´Ù.

"one.html"°ú °°Àº µð·ºÅ丮¿¡ ÀÖ´Â È­ÀÏ "two.html"¿¡¼­ Á¤ÀÇ µÈ ¿¬°áÀº ´ÙÀ½°ú °°ÀÌ ¾ØÄ¿¸¦ ÂüÁ¶ÇÑ´Ù.

 ... È­ÀÏ two.html Áß ¾ØÄ¿ Àü ¹®Àå ...
 Ãß°¡ Á¤º¸´Â <A href="./one.html#anchor-one"> anchor one</A>À» ÂüÁ¶Ç϶ó.
 ... ¾ØÄ¿ ´ÙÀ½ ¹®Àå ...

´ÙÀ½ ¿¹Á¦¿¡¼­ A ¿¤·¹¸àÆ®´Â href·Î ¿¬°áÀ» ÁöÁ¤ÇÏ°í, µ¿½Ã¿¡ name·Î À̸§ Áö¾î Áø ¾ØÄ¿¸¦ ¸¸µç´Ù.

 ³ª´Â ¹æ±Ý ÈÞ°¡·Î ºÎÅÍ µ¹¾Æ ¿Ô´Ù! ¿©±â¿¡ È£¼ö°¡¿¡¼­ÀÇ
 <A name="anchor-two"
	href="http://www.somecompany.com/People/Ian/vacation/family.png">
 ¿ì¸® °¡Á· »çÁø</A>ÀÌ ÀÖ´Ù.

ÀÌ ¿¹Á¦´Â ´Ù¸¥ ŸÀÔÀÇ À¥ ÀÚ¿ø(PNG À̹ÌÁö)À» ¿¬°áÇÏ¿´´Ù. ÀÌ ¿¬°áÀ» È°¼ºÈ­ ½ÃÅ°¸é ±× À¥À¸·ÎºÎÅÍ À̹ÌÁö Áö¿øÀ» Àоî¿Í (½Ã½ºÅÛÀÌ µð½ºÇ÷¹ÀÌÇϵµ·Ï ±¸¼ºµÇ¾î ÀÖÀ¸¸é) ÀÐ¾î º¸ÀÏ °ÍÀÌ´Ù.

ÁÖ¼®: »ç¿ëµµ±¸´Â A ¿¤·¹¸àÆ®¿¡ ÀÇÇÏ¿© »ý¼º µÈ ¾ØÄ¿µéÀ» ãÀ» ¼ö ÀÖ¾î¾ß ÇÑ´Ù. ±×·¯³ª ÀϺΠ»ç¿ëµµ±¸´Â, ¿¹¸¦ µé¾î ´ÙÀ½ HTML ºÎºÐ ÁöÁ¤ÀÚ(fragment identifier)¿¡¼­ ºó ¾ØÄ¿("empty-anchor")¸¦ ãÁö ¸øÇϴµî, ±×·¸Áö ¸ø ÇÑ °æ¿ì°¡ ÀÖ´Ù.

 <A name="empty-anchor"></A>
 ... HTML ÅؽºÆ® ...
 <A href="#empty-anchor">empty-anchor¿¡ ¿¬°á</A>

12.2.1 ¾ØÄ¿(anchor) À̸§(name)ÀÇ ¹®¹ý

¾ØÄ¿ À̸§Àº name ¶Ç´Â id ¾ÖÆ®¸®ºäÆ®ÀÇ °ªÀÌ´Ù. ¾ØÄ¿ À̸§Àº ´ÙÀ½ ±ÔÄ¢À» µû¶ó¾ßÇÑ´Ù.

±×·¡¼­ ´ÙÀ½ ¿¹Á¦´Â ¹®ÀÚ¿­ ÀÏÄ¡ÀÇ °ßÁö¿¡¼­ ¸ÂÀ¸¸ç »ç¿ëµµ±¸´Â ÀÏÄ¡·Î ÀνÄÇÑ´Ù.

 <P><A href="#xxx">...</A>
 ... ¹®¼­ ´Ù¸¥ ¹«ºÐ ...
 <P><A name="xxx">...</A>

Ʋ¸° ¿¹Á¦:
´ÙÀ½ ¿¹Á¦´Â ´ë¼Ò¹®ÀÚ Â÷ÀÌ ÀÌ¿Ü¿¡´Â °°Àº À̸§À̹ǷΠÀ¯Àϼº °ßÁö¿¡¼­ Ʋ¸° °ÍÀÌ´Ù.

 <P><A name="xxx">...</A>
 <P><A name="XXX">...</A>

´ÙÀ½ Ç¥ÇöÀº ¹®¹ý»ó Ʋ¸° °ÍÀº ¾Æ´ÏÁö ¸¸, »ç¿ëµµ±¸°¡ ¾î¶»°Ô ÇÒ °ÍÀΰ¡´Â Á¤ÀÇ µÇ¾î ÀÖÁö ¾Ê¾Æ, ÀϺΠ»ç¿ëµµ±¸¿¡¼­´Â ÀÏÄ¡ÇÏ´Â °ÍÀ¸·Î(Ʋ¸®°Ô) ÀνÄÇÏ°í, ´Ù¸¥ »ç¿ëµµ±¸¿¡¼­´Â ÀÏÄ¡ÇÏÁö ¾Ê´Â °ÍÀ¸·Î ÀÎ½Ä ÇÒ ¼ö ÀÖ´Ù.

 <P><A href="#xxx">...</A>
 ... ¹®¼­ ´Ù¸¥ ¹«ºÐ ...
 <P><A name="XXX">...</A>

¾ØÄ¿ À̸§(anchor name)¿¡´Â ASCII ±ÛÀÚ ¸¸ »ç¿ëÇÒ ¼ö ÀÖ´Ù. Ãß°¡ Á¤º¸´Â ºÎ·Ï URI ¾ÖÆ®¸®ºäÆ® °ª¿¡¼­ ºñ¾Æ½ºÅ°(non-ASCII) ±ÛÀÚÀ» ÂüÁ¶Ç϶ó.

12.2.2 ³×½ºÆ® µÈ(nested) ¿¬°á(link)Àº Ʋ¸° °ÍÀÌ´Ù.

A ¿¤·¹¸àÆ®·Î Á¤ÀÇ µÈ ¿¬°á°ú ¾ØÄ¿(anchor)´Â ³×½ºÆ® µÇ¾î¼­´Â ¾ÊµÇ´Âµ¥, ±× Àǹ̴ A ¿¤·¹¸àÆ®´Â ´Ù¸¥ A ¿¤·¹¸àÆ®¸¦ Æ÷ÇÔ ÇÒ ¼ö ¾ø´Ù´Â ¶æÀÌ´Ù.

DTD´Â LINK ¿¤·¹¸àÆ®°¡ ºñ¾î(empty) ÀÖµµ·Ï Á¤ÀÇÇϹǷÎ, LINK ¿¤·¹¸àÆ®µµ ³×½ºÆ® µÇ¸é ¾ÊµÈ´Ù.

12.2.3 id ¾ÖÆ®¸®ºäÆ®¸¦ °®´Â ¾ØÄ¿(anchor)

id ¾ÖÆ®¸®ºäÆ®´Â ¾ØÄ¿¸¦ ¸¸µé±â À§ÇØ, A ¿¤·¹¸àÆ®¸¦ Æ÷ÇÔ ÇÑ ¾î¶² ¿¤·¹¸àÆ®¿¡¼­µµ ½ÃÀÛű׿¡ »ç¿ë µÉ ¼ö ÀÖ´Ù.

H2 ¿¤·¹¸àÆ® ¾È¿¡¼­ ¾ØÄ¿¸¦ ÁöÁ¤Çϱâ À§ÇÏ¿© »ç¿ë ÇÑ id ¾ÖÆ®¸®ºäÆ®ÀÇ ¿¹Á¦ÀÌ´Ù. A ¾ÖÆ®¸®ºäÆ®¸¦ ÅëÇÏ¿© ¾ØÄ¿°¡ ¿¬°áµÈ´Ù.

 Ãß°¡ Á¤º¸´Â <A href="#section2">Ç׸ñ 2</A>¸¦ ÂüÁ¶Ç϶ó.
 ... ¹®¼­ÀÇ µÚ¿¡
 <H2 id="section2">Ç׸ñ 2</H2>
 ... ¹®¼­ÀÇ µÚ¿¡
 <P>Ãß°¡ÀûÀÎ ¼¼ºÎ»çÇ×Àº À§ÀÇ <A href="#section2">Ç׸ñ 2</A>¸¦ ÂüÁ¶Ç϶ó.

´ÙÀ½ ¿¹Á¦´Â id ¾ÖÆ®¸®ºäÆ®·Î ¸ñÇ¥ ¾ØÄ¿ÀÇ À̸§À» ÁöÁ¤ÇÑ´Ù.

 ³ª´Â ¹æ±Ý ÈÞ°¡·Î ºÎÅÍ µ¹¾Æ ¿Ô´Ù!  ¿©±â¿¡
 <A id="anchor-two">È£¼ö°¡¿¡¼­ ÂïÀº ¿ì¸® °¡Á· »çÁø</A>ÀÌ ÀÖ´Ù.

id¿Í name ¾ÖÆ®¸®ºäÆ®´Â °°Àº À̸§ ÀÚ¸®¸¦ »ç¿ëÇÑ´Ù. ÀÌ´Â ÇÑ ¹®¼­¿¡¼­ ¾ØÄ¿¸¦ °°Àº À̸§À¸·Î ÁöÁ¤ÇÒ ¼ö ¾ø´Ù´Â ¶æÀÌ´Ù. ÀÌ µÎ ¾ÖÆ®¸®ºäÆ®´Â ´ÙÀ½ ¿¤·¹¸àÆ®µé¿¡´Â °°Àº À¯ÀÏÇÑ ÀνÄÀÚ(identifier)¸¦ ÁöÁ¤Çϱâ À§ÇÏ¿© »ç¿ë ÇÒ ¼ö ÀÖ´Ù: A, APPLET, FORM, FRAME, IFRAME, IMG, MAP. µÎ ¾ÖÆ®¸®ºäÆ®°¡ ´ÜÀÏ ¿¤·¹¸àÆ®¿¡ »ç¿ëµÇ·Á¸é ±× °ªµéÀÌ °°¾Æ¾ß ÇÑ´Ù.

Ʋ¸° ¿¹Á¦:
´ÙÀ½Àº ÇÑ ¹®Àå¿¡¼­ ÀÌ ¾ÖÆ®¸®ºäÆ®°¡ °°Àº À̸§À¸·Î µÎ¹ø ÁöÁ¤µÇ¾î Ʋ¸° HTMLÀÌ´Ù.
 <A href="#a1">...</A>
 ...
 <H1 id="a1">
 ... ´Ù¸¥ ¹®±¸µé ...
 <A name="a1"></A>

´ÙÀ½ ¿¹Á¦´Â id¿Í nameÀÌ ¿¤·¹¸àÆ® ½ÃÀÛÅÂ±× ¾È¿¡ °°ÀÌ ³ª¿Ã ¶§ °°¾Æ¾ß ÇÑ´Ù´Â °ÍÀ» ¼³¸íÇÑ´Ù:

<P><A name="a1" id="a1" href="#a1">...</A>

HTML DTD¿¡¼­ ±Ô°Ý¿¡ ÀÇÇØ name ¾ÖÆ®¸®ºäÆ®´Â ±ÛÀÚ ÂüÁ¶¸¦ Æ÷ÇÔ ÇÒ ¼ö ÀÖ´Ù. ±×·¡¼­, ±× °ª D&#xfc;rst´Â D&uuml;rst ¿Í °°ÀÌ ¸ðµÎ À¯È¿ÇÑ name ¾ÖÆ®¸®ºäÆ®ÀÇ °ªÀÌ´Ù. ÀÌ¿Í´Â ´Þ¸® id ¾ÖÆ®¸®ºäÆ®¿¡´Â ±ÛÀÚ ÂüÁ¶¸¦ Æ÷ÇÔ ÇÒ ¼ö ¾ø´Ù.

Á¦ÀÛÀÚ°¡ ¾ØÄ¿ÀÇ À̸§À¸·Î id ¶Ç´Â nameÀ» »ç¿ë ÇÒ °ÍÀΰ¡¸¦ °áÁ¤Çϴµ¥´Â ´ÙÀ½ »çÇ×µéÀ» °í·ÁÇÏ¿©¾ß ÇÑ´Ù.

12.2.4 ÀÚ¿øÀÌ ¾ø°Å³ª ÀÎ½Ä ÇÒ ¼ö ¾ø´Â ÀÚ¿øÀÇ °æ¿ì

ÀÚ¿øÀÌ ¾ø°Å³ª(unavailable) ÀÎ½Ä ÇÒ ¼ö ¾ø´Â(unidentifiable) ÀÚ¿ø¸¦ ÁöÁ¤ÇÏ´Â °ÍÀº ¿À·ùÀÌ´Ù. »ç¿ëµµ±¸°¡ ÀÌ¿Í °°Àº ¿À·ù¸¦ ¾î¶»°Ô ó¸® ÇÒ °ÍÀΰ¡ ÇÏ´Â °ÍÀº »ç¿ëµµ±¸¿¡ µû¶ó ´Ù¸¦ ¼ö Àִµ¥, ´ÙÀ½°ú °°Àº ÀÛµ¿À» ÃßõÇÑ´Ù.

12.3 ¹®¼­ °ü°è: LINK ¿¤·¹¸àÆ®

<!ELEMENT LINK - O EMPTY         -- ¸Þµð¾Æ¿¡ ¹«°ü ÇÑ(media-independent) ¿¬°á -->
<!ATTLIST LINK
 %attrs;                             -- %coreattrs, %i18n, %events --
 charset     %Charset;      #IMPLIED -- ¿¬°á ÀÚ¿øÀÇ ±ÛÀÚ ¿£ÄÚµù(char encoding)--
 href        %URI;          #IMPLIED -- ¿¬°á ÀÚ¿øÀÇ URI --
 hreflang    %LanguageCode; #IMPLIED -- ¾ð¾î ÄÚµå --
 type        %ContentType;  #IMPLIED -- Âü°í ÄÁÅÙÆ® ŸÀÔ(content type) --
 rel         %LinkTypes;    #IMPLIED -- ¿¬°á(link) ŸÀÔ(type) ¾ÕÀ¸·Î --
 rev         %LinkTypes;    #IMPLIED -- ¿¬°á ŸÀÔ µÚ·Î --
 media       %MediaDesc;    #IMPLIED -- ÀÌ ¸Þµð¾Æ(media)¿¡ Ç¥ÇöÇϱâ À§ÇØ --
>

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

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

ÀÌ ¿¤·¹¸àÆ®´Â ¿¬°áÀ» Á¤ÀÇÇÑ´Ù. A¿Í´Â ´Þ¸®, ¿©·¯¹ø ³ª¿Ã ¼ö´Â ÀÖÀ¸³ª, ´ÜÁö ¹®¼­ÀÇ HEAD Ç׸ñ¿¡ ¸¸ ³ª¿Ã ¼ö ÀÖ´Ù. LINK´Â ³»¿ëÀ» °®Áö ¾ÊÁö¸¸, »ç¿ëµµ±¸¿¡ ÀÇÇØ ¿©·¯°¡Áö ¹æ½Ä(¿¹: ¿¬°á ¸Þ´ºÀÇ µå·Ó´Ù¿îµµ±¸)À¸·Î Ç¥Çö µÉ ¼ö ÀÖ´Â °ü·Ã Á¤º¸¸¦ Àü´Þ ÇÒ ¼ö ÀÖ´Ù.

ÀÌ ¿¹Á¦´Â ¹®¼­ÀÇ HEAD Ç׸ñ¿¡ ³ªÅ¸³¯ ¼ö ÀÖ´Â ¿©·¯°³ÀÇ LINK Á¤ÀÇÇÏ´Â ¹æ¹ýÀ» ¼³¸íÇÑ´Ù. ÇöÀç ¹®¼­´Â "Chapter2.html"ÀÌ°í, rel ¾ÖÆ®¸®ºäÆ®´Â ÇöÀç ¹®¼­¿Í ¿¬°á µÈ ¹®¼­ »çÀÌÀÇ °ü°è¸¦ ÁöÁ¤ÇÑ´Ù. ±× °ª "Index", "nrxt"¿Í "Prev"´Â ¿¬°á ŸÀÔ Ç׸ñ¿¡ ¼³¸í µÇ¾îÀÖ´Ù.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
 <TITLE>Chapter 2</TITLE>
 <LINK rel="Index" href="../index.html">
 <LINK rel="next"  href="Chapter3.html">
 <LINK rel="Prev"  href="Chapter1.html">
</HEAD>
 ... ¹®¼­ÀÇ ³ª¸ÓÁö ºÎºÐ ...

12.3.1 ¾ÕÀ¸·Î(forward)¿Í µÚ·Î(reverse)ÀÇ ¿¬°á

rel¿Í rev ¾ÖÆ®¸®ºäÆ®´Â ÀÓ½ÃÀû ÀÓ¹«¸¦ ¼öÇàÇϴµ¥, rel ¾ÖÆ®¸®ºäÆ®´Â ¾ÕÀ¸·Î(forward)ÀÇ ¿¬°áÀ», rev ¾ÖÆ®¸®ºäÆ®´Â µÚ·Î(reverse)ÀÇ ¿¬°áÀ» ÁöÁ¤ÇÑ´Ù.

µÎ ¹®¼­ A ¿Í B°¡ ÀÖ´Ù°í ÇÏÀÚ.

 ¹®¼­ A:       <LINK href="docB" rel="foo">

´Â ¾Æ·¡¿Í ²À °°Àº Àǹ̸¦ °®´Â´Ù.

 ¹®¼­ B:       <LINK href="docA" rev="foo">

ÀÌ µÎ ¾ÖÆ®¸®ºäÆ®µéÀº µ¿½Ã¿¡ ÁöÁ¤ µÉ ¼ö ÀÖ´Ù.

12.3.2 ¿¬°á°ú ¿ÜºÎ ½ºÅ¸ÀϽ¬Æ®

LINK ¿¤·¹¸àÆ®°¡ ¿ÜºÎ ½ºÅ¸ÀϽ¬Æ®¸¦ ¹®¼­¿¡ ¿¬°á ÇÒ ¶§, type ¾ÖÆ®¸®ºäÆ®Àº ½ºÅ¸ÀϽ¬Æ® ¾ð¾î¸¦ ÁöÁ¤ÇÏ°í media ¾ÖÆ®¸®ºäÆ®Àº ÀǵµÇÑ Ç¥Çö ¸Þµð¾Æ(µé)À» ÁöÁ¤ÇÑ´Ù. »ç¿ëµµ±¸´Â ÇöÀç ÀåÄ¡¿¡ Àû¿ëµÇ´Â ½ºÅ¸ÀϽ¬Æ®ÀÇ °æ¿ì¿¡ ¸¸ ³×Æ®¿ö±×(network)·Î ºÎÅÍ Àоî Ç¥ÇöÇÏ¿© ½Ã°£À» Àý¾à ÇÒ ¼ö ÀÖ´Ù.

¸Þµð¾Æ ŸÀÔ(media type)µéÀº ½ºÅ¸ÀϽ¬Æ®(style sheet)¿¡¼­ ÀÚ¼¼È÷ ´Ù·é´Ù.

12.3.3 ¿¬°á°ú °Ë»ö ¿£Áø(search engine)

Á¦ÀÛÀÚ´Â LINK ¿¤·¹¸àÆ®¸¦ »ç¿ëÇÏ¿© °Ë»ö ¿£Áø¿¡ ´ÙÀ½ »çÇ×À» Æ÷ÇÔÇÏ¿© ¿©·¯ °¡Áö Á¤º¸¸¦ Á¦°ø ÇÒ ¼ö ÀÖ´Ù.

¿¹Á¦´Â ¾ð¾î Á¤º¸, ¸Þµð¾Æ ŸÀÔ°ú ¿¬°á ŸÀÔÀ» ¾î¶»°Ô Á¶ÇÕÇÏ¿© °Ë»ö ¿£ÁøÀÇ ¹®¼­ 󸮸¦ Çâ»óÇϴ°¡¸¦ ¼³¸íÇÏ¿´´Ù.

´ÙÀ½ ¿¹Á¦¿¡¼­ hreflang ¾ÖÆ®¸®ºäÆ®·Î ¾îµð¼­ ¹®¼­ÀÇ ³×µ¨¶õµå¾î, ÆúÆ©°¥¾î¿Í ¾Æ¶ø¾î ¹öÀüÀ» ãÀ» ¼ö Àִ°¡¸¦ °Ë»ö ¿£Áø¿¡ ¾Ë·Á ÁØ´Ù. ¾Æ¶ø¾î ¼³¸í¼­¸¦ À§ÇÏ¿© dir¿Í charset ¾ÖÆ®¸®ºäÆ®¸¦ »ç¿ëÇÑ °Í°ú, LINK ¿¤·¹¸àÆ®ÀÇ title ¾ÖÆ®¸®ºäÆ®ÀÇ °ªÀ» ºÒ¾î ¼³¸í¼­ÀÇ ¾ð¾î°¡ ºÒ¾î ÀÓÀ» ÁöÁ¤Çϱâ À§ÇÏ¿© lang ¾ÖÆ®¸®ºäÆ®¸¦ »ç¿ëÇß´Ù.

<HEAD>
 <TITLE>¿µ¾î ¼³¸í¼­</TITLE>
 <LINK 
	title="³×µ¨¶õµå¾î ¼³¸í¼­" 
	type="text/html"	
	rel="alternate"
	hreflang="nl" 	
	href="http://someplace.com/manual/dutch.html">
 <LINK 
	title="ÆúÆ©°¥¾î ¼³¸í¼­"      
	type="text/html"
	rel="alternate"
	hreflang="pt" 
	href="http://someplace.com/manual/portuguese.html">
 <LINK 
	title="¾Æ¶ø¾î ¼³¸í¼­"      
	type="text/html"
	rel="alternate"      	
	charset="ISO-8859-6"
	hreflang="ar" 	
	href="http://someplace.com/manual/arabic.html">
 <LINK 
	lang="fr"       
	title="(ºÒ¾î) La documentation en Français"
	type="text/html"	
	rel="alternate"
	hreflang="fr"	
	href="http://someplace.com/manual/french.html">
</HEAD>

´ÙÀ½ ¿¹Á¦¿¡¼­, °Ë»ö ¿£Áø¿¡°Ô ¼³¸í¼­ÀÇ ÀÎ¼â µÈ ¹öÀüÀÌ ¾îµð¿¡ Àִ°¡¸¦ ¾Ë·ÁÁØ´Ù.

<HEAD>
 <TITLE>Âü°í ¸Å´º¾ó</TITLE>
 <LINK 
	media="print" 
	title="The manual in postscript"
	type="application/postscript"	
	rel="alternate"
	href="http://someplace.com/manual/postscript.ps">
</HEAD>

´ÙÀ½ ¿¹Á¦¿¡¼­, ¹®¼­ ÁýÇÕüÀÇ ½ÃÀÛ ÆäÀÌÁö¸¦ ¾îµð¼­ ãÀ» ¼ö Àִ°¡¸¦ °Ë»ö ¿£Áø¿¡°Ô ¾Ë·ÁÁØ´Ù.

<HEAD>
 <TITLE>Âü°í ¸Å´º¾ó -- ÇöÀç ÆäÀÌÁö 5</TITLE>	
 <LINK 
	rel="Start" 
	title="¼³¸í¼­ÀÇ Ã¹¹ø° ÆäÀÌÁö"	
	type="text/html"
	href="http://someplace.com/manual/start.html">
</HEAD>

Ãß°¡ÀûÀÎ Á¤º¸´Â ºÎ·ÏÀÇ ÁÖ¼® À¥ »çÀÌÆ® »öÀÎÀ¸·Î °Ë»ö ¿£ÁøÀÇ µµ¿òÀ» ÂüÁ¶Ç϶ó.

12.4 °æ·Î(path) Á¤º¸: BASE ¿¤·¹¸àÆ®

<!ELEMENT BASE - O EMPTY               -- ¹®¼­ ±âÁØ URI -->
<!ATTLIST BASE
 href        %URI;          #REQUIRED -- ±âÁØ URI·Î ÀÛ¿ëÇÏ´Â URI --
>

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

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

href = uri [´ë¼Ò¹®ÀÚ Å¸ÀÔ ÂüÁ¶: CT]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â »ó´ë URI¸¦ ã¾Æ³»´Âµ¥ ±âÁØ URI·Î ÀÛ¿ëÇÏ´Â Àý´ë URI¸¦ ÁöÁ¤ÇÑ´Ù.
´Ù¸¥ °÷¿¡¼­ Á¤ÀÇ µÈ ¾ÖÆ®¸®ºäÆ®

HTML¿¡¼­, ¿ÜºÎ À̹ÌÁö, ¾ßÇ÷¿(applet), ¾ç½Ä Çü¼º ÇÁ·Î±×·¥(form-processing program), ½ºÅ¸ÀϽ¬Æ®(style sheet) µî¿¡ ´ë ÇÑ ¿¬°áÀ̳ª ÂüÁ¶´Â Ç×»ó URI·Î ÁöÁ¤µÈ´Ù. »ó´ë URI´Â ¿©·¯ °÷À¸·Î ºÎÅÍ ¿Ã ¼ö ÀÖ´Â ±âÁØ URI¿¡ µû¶ó »êÁ¤ µÈ °ÍÀÌ´Ù. Á¦ÀÛÀÚ´Â BASE ¿¤·¹¸àÆ®·Î ¸í½ÃÀûÀ¸·Î ¹®¼­ÀÇ ±âº» URI ÁöÁ¤ ÇÒ ¼ö ÀÖ´Ù.

BASE ¿¤·¹¸àÆ®´Â HTML ¹®¼­ÀÇ HEAD Ç׸ñ¿¡ ÀÖ¾î¾ß ÇÏ°í, ´Ù¸¥ ¾î¶² ¿¤·¹¸àÆ®°¡ ¿ÜºÎ ÀÚ¿øÀ» ÂüÁ¶Çϱâ Àü¿¡ ÀÖ¾î¾ß ÇÑ´Ù. BASE ¿¤·¹¸àÆ®¿¡ ÀÇ ÇØ ÁöÁ¤ µÈ °æ·Î(path) Á¤º¸´Â ¹®¼­ ³»¿¡¼­ ±× ¿¤·¹¸àÆ®°¡ ³ªÅ¸³¯ ¶§¿¡ ÇÑÇؼ­ URI¿¡ ¿µÇâÀ» ÁØ´Ù.

´ÙÀ½ ¿¹Á¦´Â, BASE ¼±¾ð°ú A ¼±¾ðÀ» °®´Â´Ù.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
  <TITLE>´ç»çÀÇ Á¦Ç°µé</TITLE>
  <BASE href="http://www.aviary.com/products/intro.html">
</HEAD>
<BODY>
  <P>±ÍÇÏ´Â ´ç»çÀÇ <A href="../cages/birds.gif">»õÀåµé</A>¸¦ º¸¼Ì½À´Ï±î?
</BODY>
</HTML>

»ó´ë URI "../cages/birds.gif"´Â ´ÙÀ½°ú °°ÀÌ »êÁ¤µÈ´Ù.

 http://www.aviary.com/cages/birds.gif

12.4.1 »ó´ë URIÀÇ »êÁ¤(resolve)

»ç¿ëµµ±¸´Â [RFC1808], Ç׸ñ 3¿¡ ÀÇÇÏ¿© »ó´ë URI¸¦ »êÁ¤Çϱâ À§ÇÏ¿© ±âÁØ URI¸¦ °è»êÇÑ´Ù. ´ÙÀ½Àº [RFC1808]°¡ ±¸Ã¼ÀûÀ¸·Î ¾î¶»°Ô HTML¿¡ Àû¿ëÇϴ°¡¸¦ ¼³¸íÇÏ¿´´Ù.

»ç¿ëµµ±¸´Â ´ÙÀ½°ú °°Àº ¿ì¼± ¼øÀ§(À§ ÂÊ ¿ì¼±)¿¡ ÀÇÇÏ¿© ±âÁØ URI¸¦ °è»êÇÑ´Ù.

  1. BASE ¿¤·¹¸àÆ®¿¡ ÀÇÇÏ¿© ±âÁØ URI ¼³Á¤. [[RFC2616]] µî
  2. ÇÁ·ÎÅäÄÝ(protocol) ÀÛ¿ë Áß(¿¹: HTTP Çì´õ µî) ¹ß°ß µÈ ¸ÞŸ µ¥ÀÌÅÍ¿¡ ÀÇÇÏ¿© ±âÁØ URI Á¦°ø.
  3. µðÆúÆ®·Î ÇöÀç ¹®¼­ÀÇ ±âÁØ URI. ¸ðµç HTML ¹®¼­µéÀÌ ±âÁØ URI¸¦ °®´Â °ÍÀº ¾Æ´Ñµ¥, ¿¹¸¦ µé¸é, À¯È¿ÇÑ HTML ¹®¼­°¡ ÀüÀÚ¿ìÆí(email) ¾È¿¡ ³ªÅ¸³¯ ¼ö ÀÖ°í, URI¿¡ ÀÇÇÏ¿© ÁöÁ¤ µÇÁö ¾ÊÀ» ¼ö ÀÖ´Ù. ¸¸ÀÏ ¹®¼­µéÀÌ »ó´ë URI¸¦ Æ÷ÇÔÇÏ¸ç µðÆúÆ®ÀÎ ±âÁØ URI¿¡ ÀÇÁ¸ÇÑ´Ù¸é, ÀÌ¿Í °°Àº HTML ¹®¼­µéÀº ¿À·ù·Î °£ÁֵȴÙ.

Ãß°¡ÀûÀ¸·Î, OBJECT¿Í APPLET ¿¤·¹¸àÆ®¿¡¼­ÀÇ Á¤ÀÇ´Â BASE ¾ÖÆ®¸®ºäÆ®¿¡¼­ ¼³Á¤ µÈ °ªº¸´Ù ¿ì¼±ÀûÀ¸·Î Àû¿ëµÈ´Ù. ¿¤·¹¹øÆ®ÀÇ URIÀÇ ¹®Á¦¿¡ ´ë ÇÑ Ãß°¡ Á¤º¸´Â ÀÌµé ¿¤·¹¸àÆ®ÀÇ Á¤ÀǸ¦ ÂüÁ¶Ç϶ó.

ÁÖ¼®. ¿¬°á Çì´õ(Link header)¸¦ Á¤ÀÇÇÑ HTTP ¹öÀü¿¡¼­, »ç¿ëµµ±¸´Â À̵é Çì´õ(header)µéÀ» ÀÌ ¹®¼­ÀÇ LINK ¿¤·¹¸àÆ®µé°ú Á¤È®È÷ °°ÀÌ Ã³¸®ÇØ¾ß ÇÑ´Ù. [RFC2616]¿¡ Á¤ÀÇµÈ HTTP 1.1¿¡´Â ¿¬°á Çì´õ(Link header) Çʵ带 Á¤ÀǵǾî ÀÖÁö ¾Ê´Ù (19.6.3 Ç× ÂüÁ¶).

RFC 2616´Â ¿¬°á(link) Çì´õ(header) Çʵå(field)¸¦ Æ÷ÇÔÇÏÁö ¾ÊÀ¸¹Ç·Î, "HTTP Çì´õ(header)µé¿¡ ÀÇÇÏ¿© ÁöÁ¤µÈ Link ¿¤·¹¸àÆ®µéÀº ¹®¼­¿¡¼­ ¸í½ÃÀûÀ¸·Î ³ªÅ¸³ª´Â LINK ¿¤·¹¸àÆ®µé°ú Á¤È®È÷ °°ÀÌ Ãë±ÞÇØ¾ß ÇÑ´Ù."¶ó´Â ±â¼úÀº HTTP 1.1ÀÇ ÀÌÀü ¹öÀü¿¡ Àû¿ëµÈ´Ù.

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