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;
}