CSS 스타일 목록

목록은 정보를 기준에 따라 정리한 것이다.

기본적인 사용 방법은 <ul> 또는 <ol>으로 목록 요소를 만들고, 개별 요소를 <li>로 만든다.

<ol>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
</ol>

 

list-style-type

목록의 글머리 기호 즉, 마커를 지정

다음의 4가지 값 중 하나로 지정할 수 있다.

• <custom-ident>
• symbols()
• <string>
• keyword none

 

아래는 다양한 목록의 스타일들 중 일부에 대한 예이다.

• disc: 속이 꽉찬 원
• circle: 속이 빈 원
• square: 속이 꽉찬 사각형
• decimal: 10진수
• decomal-leading-zero: 0과 함께 시작하는 10진수
• upper-roman, lower-roman: 로마 숫자
• '-': 문자열 '-'을 마커로 사용
• upper-alpha, lower-alpha: 알파벳
• hangul: 한글 가,나,다...
• hangul-consonant: 한글 자음 ㄱ,ㄴ,ㄷ...

<ol style="list-style-type: disc">
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
    </ol>
    <ol style="list-style-type: circle">
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
    </ol>
    <ol style="list-style-type: square">
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
    </ol>
    <ol style="list-style-type: decimal">
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
    </ol>
    <ol style="list-style-type: decimal-leading-zero">
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
    </ol>
    <ol style="list-style-type: upper-roman">
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
    </ol>
    <ol style="list-style-type: lower-roman">
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
    </ol>
    <ol style="list-style-type: '-'">
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
    </ol>
    <ol style="list-style-type: upper-alpha">
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
    </ol>

    <ol style="list-style-type: lower-alpha">
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
    </ol>
    <ol style="list-style-type: hangul">
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
    </ol>
    <ol style="list-style-type: hangul-consonant">
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
    </ol>

1. Lorem ipsum dolor
2. Lorem ipsum dolor
3. Lorem ipsum dolor
4. Lorem ipsum dolor

1. Lorem ipsum dolor
2. Lorem ipsum dolor
3. Lorem ipsum dolor
4. Lorem ipsum dolor

1. Lorem ipsum dolor
2. Lorem ipsum dolor
3. Lorem ipsum dolor
4. Lorem ipsum dolor

1. Lorem ipsum dolor
2. Lorem ipsum dolor
3. Lorem ipsum dolor
4. Lorem ipsum dolor

1. Lorem ipsum dolor
2. Lorem ipsum dolor
3. Lorem ipsum dolor
4. Lorem ipsum dolor

1. Lorem ipsum dolor
2. Lorem ipsum dolor
3. Lorem ipsum dolor
4. Lorem ipsum dolor

1. Lorem ipsum dolor
2. Lorem ipsum dolor
3. Lorem ipsum dolor
4. Lorem ipsum dolor

1. Lorem ipsum dolor
2. Lorem ipsum dolor
3. Lorem ipsum dolor
4. Lorem ipsum dolor

1. Lorem ipsum dolor
2. Lorem ipsum dolor
3. Lorem ipsum dolor
4. Lorem ipsum dolor

1. Lorem ipsum dolor
2. Lorem ipsum dolor
3. Lorem ipsum dolor
4. Lorem ipsum dolor

1. Lorem ipsum dolor
2. Lorem ipsum dolor
3. Lorem ipsum dolor
4. Lorem ipsum dolor

1. Lorem ipsum dolor
2. Lorem ipsum dolor
3. Lorem ipsum dolor
4. Lorem ipsum dolor

 

---

 

list-style-position

목록에서 마커의 상대 위치를 지정

• inside: 마커를 목록에 포함시켜 안에 배치
• outside: 마커를 목록 바깥에 배치

<style>
      #inside {
        list-style-position: inside;
        list-style-type: disc;
      }
      #outside {
        list-style-position: outside;
        list-style-type: disc;
      }
</style>
<ol id="inside">
  <li>Lorem ipsum dolor</li>
  <li>Lorem ipsum dolor</li>
  <li>Lorem ipsum dolor</li>
  <li>Lorem ipsum dolor</li>
</ol>
<ol id="outside">
  <li>Lorem ipsum dolor</li>
  <li>Lorem ipsum dolor</li>
  <li>Lorem ipsum dolor</li>
  <li>Lorem ipsum dolor</li>
</ol>

1. Lorem ipsum dolor
2. Lorem ipsum dolor
3. Lorem ipsum dolor
4. Lorem ipsum dolor

1. Lorem ipsum dolor
2. Lorem ipsum dolor
3. Lorem ipsum dolor
4. Lorem ipsum dolor

 

---

 

list-style-image

목록의 마커로 이미지를 사용하기 위해 이미지를 지정

• 이미지 url, 그레디언트 등 사용 가능

 

<style>
  #gradient {
    list-style-position: inside;
    list-style-image: radial-gradient(
      circle,
      rgba(238, 174, 202, 1) 0%,
      rgba(148, 187, 233, 1) 100%
    );
  }
</style>
<ol id="gradient">
  <li>Lorem ipsum dolor</li>
  <li>Lorem ipsum dolor</li>
  <li>Lorem ipsum dolor</li>
  <li>Lorem ipsum dolor</li>
</ol>

1. Lorem ipsum dolor
2. Lorem ipsum dolor
3. Lorem ipsum dolor
4. Lorem ipsum dolor

 

 

---

 

목록 순서 제어하기

• start: 목록에서 항목이 start 값부터 시작
• reversed: 목록에서 항목 순서가 역순

<style>
  .ol {
    list-style-type: decimal;
  }
</style>
<ol start="3" class="ol">
  <li>Lorem ipsum dolor</li>
  <li>Lorem ipsum dolor</li>
  <li>Lorem ipsum dolor</li>
  <li>Lorem ipsum dolor</li>
</ol>
<ol start="6" reversed class="ol">
  <li>Lorem ipsum dolor</li>
  <li>Lorem ipsum dolor</li>
  <li>Lorem ipsum dolor</li>
  <li>Lorem ipsum dolor</li>
</ol>

3. Lorem ipsum dolor
4. Lorem ipsum dolor
5. Lorem ipsum dolor
6. Lorem ipsum dolor

6. Lorem ipsum dolor
7. Lorem ipsum dolor
8. Lorem ipsum dolor
9. Lorem ipsum dolor

 

목록에서 특정 항목 순서 제어하기

개별 항목에 대해 value 값을 주어 순서를 지정할 수 있다. 다음 항목의 순서에 영향을 준다.

<style>
  .ol {
    list-style-type: decimal;
  }
</style>
<ol start="3" class="ol">
  <li>Lorem ipsum dolor</li>
  <li>Lorem ipsum dolor</li>
  <li value="7">Lorem ipsum dolor</li>
  <li>Lorem ipsum dolor</li>
</ol>

3. Lorem ipsum dolor
4. Lorem ipsum dolor
7. Lorem ipsum dolor
8. Lorem ipsum dolor