list-style 속성

 

🟢  list-style

목록(ul, ol, li)의 스타일을 꾸밀 때 자주 사용하는 속성.

 

🔹 list-style-type (마커의 모양)

목록 아이템 앞에 붙는 마커(불릿이나 숫자)의 종류를 지정.

ol { list-style-type: decimal; }

• <ol> (Ordered List) 순서가 있는 목록
  • decimal: 숫자. (1, 2, 3)
  • decimal-leading-zero: 0이 붙는 숫자. (01, 02, 03)
  • lower-alpha: 소문자 알파벳. (a, b, c)
  • upper-alpha: 대문자 알파벳. (A, B, C)
  • lower-roman: 소문자 로마자. (i, ii, iii)
  • upper-roman: 대문자 로마자. (I, II, III)

 

ul { list-style-type: disc; }

• <ul> (Unordered List) 순서가 없는 목록
  • disc: 기본 원형. (●) (기본값)
  • circle: 빈 원형. (○)
  • square: 사각형. (■)
  • none: 마커 제거.

 

🔹 list-style-image (이미지 마커)

기본 마커 대신 사용자가 준비한 이미지를 사용.

ul { list-style-image: url("bullet.png"); }

• 문법: url("") 함수를 이용해 이미지 경로를 지정.
• 이미지가 마커 역할을 한다.
  • 이미지 크기는 직접 제어가 어렵기 때문에, 보 통 ::marker 또는 background 로 대체. (또는 미리 작은 사이즈로 편집된 이미지 사용 추천)

 

🔹 list-style-position (마커의 위치)

마커가 텍스트 기준 어디에 위치할지 결정. 

ul { list-style-position: outside; }

• 첫 번째 항목 텍스트가 길어지면
  두 번째 줄은 이렇게 정렬됨

• outside: 텍스트 바깥쪽에 위치. (기본값)
  • 글자가 길어져 줄 바꿈이 되어도 마커의 위치는 고정되고 텍스트만 들여쓰기 되어 정렬이 깔끔하게 유지.

 

ul { list-style-position: inside; }

• 첫 번째 항목 텍스트가 길어지면
두 번째 줄이 이렇게 시작됨

• inside: 텍스트 안쪽으로 포함.
  • 줄 바꿈 시 마커 바로 아래까지 글자가 채워져 가독성이 약간 떨어짐. (마커도 텍스트 흐름에 포함)

 

🔹  list-style (축약형 속성)

세 가지 속성(type, position, image)을 한 줄로 작성.

ul { list-style: square inside; }

• 문법: list-style: type position image;
• 보통은 이미지까지 쓰기보다는 list-style: none;을 사용하여 기본 스타일을 제거한 뒤, 커스텀 디자인을 입힐 때 가장 많이 활용한다.

 

 

📍  POINT 📍 

✔️ 실무에서는 브라우저의 기본 스타일을 없애기 위해 list-style: none; 을 자주 사용한다. ✔️

✔️ 불릿 대신 세련된 아이콘을 넣고 싶다면 list-style-image 보다는

::marker, ::before (가상 요소) 를 활용하는 것이 위치 제어에 유리하다. ✔️

 

 

📋 리스트-스타일 주요 속성 요약표 📋

속성	설명	주요 값 예시
list-style-type	마커 모양 결정	disc, decimal, none
list-style-image	커스텀 이미지 마커	url('icon.png')
list-style-position	마커 배치 위치	inside, outside
list-style	위 속성들의 축약형	none, circle inside

 

---

 

🔗 list-style-type 코드 example 🔗 

https://jsfiddle.net/3J7wD/2/

Edit fiddle - JSFiddle - Code Playground