CSS 리스트 스타일 (list-style)

ul, ol 목록의 불릿 및 번호 스타일을 지정하는 속성입니다.

기본 문법

list-style: none;  /* 스타일 제거 */

list-style-type 값

값설명예시
none마커 없음
disc채워진 원 (기본값)●
circle빈 원○
square채워진 사각형■
decimal숫자1, 2, 3
decimal-leading-zero앞에 0 붙은 숫자01, 02, 03
lower-roman소문자 로마숫자i, ii, iii
upper-roman대문자 로마숫자I, II, III
lower-alpha소문자 알파벳a, b, c
upper-alpha대문자 알파벳A, B, C
korean-hangul-formal한글 숫자일, 이, 삼

사용 예시

/* 기본 스타일 제거 */
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 커스텀 불릿 */
ul.custom {
    list-style-type: square;
}

/* 위치 변경 */
ul.inside {
    list-style-position: inside;  /* 텍스트 안쪽에 마커 */
}

/* 이미지 마커 */
ul.image-bullet {
    list-style-image: url("bullet.png");
}

list-style 단축 속성

/* list-style: type position image */
ul {
    list-style: square inside none;
}

/* 순서 무관 */
ul {
    list-style: inside url("bullet.png");
}

커스텀 마커 (::marker)

/* 마커 색상 변경 */
li::marker {
    color: #007bff;
    font-size: 1.2em;
}

/* 이모지 마커 */
li::marker {
    content: "👉 ";
}

CSS로 완전 커스텀

ul.custom-list {
    list-style: none;
    padding-left: 20px;
}

ul.custom-list li::before {
    content: "✓";
    color: green;
    margin-right: 10px;
    font-weight: bold;
}

네비게이션 메뉴 스타일

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
    padding: 0;
}

nav ul li a {
    text-decoration: none;
}