태그요소에 기본적인 스타일이 적용되어 있고, 이들을 핸들링하는 css 속성들이 있습니다.
그러나, 그 것들은 디자이너가 디자인한 것과 다르기 때문에 대체로 list-style-type:none을 해놓고 li의 ::before요소로 만들어 사용합니다.

기본 스타일 변경

공통

• list-style-type: li가 들여쓰기 되면서 왼쪽에 나타나는 기호를 꾸미는 방법입니다.
  circle | square | upper-alpha | korean-hangul-formal ...
• list-style-position: 왼쪽 기호 들여쓰기 여부. default 는 outside.
  outside | inside
• list-style-image: 왼쪽 기호를 이미지로 대체 url("star.svg")
• list-style: square url("star.svg") inside (속기shorthand 유형 작성법)

ol

start 시작 순서를 정합니다.
reversed 역순으로 셉니다.
value 속성으로 값을 바꿀 수 있습니다.

<ol start="3" reversed>
  <li value="5"></li>
</ol>

커스터마이징 스타일

flex를 활용하여 간단하게 커스터마이징 해봅시다.

.list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.list li {
  display: flex;
  word-break: break-all;
}
.list li::before {
  flex-shrink: 0;
  content: " ";
  display: inline-block;
  margin-top: 0.3em;
  margin-right: 1em;
  width: 0.5em;
  height: 0.5em;
  background: crimson;
}

이미지의 경우에는 background로 조절할 수도 있습니다.

.list2 li {
  padding-left: 2em;
  background-image: url(item.png);
  background-repeat: no-repeat;
  background-size: 0.8em;
  background-position: 0 0.1em;
  word-break: break-all;
}

예제 확인하기