ul,li 표시자 정리 및 커스텀 하기

list-style

1. default

기본 모양은 동그란 점입니다.

• ONE
• TWO
• THREE

<div>
    <ul>
      <li>ONE</li>
      <li>TWO</li>
      <li>THREE</li>
    </ul>
</div>

2. armenian

armenian 언어인듯 하네요..

• ONE
• TWO
• THREE

<div>
    <ul style="list-style: armenian">
      <li>ONE</li>
      <li>TWO</li>
      <li>THREE</li>
    </ul>
</div>

3. circle

채우지 않은 원 모양입니다.

• ONE
• TWO
• THREE

<div>
    <ul style="list-style: circle">
      <li>ONE</li>
      <li>TWO</li>
      <li>THREE</li>
    </ul>
</div>

4. decimal

숫자로 표현해줍니다.

• ONE
• TWO
• THREE

<div>    
    <ul style="list-style: decimal">
      <li>ONE</li>
      <li>TWO</li>
      <li>THREE</li>
    </ul>
</div>

5. decimal-leading-zero

01처럼 0으로 시작하는 숫자로 보여줍니다.

• ONE
• TWO
• THREE

<div>
    <ul style="list-style: decimal-leading-zero">
      <li>ONE</li>
      <li>TWO</li>
      <li>THREE</li>
    </ul>
</div>

6. disc

검은색 원 모양입니다.

물론 default와 같습니다.

• ONE
• TWO
• THREE

<div>
    <ul style="list-style: disc">
      <li>ONE</li>
      <li>TWO</li>
      <li>THREE</li>
    </ul>
</div>

7. georgian

georgian 언어인듯 합니다.

• ONE
• TWO
• THREE

<div>
    <ul style="list-style: georgian">
      <li>ONE</li>
      <li>TWO</li>
      <li>THREE</li>
    </ul>
</div>

8. inside

옵션엔 있길래 적어봤는데 자세히 알아보진 않았지만

추가 작업을 하지 않으면 default로 나오네요.

• ONE
• TWO
• THREE

<div>
    <ul style="list-style: inside">
      <li>ONE</li>
      <li>TWO</li>
      <li>THREE</li>
    </ul>
</div>

9. lower-alpha

소문자 영어로 표현해줍니다.

• ONE
• TWO
• THREE

<div>
    <ul style="list-style: lower-alpha">
      <li>ONE</li>
      <li>TWO</li>
      <li>THREE</li>
    </ul>
</div>

10. lower-greek

소문자 알파 베타 세타 순으로 표현해줍니다.

• ONE
• TWO
• THREE

<div>
    <ul style="list-style: lower-greek">
      <li>ONE</li>
      <li>TWO</li>
      <li>THREE</li>
    </ul>
</div>

11. lower-latin

소문자 라틴어 입니다. (alpha와 무슨차이인지는 잘 모르겠네요)

• ONE
• TWO
• THREE

<div>
    <ul style="list-style: lower-latin">
      <li>ONE</li>
      <li>TWO</li>
      <li>THREE</li>
    </ul>
</div>

12. lower-roman

i, ii, iii순으로 증가되는 로마숫자인거 같습니다.

• ONE
• TWO
• THREE

<div>
    <ul style="list-style: lower-roman">
      <li>ONE</li>
      <li>TWO</li>
      <li>THREE</li>
    </ul>
</div>

13. none

앞에 붙은 표시자를 없애줍니다.

• ONE
• TWO
• THREE

<div>
    <ul style="list-style: none">
      <li>ONE</li>
      <li>TWO</li>
      <li>THREE</li>
    </ul>
</div>

14. outside

inside와 똑같이 추가 작업을 안해줘서 그런지

기본 default 모양으로 나오네요

• ONE
• TWO
• THREE

<div>
    <ul style="list-style: outside">
      <li>ONE</li>
      <li>TWO</li>
      <li>THREE</li>
    </ul>
</div>

15. square

사각형 모양으로 표현해줍니다.

• ONE
• TWO
• THREE

<div>
    <ul style="list-style: square">
      <li>ONE</li>
      <li>TWO</li>
      <li>THREE</li>
    </ul>
</div>

16. upper-alpha

대문자 알파벳으로 표현해줍니다.

• ONE
• TWO
• THREE

<div>
    <ul style="list-style: upper-alpha">
      <li>ONE</li>
      <li>TWO</li>
      <li>THREE</li>
    </ul>
</div>

17. upper-latin

대문자 라틴어로 표현해줍니다.

• ONE
• TWO
• THREE

<div>
    <ul style="list-style: upper-latin">
      <li>ONE</li>
      <li>TWO</li>
      <li>THREE</li>
    </ul>
</div>

18. upper-roman

대문자 로마 숫자로 표현해줍니다.

• ONE
• TWO
• THREE

<div>
    <ul style="list-style: upper-roman">
      <li>ONE</li>
      <li>TWO</li>
      <li>THREE</li>
    </ul>
</div>

 

 

Custom

간단하게 작성할 것이고, 저는 scss가 편해서 scss형태로 css를 작성하겠습니다.

(html로 결과물도 보여드리고 싶었으나.. html 블록 사용법을 제대로 모르네요..)

해당 방법은 꼭 ul li가 아니더라도 사용할 수 있습니다.

 

HTML

<div class="test-container">
  <ul class="test-wrap">
    <li class="test">ONE</li>
    <li class="test">TWO</li>
    <li class="test">THREE</li>
  </ul>
</div>

CSS

scss 사용

.test-container {
  .test-wrap {
    list-style: none;	// 스타일은 없애줍니다.
    .test::before {
      content: '* ';	// *모양을 앞에 생성합니다.
    }
  }
}

 

결과

* ONE
* TWO
* THREE