Classification (¸ñ·Ï) | OL, UL
Home > Document > HTML > ÃÊ±Þ °úÁ¤ > Classification(¸ñ·Ï ¸¸µé±â)

ÆäÀÌÁö ¸ñÂ÷

¸ñ·Ï ¸¸µé±â

¼ø¼­°¡ ÀÖ´Â ¸ñ·Ï : OL(Ordered List)°ú ¼ø¼­°¡ ¾ø´Â ¸ñ·Ï : UL(Unordered List) ¿¡ ´ëÇØ¼­ ¾Ë¾Æ º¾´Ï´Ù. ¾Æ·¡ÀÇ 1, 2¹ø Ç׸ñ¿¡¼­ º¸´Ù½ÃÇÇ ¼ø¼­°¡ ÀÖ´Â ¸ñ·ÏÀº ¼ýÀÚ, ¾ËÆÄºª, ·Î¸¶±âÈ£ µîÀ¸·Î ¸ñ·ÏÀ» ¼ø¼­´ë·Î ³ª¿­Çϰí, ¼ø¼­°¡ ¾ø´Â ¸ñ·ÏÀº Dics, Circle, Square µîÀÇ ±âÈ£·Î ¸ñ·ÏÀ» ³ª¿­ÇÕ´Ï´Ù.

Legend : Optional, Forbidden, Empty, Deprecated, Loose DTD, Frameset DTD   [Ç¥ º¸´Â ¹æ¹ý]
ElementStart tagEnd tagEmptyDeprecatedDTD
OL     
UL     




1. OL(Ordered List)

¼ø¼­°¡ ÀÖ´Â ¸®½ºÆ®·Î¼­ 'BLOCKQUOTE' Elementó·³ ¿À¸¥ ÂÊÀ¸·Î µé¿©¾²±â°¡ µË´Ï´Ù.

ÀÔ·Â
- <BODY>
- <OL type="¿øÇÏ´Â type(A, a, I, i)À» ¿©±â¿¡ ³Ö½À´Ï´Ù. ±âº»°ªÀº ¾Æ¶óºñ¾Æ ¼ýÀÚ ÀÔ´Ï´Ù.">
  <LI>¼ø¼­°¡ Àִ ù ¹øÂ° List</LI>
  <LI>¼ø¼­°¡ ÀÖ´Â µÎ ¹øÂ° List</LI>
  <LI>¼ø¼­°¡ ÀÖ´Â ¼¼ ¹øÂ° List</LI>
  </OL>
  </BODY>


Ãâ·Â°á°ú
  1. ù ¹øÂ° ¼ø¼­°¡ ÀÖ´Â ¸ñ·Ï
  2. µÎ ¹øÂ° ¼ø¼­°¡ ÀÖ´Â ¸ñ·Ï
  3. ¹øÂ° ¼ø¼­°¡ ÀÖ´Â ¸ñ·Ï




2. UL(Unordered List)

¼ø¼­°¡ ¾ø´Â ¸®½ºÆ®·Î¼­ 'BLOCKQUOTE' Elementó·³ ¿À¸¥ ÂÊÀ¸·Î µé¿©¾²±â°¡ µË´Ï´Ù.

ÀÔ·Â
- <BODY>
- <UL type="¿øÇÏ´Â type(circle, square)À» ¿©±â¿¡ ³Ö½À´Ï´Ù. ±âº»°ªÀº disc(¼ÓÀÌ Âù µ¿±×¶ó¹Ì) ÀÔ´Ï´Ù.">
  <LI>¼ø¼­°¡ ¾ø´Â ù ¹øÂ° List</LI>
  <LI>¼ø¼­°¡ ¾ø´Â µÎ ¹øÂ° List</LI>
  <LI>¼ø¼­°¡ ¾ø´Â ¼¼ ¹øÂ° List</LI>
  </UL>
  </BODY>


Ãâ·Â°á°ú
  • ù¹øÂ° ¼ø¼­°¡ ¾ø´Â ¸ñ·Ï
  • µÎ¹øÂ° ¼ø¼­°¡ ¾ø´Â ¸ñ·Ï
  • ¼¼¹øÂ° ¼ø¼­°¡ ¾ø´Â ¸ñ·Ï


hkp_devf (1K) <Li> TagÀ» UL, OL Tag¼Ó¿¡ ³ÖÁö ¾Ê¾ÒÀ» °æ¿ì

  • ÀÌ·¸°Ô µË´Ï´Ù. (¡Ü) ¸ð¾çÀ¸·Î º¸ÀÌÁ®?...


  • UL°ú OLÀÇ ÅëÇÕ Å¸ÀÌÆ²Àü °á°ú ±âº»°ªÀº disc°¡ µÇ°í ¿À¸¥ÂÊ µé¿© ¾²±â¸¦ ÇÏÁö ¾Ê½À´Ï´Ù.





    Ordered List & Unordered List
    OL
    Ordered List ¼ø¼­°¡ ÀÖ´Â ¸ñ·ÏÀÔ´Ï´Ù. Á¾·ù´Â ´ÙÀ½°ú °°½À´Ï´Ù.
    List-Type Source Coding ºê¶ó¿ìÀú·Î Ãâ·ÂÇÑ °á°ú
    ÁöÁ¤ ¾ÈÇϸé1
    (Default)
    <ol>
    <li>¾Æ¶óºñ¾Æ ¼ýÀÚ 1</li>
    <li>¾Æ¶óºñ¾Æ ¼ýÀÚ 2</li>
    </ol>
    1. ¾Æ¶óºñ¾Æ ¼ýÀÚ 1
    2. ¾Æ¶óºñ¾Æ ¼ýÀÚ 2
    A <ol type="A">
    <li>¿µ¹® ´ë¹®ÀÚ 1</li>
    <li>¿µ¹® ´ë¹®ÀÚ 2</li>
    </ol>
    1. ¿µ¹® ´ë¹®ÀÚ 1
    2. ¿µ¹® ´ë¹®ÀÚ 2
    a <ol type="a">
    <li>¿µ¹® ¼Ò¹®ÀÚ 1</li>
    <li>¿µ¹® ¼Ò¹®ÀÚ 2</li>
    </ol>
    1. ¿µ¹® ¼Ò¹®ÀÚ 1
    2. ¿µ¹® ¼Ò¹®ÀÚ 2
    I <ol type="I">
    <li>·Î¸¶ ¼ýÀÚ ´ë¹®ÀÚ 1</li>
    <li>·Î¸¶ ¼ýÀÚ ´ë¹®ÀÚ 2</li>
    </ol>
    1. ·Î¸¶ ¼ýÀÚ ´ë¹®ÀÚ 1
    2. ·Î¸¶ ¼ýÀÚ ´ë¹®ÀÚ 2
    i <ol type="i">
    <li>·Î¸¶ ¼ýÀÚ ¼Ò¹®ÀÚ 1</li>
    <li>·Î¸¶ ¼ýÀÚ ¼Ò¹®ÀÚ 2</li>
    </ol>
    1. ·Î¸¶ ¼ýÀÚ ¼Ò¹®ÀÚ 1
    2. ·Î¸¶ ¼ýÀÚ ¼Ò¹®ÀÚ 2
    start ½ÃÀÛÇÒ ¸ñ·Ï¹øÈ£
    UL
    Unordered List ¼ø¼­°¡ ¾ø´Â ¸ñ·ÏÀÔ´Ï´Ù. Á¾·ù´Â ´ÙÀ½°ú °°½À´Ï´Ù.
    List-Type Source Coding ºê¶ó¿ìÀú·Î Ãâ·ÂÇÑ °á°ú
    ÁöÁ¤ ¾ÈÇϸé
    disc
    (Default)
    <ul>
    <li>disc 1</li>
    <li>disc 2</li>
    </ul>
    • disc 1
    • disc 2
    circle <ul type="circle">
    <li>circle 1</li>
    <li>circle 2</li>
    </ul>
    • circle 1
    • circle 2
    square <ol type="square">
    <li>square 1</li>
    <li>square 2</li>
    </ol>
    1. square 1
    2. square 2
    LI
    List ItemsÀÇ ¾àÀÚ·Î È­¸é¿¡ º¸¿©Áö´Â ¸ñ·ÏÀÔ´Ï´Ù.
    value OL Element ¼ÓÀÇ LI ¿¡ Àû¿ëµÇ´Â ¸ñ·ÏÀÇ ½ÃÀÛ ¹øÈ£




    3. OL Element ¿¡¼­ÀÇ ¸ñ·Ï ¹øÈ£ ¹Ù²Ù±â

    ¼ø¼­°¡ ÀÖ´Â ¸ñ·Ï¿¡¼­´Â List-Type¿¡ °ü°è¾øÀÌ ¸ñ·Ï ¹øÈ£¸¦ Çϳª¾¿ Áõ°¡ ½Ãŵ´Ï´Ù. ¾Æ·¡¿Í °°ÀÌ ÀÔ·ÂÇϸé Ãâ·Â°á°ú°¡ ³ª¿É´Ï´Ù.

    ÀÔ·Â
    <HTML>
        <HEAD>
            <TITLE>¼ø¼­°¡ ÀÖ´Â ¸ñ·Ï ¿¹Á¦ 1</TITLE>
        </HEAD>
        <BODY>
            <OL>
                <LI>1¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã</LI>
                <LI type="A">2¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã</LI>
                <LI type="a">3¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã</LI>
                <LI type="I">4¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã</LI>
                <LI type="i">5¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã</LI>
                <LI type="1">6¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã</LI>
            </OL>
        </BODY>
    </HTML>
    


    º¸´Ù½ÃÇÇ List-TypeÀ» A, a, I, i, 1¼øÀ¸·Î ´Ù¸£°Ô ÁöÁ¤ÇßÁö¸¸ 1¾¿ Áõ°¡µÈ ¼ø¼­°¡ µÇÁ®. ±×·¡¼­ ¸¸¾à µµÁß¿¡ 1¹ø ºÎÅÍ ´Ù½Ã ½ÃÀÛÇÒ Çʿ䰡 ÀÖÀ» ¶§´Â start³ª value ¼Ó¼ºÀ» »ç¿ëÇÏ¸é µÇ´Â°ÅÁ®...




        3-1. ´Ù¸¥ OL Tag¿¡¼­ óÀ½ ºÎÅÍ ´Ù½Ã 1¹øÀ¸·Î ÁöÁ¤ÇÒ °æ¿ì

    ÀÔ·Â
    <HTML>
        <HEAD>
            <TITLE>UNTITLED</TITLE>
        </HEAD>
        <BODY>
            <OL type="I">
                <LI>1¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã</LI>
                <LI>2¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã</LI>
                <LI>3¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã</LI>
                <LI>4¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã</LI>
                <LI>5¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã</LI>
                <LI>6¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã</LI>
            </OL>
     
            <OL start="1" type="i">
                <LI>1¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã</LI>
                <LI>2¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã</LI>
                <LI>3¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã</LI>
                <LI>4¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã</LI>
                <LI>5¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã</LI>
                <LI>6¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã</LI>
            </OL>
        </BODY>
    </HTML>
    





        3-2. °°Àº OL Tag¿¡¼­ µµÁß¿¡ LI¿¡ ´Ù¸¥ ¹øÈ£¸¦ ÁöÁ¤ÇÒ °æ¿ì

    ÀÔ·Â
    <HTML>
        <HEAD>
            <TITLE>UNTITLED</TITLE>
        </HEAD>
        <BODY>
            <OL>
                <LI>1¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã</LI>
                <LI>2¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã</LI>
                <LI value="1">1¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã</LI>
                <LI>2¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã</LI>
                <LI>3¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã</LI>
                <LI value="30">30¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã</LI>
                <LI>31¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã</LI>
                <LI>32¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã</LI>
                <LI>33¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã</LI>
                <LI value="40">40¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã</LI>
                <LI>41¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã</LI>
                <LI>42¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã</LI>
            </OL>
        </BODY>
    </HTML>
    




        3-3. °°Àº OL Tag¿¡ Sub-List°¡ µé¾î°¥ °æ¿ì

    ÀÔ·Â
    - <html>
    - <head>
      <title>¸ñ·Ï ¼Ó¿¡ µé¾î°£ ¸ñ·Ï</title>
      </head>
    - <body>
    - <ol>
      <li>1¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã</li>
    - <li>
      2¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã
    - <ul type="square">
      <li>1¹øÂ° ¼ø¼­°¡ ¾ø´Â ¸ñ·ÏÀ¸·Î Ç¥½Ã</li>
      <li>2¹øÂ° ¼ø¼­°¡ ¾ø´Â ¸ñ·ÏÀ¸·Î Ç¥½Ã</li>
      <li>3¹øÂ° ¼ø¼­°¡ ¾ø´Â ¸ñ·ÏÀ¸·Î Ç¥½Ã</li>
      </ul>
      </li>
      <li value="30">30¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã</li>
      <li>31¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã</li>
      <li>32¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã</li>
      </ol>
      </body>
      </html>


    Ãâ·Â°á°ú
    1. 1¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã
    2. 2¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã
      • 1¹øÂ° ¼ø¼­°¡ ¾ø´Â ¸ñ·ÏÀ¸·Î Ç¥½Ã
      • 2¹øÂ° ¼ø¼­°¡ ¾ø´Â ¸ñ·ÏÀ¸·Î Ç¥½Ã
      • 3¹øÂ° ¼ø¼­°¡ ¾ø´Â ¸ñ·ÏÀ¸·Î Ç¥½Ã
    3. 30¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã
    4. 31¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã
    5. 32¹øÂ° ¸ñ·ÏÀ¸·Î Ç¥½Ã


    ¼ø¼­°¡ ¾ø´Â ¸ñ·Ï ¿¹Á¦

    ÀÔ·Â
    <HTML>
        <HEAD>
            <TITLE>¼ø¼­°¡ ¾ø´Â ¸ñ·Ï ¿¹Á¦</TITLE>
        </HEAD>
        <BODY>
            <H3>ÀÎÆ÷¼½, Àü·« ¼Ö·ç¼Ç°ú º¸¾È ¼­ºñ½º »ç¾÷¿¡ ÁýÁßÇÑ´Ù</H3> 
    				 
            SK°è¿­ Á¤º¸º¸È£Àü¹®¾÷ü ÀÎÆ÷¼½(´ëÇ¥ ÃÖÀ»¶ô www.skinfosec.co.kr)Àº ÃÖ±Ù  2003³âµµ ÀÎÆ÷¼½
            ¿µ¾÷Àü·« ¼¼¹Ì³ª¸¦ °®°í, Àü·« ¼Ö·ç¼Ç °ü·Ã ¿µ¾÷°ú º¸¾È ¼­ºñ½º »ç¾÷¿¡ ÁýÁßŰ·Î Çß´Ù. 
            À̹ø ¼¼¹Ì³ª´Â
            <font color="red" face="±Ã¼­">
            <UL>
                <LI>SK±×·ì³» Á¤º¸º¸È£»ç¾÷ Ȱ¼ºÈ­ </LI>
                <LI>´ë¿Ü»ç¾÷ ¸ÅÃâºñÁß È®´ë </LI>
                <LI>¾ÈÁ¤Àû ¼öÀͱ¸Á¶ È®´ë ¹× °³¼±</LI>
            </UL>
            </font>
            µî 3´ë °æ¿µÁßÁ¡ÃßÁø°úÁ¦¿Í À̸¦À§ÇÑ ¿µ¾÷½ÇÇà°èȹ µîÀ» À§ÇØ ¸¶·ÃµÆ´Ù.
            
            ÀÌ¿¡µû¶ó ÀÎÆ÷¼½Àº Ÿ±ê °í°´À» Àû±Ø ¹ß±¼ÇØ Àü·«»óǰ À§ÁÖ·Î ¿µ¾÷À» ÁýÁßŰ·Î Çß´Ù.
        </BODY>
    </HTML>
    





    ÀÌ ¹®¼­ÀÇ ÀúÀÛ±ÇÀº www.cadvance.org ¿¡ ÀÖ½À´Ï´Ù.

    Top
    Back
    New
    °Ë»ö