CSS 리스트 스타일링

CSS를 사용하여 리스트 마커를 스타일링하는 다양한 방법에 대해 소개합니다. list style이라고도 말하는 리스트 마커는 <ul> 태그와 <ol> 태그의 하위 <li> 태그를 식별하는 작은 표식으로, 일반적으로 원형 불릿(•)이 사용됩니다. CSS의 list-style-type 및 list-style-image 속성, ::marker 가상 요소, 그리고 ::before 가상 요소 등을 사용하여 세련되고 개성 있는 스타일을 적용 방법에 대해 알아봅니다.

다음의 목차로 알아봅니다.

  1. 리스트 마커를 스타일할 수 있는 관련 CSS 속성 정리
  2. list-style-type 속성 사용하기
  3. list-style-image 속성 사용하기
  4. ::marker 가상 요소 사용하기
  5. ::before 가상 요소 사용하기

리스트 마커를 스타일할 수 있는 관련 CSS 속성을 정리한 표입니다.

리스트 마커를 스타일할 수 있는 관련 CSS 속성을 정리한 표
CSS 속성 설명 예시 장·단점
list-style-type 브라우저에서 지원하는 리스트 마커 유형(타입)을 지정 list-style-type: disc;
(disc, circle, square 등 사용 가능)		 브라우저가 제공하는 미리 정의된 값들 중에서 쉽게 선택하여 목록 마커 스타일을 설정할 수 있고 일관성을 유지하기 쉬운 장점이 있지만, 제한된 디자인(컬러나 사이즈 등)과 다양성의 부족, 브라우저의 호환성 등의 단점이 있음
list-style-image 사용자 지정 이미지를 마커로 사용 list-style-image: url('circle.png');
(원하는 이미지로 마커를 대체할 수 있음)		 사용자 지정 이미지를 목록 마커로 사용할 수 있어서 다양한 디자인을 구현할 수 있어서 고유한 아이콘이나 그래픽, 회사 브랜드 등을 마커로 사용할 수 있는 장점이 있지만, 사용자 지정 이미지를 제작하고 관리해야 하므로, 이미지의 해상도 및 크기에 신경써하는 단점이 있음
::marker 리스트 아이템의 마커를 스타일링 li::marker {...}
(마커의 내용, 색상, 크기, 글꼴, 글 두께 등을 지정할 수 있음)		 list-style-type 속성은 마크의 유형만을 지정할 수 있는데 반해서 ::marker 가상 요소는 마커의 내용, 색상, 크기, 글꼴, 글 두께 등을 직접 지정할 수 있는 장점이 있으나, 애니메이션 효과 등과 같은 일부 스타일을 지정하는데 제약이 있는 단점이 있음
::before 리스트 아이템 앞에 사용자 지정 콘텐츠 추가 li::before {...}
(사용자 지정 콘텐츠를 목록 아이템 앞에 추가하여 마커 대용 가능)		 목록 아이템 앞에 사용자 지정 콘텐츠를 추가하므로 애니메이션 및 효과 등을 포함한 다양한 스타일과 디자인을 구현할 수 있는 장점이 있으나, list-style-type, list-style-image, ::marker는 마커의 위치가 자동으로 지정되는 것에 반하여 ::before는 사용자 지정 콘텐츠의 위치 선정 등이 까다로울 수 있음

다음은 리스트 마커와 관련된 HTML 태그입니다.

list-style-type 속성은 브라우저에서 지원하는 리스트 마커 유형(타입)을 지정합니다.

예를 들어, 리스트 마커 유형은

  • disc
  • circle
  • square
  • decimal
  • decimal-leading-zero
  • lower-roman
  • ...

등이 있습니다.

HTML 
<!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 속성이 적용된 모습

더 많은 list-style-type 속성은 MDN의 list-style-type을 참조하시기 바랍니다.

장점

브라우저가 제공하는 미리 정의된 값들 중에서 쉽게 선택하여 목록 마커 스타일을 설정할 수 있고 일관성을 유지하기가 쉽습니다.

  • 간편한 설정: 브라우저가 제공하는 미리 정의된 값들 중에서 쉽게 선택하여 목록 마커 스타일을 설정할 수 있습니다.
  • 일관성: 브라우저의 기본 스타일과 일관성을 유지할 수 있습니다. 사용자들이 이미 익숙한 목록 마커 스타일을 제공할 수 있어서 사용성이 개선될 수 있습니다.

단점

제한된 디자인(컬러나 사이즈 등)과 다양성의 부족, 브라우저의 호환성 등의 단점이 있습니다.

  • 제한된 디자인: 미리 정의된 값만을 사용하기 때문에, 특별한 디자인 요구사항을 충족시키기 어려울 수 있습니다.
  • 다양성 부족: 미리 정의된 스타일 외에는 제한된 다양성을 가지며, 독특한 디자인을 위해서는 다른 방법을 사용해야 할 수 있습니다.
  • 브라우저 호환성: 모든 브라우저가 모든 list-style-type 값을 완벽하게 지원하지는 않을 수 있습니다. 일부 브라우저에서는 일부 값의 표현이 다를 수 있습니다.

list-style-image 속성을 사용하여 사용자 지정 이미지를 마커로 사용할 수 있습니다.

HTML 
<!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 속성이 적용된 모습

장점

list-style-image 속성은 사용자 지정 이미지를 목록 마커로 사용할 수 있어서 다양한 디자인을 구현할 수 있어서 고유한 아이콘이나 그래픽, 회사 브랜드 등을 마커로 사용할 수 있는 장점이 있습니다.

  • 다양한 디자인: 사용자 지정 이미지를 목록 마커로 사용할 수 있어서 다양한 디자인을 구현할 수 있습니다.
  • 독특한 스타일: 고유한 아이콘이나 그래픽을 목록 마커로 사용하여 웹 페이지를 개성 있게 꾸밀 수 있습니다.
  • 브랜드 표현: 회사 브랜드 컬러나 로고를 마커로 사용하여 브랜드 아이덴티티를 강조할 수 있습니다.

단점

list-style-image 속성으로 사용하는 이미지는 크기를 지정할 수 없습니다. 그리고, 사용자 지정 이미지를 제작하고 관리해야 하므로, 이미지의 해상도 및 크기에 신경써하는 단점이 있습니다.

::marker 가상 요소을 사용하여 리스트 마커를 직접 스타일링할 수 있습니다.

CSS ::marker 가상 요소 선택자 사용 방법
HTML 
<!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 가상 요소가 적용된 모습

장점

::marker 가상 요소는 마커의 내용, 색상, 크기, 글꼴, 글 두께 등을 직접 지정할 수 있는 장점이 있습니다.

단점

애니메이션 효과 등과 같은 일부 스타일을 지정하는데 제약이 있는 단점이 있습니다.

브라우저 호환성

Safari 지원은 content와 color 및 font-size로 제한됩니다.

::marker 가상 요소의 브라우저 호환성
선택자
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
::marker 86 86 68 11.2

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

::before 가상 요소를 사용하여 목록 아이템 앞에 사용자 지정 내용을 추가하여 마커 역할을 할 수 있습니다.

CSS ::before 가상 요소 선택자 사용 방법
HTML 
<!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 가상 요소가 적용된 모습

장점

목록 아이템 앞에 사용자 지정 콘텐츠를 추가하므로 애니메이션 및 효과 등을 포함한 다양한 스타일과 디자인을 구현할 수 있는 장점이 있습니다.

단점

list-style-type, list-style-image, ::marker는 마커의 위치가 자동으로 지정되는 것에 반하여 ::before는 사용자 지정 콘텐츠의 위치 선정 등이 까다로울 수 있습니다.

브라우저 호환성

::before 가상 요소의 브라우저 호환성
선택자
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
::before 1 12 1.5 4

참고문헌

같이 보기