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