목록 마커의 모양, 위치와 사용자 정의 스타일을 적용합니다.
list-style-type은 숫자·원·사각형 등 마커를 정하고 ::marker로 색과 굵기를 꾸밀 수 있습니다. 목록 의미를 없애지 않도록 HTML의 ul/ol 구조는 유지합니다.
브라우저는 ol에 기본으로 40px 왼쪽 안쪽 여백을 주는데, .target이 이를 padding-left: 28px로 줄여 번호가 놓일 자리만 남깁니다. 번호는 항목 바깥에 놓이는 기본 위치라 바로 이 여백에 그려지고, li::marker 규칙이 1. 2. 3.을 초록색 800 굵기로 바꿉니다. li마다 준 7px padding은 세 단계가 촘촘히 붙지 않게 항목 사이를 띄웁니다.
::marker에는 color, font 계열 속성, content처럼 정해진 일부 속성만 적용되고 margin이나 background는 무시됩니다. 번호 뒤 간격이나 배경 모양까지 바꿔야 한다면 list-style을 끄고 ::before와 CSS 카운터로 번호를 직접 그리는 방법을 씁니다.
list-style:none을 쓸 때 구조와 들여쓰기까지 사라져 목록임을 알아보기 어려울 수 있습니다.
직접 바꿔보세요ol을 ul로 바꾸고 marker의 색과 크기를 수정하세요.