목록 마커의 모양, 위치와 사용자 정의 스타일을 적용합니다.
list-style-type은 숫자·원·사각형 등 마커를 정하고 ::marker로 색과 굵기를 꾸밀 수 있습니다. 목록 의미를 없애지 않도록 HTML의 ul/ol 구조는 유지합니다.
이번 예제의 출발점은 li::marker { color: green; }입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 ol을 ul로 바꾸고 marker의 색과 크기를 수정하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
list-style:none을 쓸 때 구조와 들여쓰기까지 사라져 목록임을 알아보기 어려울 수 있습니다.
직접 바꿔보세요ol을 ul로 바꾸고 marker의 색과 크기를 수정하세요.