ȨÀ¸·Î
| ¹«·áȸ¿ø°¡ÀÔ | ¾ÆÀ̵ð/ºñ¹øÃ£±â
ÃßõÀ½¾Ç¹æ¼Û
HTML ¹®¼­ÀÇ ¸ñ·Ï(DL, UL, OL)
12³â Àü
»óÀ§¿Í ÇÏÀ§°¡ Àִ ü°èÈ­ µÈ ¸ñ·ÏÀ» ¸¸µé ¶§ »ç¿ëµÇ¸é ±× Á¾·ù´Â Á¤ÀǸñ·Ï(DL: definition list), ¹øÈ£¾ø´Â ¸ñ·Ï(UL: unordered list), ¹øÈ£ÀÖ´Â ¸ñ·Ï(OL: ordered list)ÀÇ 3 °¡Áö°¡ ÀÖ´Ù.

<DL>

Á¤ÀǸñ·Ï(DL: definition list)ÀÇ Å±×À̸ç, ±× ³»¿ëÀ¸·Î °®´Â ¿¤·¹¸àÆ®´Â Á¤ÀÇ ¸ñ·Ï Á¦¸ñ(DT:definition title), Á¤ÀÇ ¸ñ·Ï µ¥ÀÌÅÍ(DD: definition data)°¡ ÀÖ´Ù.

<DT>

Á¤ÀÇ ¸ñ·ÏÀÇ Á¦¸ñ(DT:definition title)ÀÌ´Ù. ÀÚµ¿ ÁٹٲÞÀ» ÇÏ°í µé¿©¾²±â´Â ÇÏÁö ¾Ê´Â´Ù. Á¾·áű״ ¼±ÅÃÀûÀÌ´Ù.

<DD>

Á¤ÀÇ ¸ñ·ÏÀÇ µ¥ÀÌÅÍ(DD: definition data)ÀÌ´Ù. ÀÚµ¿ ÁٹٲÞÀ» ÇÏ°í µé¿©¾²±â¸¦ ÇÑ´Ù. Á¾·áű״ ¼±ÅÃÀûÀÌ´Ù.

¿¹Á¦¸¦ º¸¸é

<DL>
<DT>Á¤ÀÇ ¸ñ·Ï Á¦¸ñ 1
<DD>Á¤ÀÇ ¸ñ·Ï ³»¿ë 1-1
<DD>Á¤ÀÇ ¸ñ·Ï ³»¿ë 1-2
<DT>Á¤ÀÇ ¸ñ·Ï Á¦¸ñ 2
<DD>Á¤ÀÇ ¸ñ·Ï ³»¿ë 2-1
</DL>
Á¤ÀÇ ¸ñ·Ï Á¦¸ñ 1
Á¤ÀÇ ¸ñ·Ï ³»¿ë 1-1
Á¤ÀÇ ¸ñ·Ï ³»¿ë 1-2
Á¤ÀÇ ¸ñ·Ï Á¦¸ñ 2
Á¤ÀÇ ¸ñ·Ï ³»¿ë 2-1

¡¡

<UL>

¹øÈ£¾ø´Â ¸ñ·Ï(UL: unordered list)ÀÇ Å±×À̸ç, ±× ³»¿ëÀ¸·Î °®´Â ¿¤·¹¸àÆ®´Â ¸ñ·Ï Ç׸ñ(LI: list item)µéÀÌ µé¾î °£´Ù.

<LI>

¸ñ·Ï Ç׸ñ(LI: list item)ÀÌ´Ù. ÀÚµ¿ ÁٹٲÞÀ» ÇÏ°í µé¿©¾²±â¸¦ ÇÑ´Ù. Á¾·áű״ ¼±ÅÃÀûÀÌ´Ù.

<UL>¿Í <LI> ¿¤·¹¸àÆ®¿¡¼­ °øÈ÷ ¾ÖÆ®¸®ºäÆ®·Î´Â typeÀÌ ÀÖ°í °¡´É ÇÑ °ªÀº ¾Æ·¡¿Í °°´Ù. ¹°·Ð <UL>¿¡ typeÀÌ ÁöÁ¤µÇ´Â °æ¿ì ±× ÇÏÀ§ <LI>¿¡´Â ¸ðµÎ °°Àº typeÀÌ Àû¿ëµÈ´Ù.

  • <LI type=disc> °ªÀÌ "disc" ÀÏ ¶§: ²Ë Âù ¿øÀ¸·Î
  • <LI type=circle> °ªÀÌ "circle" ÀÏ ¶§: ¿øÀÇ Å׵θ®·Î
  • <LI type=square> °ªÀÌ "square" ÀÏ ¶§: ³×¸ð ²ÃÀÇ Å׵θ®·Î

°¢ °ªÀÌ ¾î¶»°Ô ³ªÅ¸³ª´Â°¡¿Í µðÆúÆ®´Â ºê¶ó¿ìÀú¿¡ µû¶ó ´Ù¸£´Ù.

¿¹Á¦¸¦ º¸¸é

<UL type="disc">
<LI>¹øÈ£¾ø´Â¸ñ·Ï Ç׸ñ 1
<LI>¹øÈ£¾ø´Â¸ñ·Ï Ç׸ñ 2
<LI>¹øÈ£¾ø´Â¸ñ·Ï Ç׸ñ 3
<UL type="circle">
<LI>¹øÈ£¾ø´Â¸ñ·Ï Ç׸ñ 3-1
<LI>¹øÈ£¾ø´Â¸ñ·Ï Ç׸ñ 3-2
</UL>
<LI>¹øÈ£¾ø´Â¸ñ·Ï Ç׸ñ 4
<ul type="square">
<LI>¹øÈ£¾ø´Â¸ñ·Ï Ç׸ñ 4-1
</UL>
</UL>
  • ¹øÈ£¾ø´Â¸ñ·Ï Ç׸ñ 1
  • ¹øÈ£¾ø´Â¸ñ·Ï Ç׸ñ 2
  • ¹øÈ£¾ø´Â¸ñ·Ï Ç׸ñ 3
    • ¹øÈ£¾ø´Â¸ñ·Ï Ç׸ñ 3-1
    • ¹øÈ£¾ø´Â¸ñ·Ï Ç׸ñ 3-2
  • ¹øÈ£¾ø´Â¸ñ·Ï Ç׸ñ 4
    • ¹øÈ£¾ø´Â¸ñ·Ï Ç׸ñ 4-1

¡¡

<OL>

¹øÈ£ÀÖ´Â ¸ñ·Ï(OL: ordered list)ÀÇ Å±×À̸ç, ±× ³»¿ëÀ¸·Î °®´Â ¿¤·¹¸àÆ®´Â ¸ñ·Ï Ç׸ñ(LI: list item)µéÀÌ µé¾î °£´Ù.

<LI>

¸ñ·Ï Ç׸ñ(LI: list item)ÀÌ´Ù. ÀÚµ¿ ÁٹٲÞÀ» ÇÏ°í µé¿©¾²±â¸¦ ÇÑ´Ù. Á¾·áű״ ¼±ÅÃÀûÀÌ´Ù.

<OL>¿Í <LI> ¿¤·¹¸àÆ®¿¡¼­ °øÈ÷ ¾ÖÆ®¸®ºäÆ®·Î´Â typeÀÌ ÀÖ°í °¡´É ÇÑ °ªÀº ¾Æ·¡¿Í °°´Ù. ¹°·Ð <OL>¿¡ typeÀÌ ÁöÁ¤µÇ´Â °æ¿ì ±× ÇÏÀ§ <LI>¿¡´Â ¸ðµÎ °°Àº typeÀÌ Àû¿ëµÈ´Ù.

<OL>ÀÇ Ãß°¡ÀûÀÎ ¾ÖÆ®¸®ºäÆ®·Î start="3"°¡ Àִµ¥ ÀÌ´Â ¸ñ·ÏÀÇ ½ÃÀÛ ¹øÈ£¸¦ ÁöÁ¤ÇÑ´Ù. <LI>¿¡¼­ ¹øÈ£¸¦ ÁöÁ¤ÇÏ·Á¸é value="5"¸¦ »ç¿ëÇÑ´Ù.

  1. <LI type="1"> ¾Æ¶óºò ¼ýÀÚ 1, 2, 3, ... µðÆúÆ®ÀÌ´Ù.
  2. <LI type="a"> ¾ËÆÄºª ¼Ò¹®ÀÚ a, b, c, ...
  3. <LI type="A"> ¾ËÆÄºª ´ë¹®ÀÚ A, B, C, ...
  4. <LI type="i"> ·Î¸¸ ¼Ò¹®ÀÚ i, ii, iii, ...
  5. <LI type="I"> ·Î¸¸ ´ë¹®ÀÚ I, II, III, ...

¿¹Á¦¸¦ º¸¸é

<OL type="A">
<LI>¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 1
<LI>¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 2
<LI>¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 3
<OL type="i">
<LI>¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 4
<LI>¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 5
</OL>
<LI type="1">¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 6
<OL type="a" start="1">
<LI>¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 7
<LI>¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 8
</OL>
</OL>
  1. ¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 1
  2. ¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 2
  3. ¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 3
    1. ¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 4
    2. ¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 5
  4. ¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 6
    1. ¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 7
    2. ¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 8

¡¡

³×½ºÆÃ

À§ÀÇ Á¤ÀǸñ·Ï(DL: definition list), ¹øÈ£¾ø´Â ¸ñ·Ï(UL: unordered list), ¹øÈ£ÀÖ´Â ¸ñ·Ï(OL: ordered list)ÀÇ 3 °¡Áö¸¦ Á¶ÇÕÇÏ¿© »ç¿ë ÇÒ ¼ö Àִµ¥, ÀÌ ¶§ ÀûÁ¤ ÇÑ ³×½ºÆÃ(nesting)À» ÇÏ¿©¾Æ ÇÑ´Ù.

³×½ºÆÃ(nesting)À̶õ ½ÃÀÛÅÂ±×¿Í Á¾·áÅñ×ÀÇ Â¦À» ¸ÂÃßµÇ ±¸Á¶¿¡ ¸Â°Ô ´Ý¾Æ¾ß ÇÑ´Ù.

³×½ºÆÃÀÌ Æ²¸° ¿¹Á¦ :        ³×½ºÆÃÀÌ ¸Â´Â ¿¹Á¦
<OL>  -----+                 <UL> ----------+
<UL>  -----+---+             <OL>  -----+   |
<LI>       |   |              <LI>      |   |
</OL> -----+   |             </OL> -----+   |
</UL> ---------+             </UL> ---------+

ÀÌ´Â ¸ñ·Ï¿¡¼­ »Ó ¾Æ´Ï¶ó ¸ðµç ű׿¡ Àû¿ëµÈ´Ù. ±×·¯³ª À̿Ͱ°Àº ³í¸®°¡ Ʋ¸± ¶§ ºê¶ó¿ìÀú°¡ ÀúÀý·Î ű׸¦ Á¾·á ½ÃŰ´Â °æ¿ìµµ ¸¹ÀÌ ÀÖÀ¸³ª, »ó´çÈ÷ ¸¹Àº °æ¿ì¿¡ ½É°¢ÇÑ ¿À·ù¸¦ ¹ß»ý½ÃŰ¹Ç·Î, ±× ű×ÀÇ Â¦À» Àß ¸ÂÃß¾î¾ß Çϰí, »ý·«Çصµ µÇ´Â ÅÂ±×Æ²µµ »ý·«ÇÏÁö ¾ÊÀ¸¸ç, ÄÚµù ÇÒ ¶§ ±¸Á¶¿¡ µû¶ó µé¿©¾²±â¸¦ ÇÏ´Â ÀÌÀ¯µµ µÈ´Ù.

³×½ºÆÃÀÌ Àß µÈ º¹ÇÕ ¸ñ·ÏÀÇ ¿¹Á¦¸¦ º¸ÀÚ.

<OL type="1">
<LI>¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 1
<UL type="disc">
<LI>¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 1 Áß - ¹øÈ£¾ø´Â ¸ñ·Ï Ç׸ñ 1-1
<LI>¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 1 Áß - ¹øÈ£¾ø´Â ¸ñ·Ï Ç׸ñ 1-2
</UL>
<LI>¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 2
<LI>¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 3
<DL>
<DT>¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 3 Áß - Á¤ÀÇ ¸ñ·Ï Á¦¸ñ 3-1
<DD>¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 3 Áß - Á¤ÀÇ ¸ñ·Ï Ç׸ñ 3-1-1
<OL type="a" start="5">
<LI>¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 3 Áß - Á¤ÀÇ ¸ñ·Ï Ç׸ñ 3-1-1
Áß - ¹øÈ£ÀÖ´Â ¸ñ·Ï 3-1-1-1
<LI>¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 3 Áß - Á¤ÀÇ ¸ñ·Ï Ç׸ñ 3-1-1
Áß - ¹øÈ£ÀÖ´Â ¸ñ·Ï 3-1-1-2
</OL>
</DD>
<DT>¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 3 Áß - Á¤ÀÇ ¸ñ·Ï Á¦¸ñ 3-2
<DD>¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 3 Áß - Á¤ÀÇ ¸ñ·Ï Ç׸ñ 3-2-1
</DL>
</LI>
<LI value=4>¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 4
</OL>
  1. ¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 1
    • ¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 1 Áß - ¹øÈ£¾ø´Â ¸ñ·Ï Ç׸ñ 1-1
    • ¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 1 Áß - ¹øÈ£¾ø´Â ¸ñ·Ï Ç׸ñ 1-2
  2. ¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 2
  3. ¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 3
    ¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 3 Áß - Á¤ÀÇ ¸ñ·Ï Á¦¸ñ 3-1
    ¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 3 Áß - Á¤ÀÇ ¸ñ·Ï Ç׸ñ 3-1-1
    1. ¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 3 Áß - Á¤ÀÇ ¸ñ·Ï Ç׸ñ 3-1-1 Áß - ¹øÈ£ÀÖ´Â ¸ñ·Ï 3-1-1-1
    2. ¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 3 Áß - Á¤ÀÇ ¸ñ·Ï Ç׸ñ 3-1-1 Áß - ¹øÈ£ÀÖ´Â ¸ñ·Ï 3-1-1-2
    ¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 3 Áß - Á¤ÀÇ ¸ñ·Ï Á¦¸ñ 3-2
    ¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 3 Áß - Á¤ÀÇ ¸ñ·Ï Ç׸ñ 3-2-1
  4. ¹øÈ£ÀÖ´Â ¸ñ·Ï Ç׸ñ 4
ÃßõÃßõ : 337 Ãßõ ¸ñ·Ï
¹øÈ£ Á¦¸ñ
3,046
 Vimeo (ºñ¸Þ¿À) API ¸¦ »ç¿ëÇÏ¿© Ç÷¹À̾î ÄÁÆ®·ÑÇϱâ
3,045
 iframe »ç¿ë½Ã ÇÏ´Ü¿¡ ¹ß»ýÇÏ´Â °ø¹é Á¦°Å¹æ¹ý
3,044
 ¾ÆÀÌÇÁ·¹ÀÓ(iframe) Àüüȭ¸é °¡´ÉÇÏ°Ô Çϱâ
3,043
 ºÎÆ®½ºÆ®·¦(bootstrapk)¿¡¼­ »ç¿ëÇÏ´Â class¸í Á¤¸®
3,042
 ºÎÆ®½ºÆ®·¦ CSS
3,041
 Å©·Ò¿¡¼­ ¸¶Áø Á¶Àý
3,040
 PHP ÇöÀç ÆäÀÌÁöÀÇ µµ¸ÞÀθíÀ̳ª urlµîÀÇ Á¤º¸ ¾Ë¾Æ¿À±â
3,039
 PHP preg match all()
3,038
 PHP ·Î À¥ÆäÀÌÁö ±Ü¾î¿À±â ¸ðµç ¹æ¹ý ÃÑÁ¤¸®!
3,037
 [PHP] ¿ø°ÝÁö ÆÄÀÏ ÁÖ¼Ò ³ëÃâ ¾ÈÇϰí curl·Î ´Ù¿î·Îµå ¹Þ±â
3,036
 PHP ÇÔ¼ö Á¤¸®
3,035
 ¾ÆÀÌÇÁ·¹ÀÓ(iframe) ºñÀ² À¯ÁöÇϸ鼭 Å©±â Á¶ÀýÇÏ´Â ¹æ¹ý
3,034
 PHP ¹è¿­¿¡¼­ ¹«ÀÛÀ§·Î Çϳª »Ì¾ÆÁÖ´Â array rand() ÇÔ¼ö
3,033
 PHP Á¤±Ô½Ä Á¤¸®
3,032
 PHP Á¤±Ô½ÄÀ» Ȱ¿ëÇÑ ÅÂ±× ¹× ƯÁ¤ ¹®ÀÚ¿­ Á¦°Å ¹× ÃßÃâ ¹æ¹ý
3,031
 php Å©·Ñ¸µ ¶Ç´Â ÆÄ½Ì ÇÔ¼ö, Á¤±Ô½Ä ¸ðÀ½
3,030
 Á¦ÀÌÄõ¸® ±âº» ¸í·É¾î
3,029
 À¥ÆäÀÌÁö °¡·Î ¸ðµå¼¼·Î ¸ðµå ÀνÄÇϱâ
3,028
 ¸ð¹ÙÀÏ À¥ È­¸é °­Á¦ ȸÀü(°¡·Î¸ðµå °íÁ¤)
3,027
 [HTML5]¿¡¼­ frameset ´ëü ¹æ¹ý°ú iframe ¼Ó¼º
3,026
 HTML <Audio> »ç¿ë¹ý
3,025
 À©µµ¿ì10 ½Ã½ºÅÛÆÄÀÏ ¼Õ»ó (Ãʰ£´Ü ¿À·ù º¹±¸¹æ¹ý!!)
3,024
 PHP ÆÄÀÏ Á¸Àç ¿©ºÎ ÆÄ¾ÇÇϱâ(·ÎÄà ÆÄÀÏ Á¸Àç ¹× ¿ø°ÝÁö ÆÄÀÏ Á¸Àç)
3,023
 [CSS] ¹Ú½º ¼¼·Î °¡¿îµ¥ Áß¾Ó Á¤·Ä 6°¡Áö
3,022
 CSS Layout ¼öÆò & ¼öÁ÷ Á¤·Ä
¸ñ·Ï
¹ÂÁ÷Æ®·ÎÆ® ºÎ»ê±¤¿ª½Ã ºÎ»êÁø±¸ °¡¾ßµ¿ ¤Ó °³ÀÎÁ¤º¸Ãë±Þ¹æÄ§
Copyright (C) musictrot All rights reserved.