<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>list-style-type 속성 사용하기</title>
        <style>
            ul {
                list-style-type: square; /* 채워진 사각형 마커 */
            }

            ol {
                list-style-type: lower-roman; /* 소문자 로마 숫자 마커 */
            }
        </style>
    </head>
    <body>
        <ul>
            <li>ul의 li</li>
            <li>ul의 li</li>
            <li>ul의 li</li>
            <li>ul의 li</li>
        </ul>
        <ol>
            <li>ol의 li</li>
            <li>ol의 li</li>
            <li>ol의 li</li>
            <li>ol의 li</li>
        </ol>
    </body>
</html>
list-style-type 속성이 적용된 모습
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>list-style-image 속성 사용하기</title>
        <style>
            ul {
                list-style-image: url('heart.png'); /* 이미지 마커 */
            }
        </style>
    </head>
    <body>
        <ul>
            <li>ul의 li</li>
            <li>ul의 li</li>
            <li>ul의 li</li>
            <li>ul의 li</li>
        </ul>
    </body>
</html>
list-style-image 속성이 적용된 모습
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>list-style-image 속성 사용하기</title>
        <style>
            li::marker {
              content: "- "; /* 마커 내용 */
              color: red; /* 마커 색상 */
              font-size: 1em; /* 마커 크기 */
            }
        </style>
    </head>
    <body>
        <ul>
            <li>ul의 li</li>
            <li>ul의 li</li>
            <li>ul의 li</li>
            <li>ul의 li</li>
        </ul>
    </body>
</html>
::marker 가상 요소가 적용된 모습

caniuse.com에서 더 자세한 정보를 확인해 보세요.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>list-style-image 속성 사용하기</title>
        <style>
            li {
                list-style-type: none; /* ::before 가상요소로 마커역할을 할 경우 기존 마커를 없앱니다. */
            }
            li::before {
                content: "→"; /* 사용자 지정 마커 내용 */
                margin-right: 8px; /* 마커와 텍스트 간격 */
                display: inline-block;
                animation: before-bounce 1s infinite alternate; /* 애니메이션 적용 */
                
            }
            @keyframes before-bounce {
                0% {
                    transform: translateX(0);
                }
                100% {
                    transform: translateX(-10px);
                }
            }
        </style>
    </head>
    <body>
        <ul>
            <li>ul의 li</li>
            <li>ul의 li</li>
            <li>ul의 li</li>
            <li>ul의 li</li>
        </ul>
    </body>
</html>
::before 가상 요소가 적용된 모습