[ CSS ] list-style-type알아보기.

 

list-style은 css속성 중 하나로, HTML의 목록 요소(`<ul>`, `<ol>`, `<dl>`)등의 리스트에서 리스트 항목들의 마커(marker) 모양을 지정하는 CSS 속성으로, 텍스트 앞에 사용되는 숫자, 문자, 이미지 등의 마커 모양을 지정할 수 있다.

 

---

`list-style-type` 속성은 다양한 값을 가질 수 있으며, 일반적으로 다음과 같은 값들이 사용된다.

 

 

1. `none`

목록 항목에 마커를 표시하지 않는다. 즉, 번호나 불릿 기호가 나타나지 않는다.

 

 

 

 

 

 

2. `disc`

원형 불릿 기호를 사용한다. (default)

 

3. `circle`

빈 원 기호를 사용한다.

 

4. `square`

네모 상자 기호를 사용한다.

5. `decimal`

1부터 시작하여 숫자로 번호를 매긴다.

 

 

6. `decimal-leading-zero`

01부터 시작하여 2자리 숫자로 번호를 매긴다. (01, 02, ..., 10, 11, ...)

 

7. `lower-roman`

소문자 로마 숫자를 사용한다. (i, ii, iii, iv, ...)

 

 

8. `upper-roman`

대문자 로마 숫자를 사용한다. (I, II, III, IV, ...)

 

9. `lower-alpha`

소문자 알파벳을 사용한다. (a, b, c, d, ...)

 

10. `upper-alpha`

대문자 알파벳을 사용한다. (A, B, C, D, ...)

 

 

11. `lower-greek`

소문자 그리스 문자를 사용한다.

 

 

12. `upper-greek`

대문자 그리스 문자를 사용한다.

---

 

이 외에도 다양한 특수한 목록 스타일을 지정할 수 있다.

 

/* Partial list of types */
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: georgian;
list-style-type: trad-chinese-informal;
list-style-type: kannada;

/* <string> value */
list-style-type: "-";

/* Identifier matching an @counter-style rule */
list-style-type: custom-counter-style;

/* Keyword value */
list-style-type: none;

/* Global values */
list-style-type: inherit;
list-style-type: initial;
list-style-type: revert;
list-style-type: revert-layer;
list-style-type: unset;

 

 

 

 

---

 

🌸 출처 🌸

 

list-style-type - MDN