list 는 콘텐트 안에 리스트를 나타냅니다.

xhtml의 설명이지만, li는 언제나 ul이나 ol 안에 들어갑니다.
ul은 unordered list 의 줄임말로 별 순서가 없는 그냥 평범한 리스트를 나타내고 ol은 ordered list 로 앞에 숫자가 붙거나 알파벳숫자, 로마숫자가 붙어서 순서를 나타내어 주는것을 말합니다.

  • 돼지
  • 하마
  • 코끼리

라고 나타내고 싶으면
돼지<br />
하마<br />
코끼리

이거나
<div> 를쓰겠습니다. 하지만 이런 리스트형식은 말 그대로 리스트를 쓰는것이 최고입니다.

  • 돼지
  • 하마
  • 코끼리
  1. 중국 엄청많이 산다
  2. 일본 많이 산다
  3. 호주 적게 산다


간단히 정리가 되겠습니다. 리스트 목록을 더하려면 단순히 <li> 를 더해서 넣으면 되겠습니다.
이 리스트를 제어하는것을 보겠습니다.

  • list-style-type

    리스트의 스타일 종류를 정할수 있습니다.

    예) list-style-type: lower-roman:
    i, ii, iii, iv, v 이런식으로 리스트 앞에 나오겠죠.
    밑에것들이 여러가지 종류들입니다.

    W3C 에서 직접 인용합니다.

    decimal
    Decimal numbers, beginning with 1.
    decimal-leading-zero
    Decimal numbers padded by initial zeros (e.g., 01, 02, 03, …, 98, 99).
    lower-roman
    Lowercase roman numerals (i, ii, iii, iv, v, etc.).
    upper-roman
    Uppercase roman numerals (I, II, III, IV, V, etc.).
    georgian
    Traditional Georgian numbering (an, ban, gan, …, he, tan, in, in-an, …).
    armenian
    Traditional Armenian numbering.
    Alphabetic systems are specified with: lower-latin or lower-alpha
    Lowercase ascii letters (a, b, c, … z).
    upper-latin or upper-alpha
    Uppercase ascii letters (A, B, C, … Z).
    lower-greek
    Lowercase classical Greek alpha, beta, gamma, … (α, β, γ, …)

  • list-style-image

    앞에 특별히 이미지로 대쳐할수 있습니다. 간단합니다. 주소만 첨가해 주면됩니다.

    예) list-style-image: url(heart.gif);

  • list-style-position

    리스트가 어디에 위치할지를 정할수 있습니다. inside 혹은 outside 둘중에 하나의 값을 고를수 있는데 브라우저마다 이해하는 법이 틀린지라 실제로 자신이 코딩하면서 맞추어야 하는 부분입니다. 제 블로그에서 더 자세히 다룰거 같습니다. 비교표를 보시면서 참고하시기 바랍니다.
    http://www.brunildo.org/test/IEul1.html

  • list-style

    list-style 로 위의 것들을 다 총괄해서 한줄로 나타낼수 있습니다.
    list-style: 리스트타입 위치 이미지; 순서대로 넣을수 있습니다.

    예) list-style: lower-roman inside url(heart.gif);