W3C10 ¸ñ·Ï(list)Trio ȨÆäÀÌÁö
¸ñÂ÷
  1. ¸ñ·ÏÀÇ ¼Ò°³
  2. ¹øÈ£¾ø´Â ¸ñ·Ï(UL), ¹øÈ£ÀÖ´Â ¸ñ·Ï(OL), ¸ñ·Ï Ç׸ñ(LI)
  3. Á¤ÀÇ(definition) ¸ñ·Ï: DL, DT, DD ¿¤·¹¸àÆ®
    1. ¸ñ·ÏÀÇ º¸´Â Ç¥Çö
  4. DIR¿Í MENU ¿¤·¹¸àÆ®

10.1 ¸ñ·ÏÀÇ ¼Ò°³

HTMLÀº Á¦ÀÛÀÚ¿¡°Ô Á¤º¸ ¸ñ·ÏÀ» À§ ÇÑ ¿©·¯°¡Áö ±â´ÉÀ» Á¦°øÇÑ´Ù. ¸ðµç ¸ñ·ÏµéÀº Çϳª ÀÌ»óÀÇ ¾Æ·¡ ¸ñ·Ï ¿¤·¹¸àÆ®¸¦ Æ÷ÇÔÇÑ´Ù.

¾Õ ¸ñ·Ï ¿¹Á¦´Â ¹øÈ£¾ø´Â ¸ñ·ÏÀ¸·Î UL ¿¤·¹¸àÆ®·Î ¸¸µé¾î Áø´Ù.

<UL>
<LI>¹øÈ£¾ø´Â(unordered) Á¤º¸.
<LI>¹øÈ£ÀÖ´Â(ordered) Á¤º¸.
<LI>Á¤ÀÇ(definition).
</UL>

OL ¿¤·¹¸àÆ®·Î ¸¸µé¾î Áö´Â ¹øÈ£ÀÖ´Â ¸ñ·Ï(ordered)Àº, ¾Æ·¡ °øÁ¤°ú °°ÀÌ, ¹øÈ£°¡ °­Á¶µÇ´Â Á¤º¸¿¡ ¾Æ·¡¿Í °°ÀÌ »ç¿ëµÈ´Ù.

  1. °ÇÁ¶ µÈ ¿ø·á¸¦ Àß ¼¯´Â´Ù.
  2. ¾×»ó ¿ø·á¸¦ ºÑ´Â´Ù.
  3. 10ºÐ°£ È¥ÇÕÇÑ´Ù.
  4. 300µµ¿¡¼­ ÇÑ ½Ã°£ ±Á´Â´Ù.

Á¤ÀÇ ¸ñ·Ï(definition list)Àº DL ¿¤·¹¸àÆ®·Î ¸¸µé¾î Áö´Âµ¥, ´Ù¸¥ °Íµµ Æ÷ÇÔ ÇÒ ¼ö ÀÖÀ¸³ª, ÀϹÝÀûÀ¸·Î ÅÒ(term:ÀÛÀºÁ¦¸ñ)/Á¤ÀÇ(definition)ÀÇ Â¦µé·Î ÀÌ·ç¾î Áø´Ù.

Á¦Ç°À» ±¤°í ÇÒ ¶§ Á¤ÀÇ ¸ñ·ÏÀ» »ç¿ë ÇÒ ¼ö ÀÖ´Ù.
Àú·ÅÇÑ °¡°Ý
»õ ¹öÀüÀÇ ÀÌ Á¦Ç°Àº ÀÌÀüÀÇ °Íº¸´Ù ÇöÀúÈ÷ Àú·ÅÇÏ´Ù!
»ç¿ë ¿ëÀÌ
ÈξÀ »ç¿ëÇϱ⠿ëÀÌÇÏ°Ô º¯°æÇÏ¿´´Ù!
¾î¸°ÀÌ ¾ÈÀü
¾î¸°À̸¦ ÀÌ Á¦Ç°°ú ÇÔ²² È¥ÀÚ ¹æ¿¡ µÎ¾îµµ ´ÙÄ¡Áö ¾ÊÀ» °ÍÀÌ´Ù(º¸ÁõÀº ¾Æ´Ô).

HTML·Î´Â:

<DL>
<DT><STRONG>Àú·ÅÇÑ °¡°Ý</STRONG>
<DD>»õ ¹öÀüÀÇ ÀÌ Á¦Ç°Àº ÀÌÀüÀÇ °Íº¸´Ù ÇöÀúÈ÷ Àú·ÅÇÏ´Ù!
<DT><STRONG>»ç¿ë ¿ëÀÌ</STRONG>
<DD>ÈξÀ »ç¿ëÇϱ⠿ëÀÌÇÏ°Ô º¯°æÇÏ¿´´Ù!
<DT><STRONG>¾î¸°ÀÌ ¾ÈÀü</STRONG>
<DD>¾î¸°À̸¦ ÀÌ Á¦Ç°°ú ÇÔ²² È¥ÀÚ ¹æ¿¡ µÎ¾îµµ ´ÙÄ¡Áö ¾ÊÀ» °ÍÀÌ´Ù(º¸ÁõÀº ¾Æ´Ô).
</DL>

¸ñ·ÏÀº Â÷¿øÀ» ´Þ¸®ÇÏ¿© ³×½ºÆ®(nest: ¹­À½) ÇÒ ¼öÀÖ°í, ´Ù¸¥ Á¾·ùÀÇ Å¸ÀÔ(type)À» °°ÀÌ »ç¿ë ÇÒ ¼öµµ ÀÖ´Ù.

´ÙÀ½ ¿¹Á¦¿¡¼­ ¹øÈ£¾ø´Â ¸ñ·Ï(¿ø·á)°ú ¹øÈ£ÀÖ´Â ¸ñ·Ï(°úÁ¤)À» Æ÷ÇÔÇÏ´Â ¸ñ·ÏÀ» ±â¼ú ÇÏ¿´´Ù.
¿ø·á:
  • 100 g. ¹Ð°¡·ç
  • 10 g. ¼³ÅÁ
  • 1 ÄÅ ¹°
  • 2 °³ÀÇ °è¶õ
  • ¼Ò±Ý, ÈÄÃß°¡·ç
°úÁ¤:
  1. °ÇÁ¶ µÈ ¿ø·á¸¦ Àß ¼¯´Â´Ù.
  2. ¾×»ó ¿ø·á¸¦ ºÑ´Â´Ù.
  3. 10ºÐ°£ È¥ÇÕÇÑ´Ù.
  4. 300µµ¿¡¼­ ÇÑ ½Ã°£ ±Á´Â´Ù.
ÁÖ¼®:
ÀÌ ¹èÇÕÀº ¼öÁö¸¦ ÷°¡ÇÏ¿© °³¼± ÇÒ ¼ö ÀÖ´Ù.

ÀÌ ¼¼ ¸ñ·ÏÀÇ Å¸ÀÔÀÇ Á¤È®ÇÑ Ç¥ÇöÀº »ç¿ëµµ±¸¿¡ µû¶ó ´Ù¸£´Ù. ¸ñ·ÏÀ» ¼øÀüÈ÷ ÅؽºÆ®ÀÇ µé¿© ¾²±â ¸ñÀûÀ¸·Î »ç¿ëÇÏ´Â °ÍÀº ±ÇÇÏÁö ¾Ê´Â´Ù. ÀÌ´Â ½ºÅ¸ÀÏ¿¡ °üÇÑ ¹®Á¦ÀÌ°í ½ºÅ¸ÀϽ¬Æ®·Î Àß Ã³¸® µÇ±â ¶§¹®ÀÌ´Ù.

10.2 ¹øÈ£¾ø´Â ¸ñ·Ï(UL), ¹øÈ£ÀÖ´Â ¸ñ·Ï (OL)°ú ¸ñ·Ï Ç׸ñ(LI)

<!ELEMENT UL - - (LI)+                -- ¹øÈ£¾ø´Â ¸ñ·Ï(UL: unordered list) -->
<!ATTLIST UL
 %attrs;                              -- %coreattrs, %i18n, %events --
>
<!ELEMENT OL - - (LI)+                -- ¹øÈ£ÀÖ´Â ¸ñ·Ï(OL: ordered list) -->
<!ATTLIST OL
 %attrs;                              -- %coreattrs, %i18n, %events --
>

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

<!ELEMENT LI - O (%flow;)*            -- ¸ñ·Ï Ç׸ñ(LI: list item) -->
<!ATTLIST LI
 %attrs;                              -- %coreattrs, %i18n, %events --
>

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

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

type =  style-information [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ºÒ·®ÇÑ °ÍÀÌ´Ù. ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ¸ñ·Ï Ç׸ñÀÇ ½ºÅ¸ÀÏ(ÇüÅÂ)¸¦ ¼³Á¤ÇÑ´Ù. ÇöÀçÀÇ »ç¿ë °¡´É ÇÑ °ªÀº º¸´Â »ç¿ëµµ±¸¸¦ À§ÇÏ¿© Á¦°ø µÇ¾ú´Ù. °¡´É ÇÑ °ªµéÀº ´ë¼Ò¹®ÀÚ ±¸º° Á¤º¸¿Í ¾Æ·¡ ÇÔ²² ¼³¸íÇÏ¿´´Ù.
start = number [´ë¼Ò¹®ÀÚ Á߸³: CN]
ºÒ·®ÇÑ °ÍÀÌ´Ù. OL(¹øÈ£ÀÖ´Â ¸ñ·Ï) ¾ÖÆ®¸®ºäÆ®¿¡¼­ ¸¸ ù¹ø° Ç׸ñ¿¡ ½ÃÀÛ ¹øÈ£¸¦ ÁöÁ¤ÇÑ´Ù. µðÆúÆ® ½ÃÀÛ ¹øÈ£´Â "1"ÀÌ´Ù. ÀÌ ¾ÖÆ®¸®ºäÆ®ÀÇ °ªÀº Á¤¼öÀÌÁö¸¸ ¼öÄ¡°¡ ¾Æ´Ò ¼ö ÀÖ´Ù. ¸ñ·Ï Ç׸ñÀÇ ½ºÅ¸ÀÏÀÌ ¿µ¹®ÀÚ ´ë¹®ÀÚ(A, B, C, ...)ÀÌ°í start=3À̸é "C"·Î ½ÃÀ۵ȴÙ. À̶§ ½ºÅ¸ÀÏÀÌ ¼Ò¹®ÀÚ ·Î¸¸(roman)À̸é "iii"·Î ½ÃÀ۵ȴÙ.
value = number [´ë¼Ò¹®ÀÚ Á߸³: CN]
ºÒ·®ÇÑ °ÍÀÌ´Ù. LI(¸ñ·Ï Ç׸ñ)¿¡¸¸ Àû¿ëµÇ¸ç, ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ÇöÀç ¸ñ·Ï Ç׸ñÀÇ ¹øÈ£¸¦ ¼³Á¤ÇÑ´Ù. ÀÌ ¾ÖÆ®¸®ºäÆ®ÀÇ °ªÀº Á¤¼öÀÌÁö¸¸ ¼öÄ¡°¡ ¾Æ´Ò ¼ö ÀÖ´Ù(start ÂüÁ¶).
compact [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ºÒ·®ÇÑ °ÍÀÌ´Ù. ÀÌ ºÒ¸°(boolean) ¾ÖÆ®¸®ºäÆ®°¡ ¼³Á¤µÇ¸é, º¸´Â »ç¿ëµµ±¸¿¡°Ô ¸ñ·ÏÀ» ¾ÐÃàÇÏ¿© º¸À̵µ·Ï ¾Ë·Á Áִµ¥, Ç¥ÇöÀº »ç¿ëµµ±¸¿¡ µû¶ó ´Ù¸£´Ù.
´Ù¸¥ °÷¿¡¼­ Á¤ÀÇ µÈ ¾ÖÆ®¸®ºäÆ®

¹øÈ£ÀÖ´Â ¸ñ·Ï¿¡¼­ ¸ñ·Ï ¹øÈ£¸¦ Ç¥½ÃÇÏ´Â °Í ÀÌ¿Ü¿¡´Â, ¹øÈ£ÀÖ´Â ¸ñ·Ï°ú ¹øÈ£¾ø´Â ¸ñ·ÏÀº º¸´Â »ç¿ëµµ±¸¿¡¼­ °°Àº ¹æ½ÄÀ¸·Î Ç¥ÇöÇÏÁö ¸¸, »ç¿ëµµ±¸¿¡ µû¶ó Ç¥Çö ¹æ½ÄÀÌ ´Ù¸¦ ¼ö ÀÖ´Ù.

µÎ Á¾·ùÀÇ ¸ñ·Ï¿¡¼­ ¸ñ·Ï Ç׸ñµéÀº LI ¿¤·¹¸àÆ®(Á¾·áÅÂ±× »ý·« °¡´É)·Î Á¤ÀÇµÇ¾î ¼ø¼­´ë·Î Ç¥ÇöµÈ´Ù.

¿¹Á¦´Â ¸ñ·ÏÀÇ ±âº» ±¸Á¶¸¦ ¼³¸íÇÑ´Ù.

<UL>
  <LI> ... ù¹ø° Ç׸ñ ...
  <LI> ... µÎ¹ø° Ç׸ñ ...
  ...
</UL>

¸ñ·ÏÀº ³×½ºÆ®(nest: Â÷¿øÀ» ´Þ¸®ÇÏ¿© ¹­À½) µÉ ¼ö ÀÖ´Ù.

ºÒ·®ÇÑ ¿¹Á¦:
<UL>
    <LI> ... ¼öÁØ 1, ¹øÈ£ 1 ...
    <OL>
       <LI> ... ¼öÁØ 2, ¹øÈ£ 1 ...
       <LI> ... ¼öÁØ 2, ¹øÈ£ 2 ...
       <OL start="10">
          <LI> ... ¼öÁØ 3, ¹øÈ£ 1 (½ÃÀÛ 10) ...
       </OL>
       <LI> ... ¼öÁØ 2, ¹øÈ£ 3 ...
    </OL>
    <LI> ... ¼öÁØ 1, ¹øÈ£ 2 ...
</UL>

¹øÈ£ ¼ø¼­ ¼¼ºÎ»çÇ×. ¹øÈ£ÀÖ´Â ¸ñ·Ï¿¡¼­ ÀÌÀüÀÇ ¸ñ·Ï ¶Ç´Â ÀϺΠ°¨ÃçÁø ¸ñ·Ï ¹øÈ£¿¡¼­ ÀÚµ¿ÀûÀ¸·Î ¿¬¼Ó ¹øÈ£¸¦ ºÎ¿©ÇÏ´Â °ÍÀº ºÒ°¡´ÉÇÏ´Ù. ±×·¯³ª, Á¦ÀÛÀÚ´Â value ¾ÖÆ®¸®ºäÆ®·Î ¹øÈ£¸¦ Àç¼³Á¤ ÇÒ ¼ö Àִµ¥ ÀÌ »õ °ªÀ¸·Î ºÎÅÍ ÈÄ¼Ó Ç׸ñÀÇ ¹øÈ£°¡ °è¼ÓµÈ´Ù.

¿¹¸¦ µé¸é,

<ol>
<li value="30"> ÀÌ´Â ¸ñ·Ï Ç׸ñ ¹øÈ£°¡ 30.
<li value="40"> ÀÌ´Â ¸ñ·Ï Ç׸ñ ¹øÈ£°¡ 40.
<li> º°µµ ¼³Á¤ÀÌ ¾øÀ¸¸é ´ÙÀ½ ¹øÈ£ 41.
</ol>

10.3 Á¤ÀÇ ¸ñ·Ï: DL, DT, DD ¿¤·¹¸àÆ®

<!-- Á¤ÀÇ ¸ñ·Ï - Á¤ÀÇ ÅÒ(DT), Á¤ÀÇ ¼³¸í(DD) -->
<!ELEMENT DL - - (DT | DD)+           -- Á¤ÀÇ ¸ñ·Ï(DL: definition list) -->
<!ATTLIST DL
 %attrs;                              -- %coreattrs, %i18n, %events --
>

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

<!ELEMENT DT - O (%inline;)*      -- Á¤ÀÇ ÅÒ(DT: definition term) -->
<!ELEMENT DD - O (%flow;)*        -- Á¤ÀÇ ¼³¸í(DD: definition description)-->
<!ATTLIST (DT | DD)
 %attrs;                          -- %coreattrs, %i18n, %events --
>

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

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

Á¤ÀÇ ¸ñ·Ï(definition list)Àº, Ç׸ñÀÌ ÅÒ(term)°ú ¼³¸í(description) µÎ ºÎºÐÀ¸·Î ±¸¼ºµÇ¾îÀÖ´Ù´Â °Í ÀÌ¿Ü¿¡´Â, ´Ù¸¥ µÎ Á¾·ùÀÇ ¸ñ·Ï°ú °ÅÀÇ °°´Ù. ÅÒÀº DT ¿¤·¹¸àÆ®·Î ÁöÁ¤ µÇ´Âµ¥ ÀζóÀÎ(inline) ³»¿ë ¸¸À» °¡Áú ¼ö ÀÖ°í, ³»¿ë(description)Àº DD ¿¤·¹¸àÆ®·Î ÁöÁ¤ µÇ´Âµ¥ ºí·°·¹º§(block-level)ÀÇ ³»¿ëÀ» °¡Áú ¼ö ÀÖ´Ù.

¿¹Á¦:

<DL>
 <DT>Dweeb
 <DD><EM>Nerd</EM> ¶Ç´Â <EM>Geek</EM>·Î ¼º¼÷ ÇÒ ¼ö ÀÖ´Â ÈïºÐ ÀßÇÏ´Â ÀþÀº »ç¶÷
 <DT>Cracker
 <DD>ÀÎÅÍ³Ý ÇØ°Å(hacker)
 <DT>Nerd
 <DD>ÀÚ±â óÀÇ »ýÀÏÀ» Àؾî¹ö¸®°í Net¿¡ ºüÁø ³²ÀÚ
</DL>

±ÍÇÏÀÇ ºê¶ó¿ìÀú·Î

Dweeb
Nerd ¶Ç´Â Geek·Î ¼º¼÷ ÇÒ ¼ö ÀÖ´Â ÈïºÐ ÀßÇÏ´Â ÀþÀº »ç¶÷
Cracker
ÀÎÅÍ³Ý ÇØ°Å(hacker)
Nerd
ÀÚ±â óÀÇ »ýÀÏÀ» Àؾî¹ö¸®°í Net¿¡ ºüÁø ³²ÀÚ

º¹¼ö ÅÒ(term)°ú ³»¿ë(description)À» °®´Â ¿¹Á¦:

<DL>
  <DT>½ëÅÍ(Center)
  <DT>½ëÅÍ(Centre)
  <DD> ±¸ÇüÀÇ Ç¥¸éÀÇ ¸ðµç À§Ä¡·Î ºÎÅÍ °°Àº °Å¸®¿¡ ÀÖ´Â Á¡.
  <DD> ½ºÆ÷Ã÷¿¡¼­ ¿îµ¿ÀåÀ̳ª ¾Õ ¶óÀÎÀÇ Áß¾Ó¿¡ À§Ä¡ ÇÑ ¼±¼ö
</DL>

±ÍÇÏÀÇ ºê¶ó¿ìÀú·Î

½ëÅÍ(Center)
½ëÅÍ(Centre)
±¸ÇüÀÇ Ç¥¸éÀÇ ¸ðµç À§Ä¡·Î ºÎÅÍ °°Àº °Å¸®¿¡ ÀÖ´Â Á¡.
½ºÆ÷Ã÷¿¡¼­ ¿îµ¿ÀåÀ̳ª ¾Õ ¶óÀÎÀÇÁß¾Ó¿¡ À§Ä¡ ÇÑ ¼±¼ö.
´Ù¸¥ Á¤ÀÇ ¸ñ·Ï(DL)ÀÇ ÀÀ¿ëÀ» ¿¹·Î µé¸é, °¢ ¹ß¾ðÀÚ¸¦ DT¿¡ ±×ÀÇ ¹ß¾ð³»¿ëÀ» DD¿¡ ±â¼úÇÏ´Â °ÍÀÌ´Ù.

10.3.1 ¸ñ·ÏÀÇ º¸´Â Ç¥Çö

ÁÖ¼®: ¾Æ·¡¿¡ ÇöÀçÀÇ º¸´Â »ç¿ëµµ±¸µé¿¡¼­ ¾ç½ÄÈ­ µÈ ¸ñ·Ïµé¿¡ ´ë ÇØ ¾î¶»°Ô ÀÛ¿ëÇϴ°¡¸¦ ¼³¸í ÇÏ¿´´Ù. ½ºÅ¸ÀϽ¬Æ®´Â ¹øÈ£ ºÙÄ¡±â, ¾ð¾î¿¡ µû¸¥ Ç¥Çö, µé¿© ¾²±â µî ¸ñ·Ï ¾ç½ÄÈ­¿¡ º¸´Ù ³ªÀº Á¦¾î ¼ö´ÜÀ» Á¦°øÇÑ´Ù.

º¸´Â »ç¿ëµµ±¸ ÀϹÝÀûÀ¸·Î ³×½ºÆÃÀÇ ¼öÁØ¿¡ ¸Â°Ô µé¿© ¾²±âÇÑ´Ù.

µÎ ¸ñ·Ï OL°ú UL ¸ðµÎ¿¡¼­ type ¾ÖÆ®¸®ºäÆ®´Â º¸´Â »ç¿ëµµ±¸¸¦ À§ ÇÑ ¼±Åà »çÇ×À» ÁöÁ¤ÇÑ´Ù.

UL ¿¤·¹¸àÆ®¿¡¼­ type ¾ÖÆ®¸®ºäÆ®ÀÇ °¡´ÉÇÑ °ªµéÀº disc, square¿Í circleÀÌ´Ù. µðÆúÆ® °ªÀº ÇöÀç ¸ñ·ÏÀÇ ³×½ºÆà ¼öÁØ¿¡ µû¶ó ´Ù¸£´Ù. ±× °ªÀº ´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ »ç¿ëµÈ´Ù.

°¢ °ªÀÌ ¾î¶»°Ô ³ªÅ¸³ª´Â°¡´Â »ç¿ëµµ±¸¿¡ µû¶ó ´Ù¸£´Ù. »ç¿ëµµ±¸´Â "disc"¸¦ ²Ë Âù ¿øÀ¸·Î, "circle"À» ¿øÀÇ Å׵θ®·Î, "square"¸¦ ³×¸ð ²ÃÀÇ Å׵θ®·Î Ç¥½ÃÇÑ´Ù.

µµÇü »ç¿ëµµ±¸¿¡¼­´Â ¾Æ·¡¿Í °°ÀÌ Ç¥ÇöµÈ´Ù.

°¡´ÉÇÑ disc Ç¥Çö °ªÀÌ "disc" ÀÏ ¶§
°¡´ÉÇÑ circle Ç¥Çö °ªÀÌ "circle" ÀÏ ¶§
°¡´ÉÇÑ square Ç¥Çö °ªÀÌ "square" ÀÏ ¶§

OL ¿¤·¹¸àÆ®¿¡¼­ type ¾ÖÆ®¸®ºäÆ®ÀÇ °¡´ÉÇÑ °ªÀ» ¾Æ·¡ Ç¥¿¡ Á¤¸®ÇÏ¿´´Ù. À̵éÀº ´ë¼Ò¹®ÀÚ ±¸º°ÇÏ¿© »ç¿ëµÈ´Ù.

ŸÀÔ(type)¹øÈ£ ºÙÀÌ´Â ½ºÅ¸ÀÏ
1¾Æ¶óºò ¼ýÀÚ1, 2, 3, ...
a¾ËÆĺª ¼Ò¹®ÀÚa, b, c, ...
A¾ËÆĺª ´ë¹®ÀÚA, B, C, ...
i·Î¸¸ ¼Ò¹®ÀÚi, ii, iii, ...
I·Î¸¸ ´ë¹®ÀÚI, II, III, ...

type ¾ÖÆ®¸®ºäÆ®´Â ºÒ·®ÇÑ °ÍÀ̸ç, ½ºÅ¸ÀϽ¬Æ®·Î ¸ñ·Ï ½ºÅ¸ÀÏÀÌ Ã³¸® µÇ¾î¾ß ÇÑ´Ù´Â Á¡¿¡ ÁÖÀÇÇ϶ó.

¿¹Á¦¿¡¼­ CSS¸¦ »ç¿ëÇÏ¿© ¸ñ·Ï ¿¤·¹¸àÆ®¿¡ ¼ýÀÚµéÀÇ ½ºÅ¸ÀÏ·Î ¼Ò¹®ÀÚ ¼öÄ¡¸¦ ÁöÁ¤ ÇÒ ¼ö ÀÖ´Ù. ¾Æ·¡ÀÇ ¿¹¿¡¼­ Ŭ¶ó½º°¡ "withroman"·Î ÁöÁ¤ µÈ °¢ OL ¿¤·¹¸àÆ®´Â ÀÌ ¸ñ·Ï Ç׸ñ¿¡ ÁöÁ¤ µÈ ·Î¸¸ ¼Ò¹®ÀÚ ¼öÄ¡·Î Ç¥½ÃÇÑ´Ù.

<STYLE type="text/css">
 OL.withroman { list-style-type: lower-roman }
</STYLE>
<BODY>
<OL class="withroman">
<LI> ù¹ø° ...
<LI> µÎ¹ø° ...
</OL>
</BODY>

Á¤ÀÇ ¸ñ·Ïµµ »ç¿ëµµ±¸¿¡ µû¶ó Ç¥ÇöÀÌ ´Ù¸¥µ¥, ¿¹¸¦ µé¸é:

<DL>
 <DT>Dweeb
 <DD>young excitable person who may mature into a <EM>Nerd</EM> or
	<EM>Geek</EM>

 <DT>Cracker
 <DD>hacker on the Internet

 <DT>Nerd
 <DD>male so into the Net that he forgets his wife's birthday
</DL>

´ÙÀ½°ú °°ÀÌ Ç¥ÇöµÈ´Ù.

Dweeb
      young excitable person who may mature into a Nerd or Geek
Cracker
      hacker on the Internet
Nerd
      male so into the Net that he forgets his wife's birthday

10.4 DIR, MENU ¿¤·¹¸àÆ®

DIR¿Í MENU´Â ºÒ·®ÇÑ °ÍÀÌ´Ù.

°ø½ÄÀûÀÎ Á¤ÀÇ´Â º¯ÀÌ DTD¸¦ ÂüÁ¶Ç϶ó.

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

DIR ¿¤·¹¸àÆ®´Â º¹¼ö Ä÷³(column) µð·ºÅ丮(directory) ¸ñ·ÏÀ» ¸¸µé±â À§ÇÏ¿© ¼³°è µÇ¾ú°í, MENU ¿¤·¹¸àÆ®´Â ´ÜÀÏ Ä÷³ ¸Þ´º(menu) ¸ñ·ÏÀ» ¸¸µé±â À§ÇÏ¿© ¼³°è µÇ¾ú´Ù. µÎ ¿¤·¹¸àÆ®´Â UL°ú °°Àº ±¸Á¶¸¦ °®°í ´Ù¸£°Ô Ç¥ÇöÇÑ´Ù. ½ÇÁ¦·Î´Â »ç¿ëµµ±¸¿¡¼­ DIR ¶Ç´Â MENU ¸ñ·ÏÀ» UL ¸ñ·Ï°ú ²À °°ÀÌ Ç¥ÇöÇÑ´Ù.

ÀÌµé ¿¤·¹¸àÆ® ´ë½Å¿¡ ULÀ» »ç¿ë ÇÒ °ÍÀ» °­·ÂÈ÷ ±ÇÇÑ´Ù.

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