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
    검색