[CSS] 리스트 스타일 - 불릿, 숫자 변경 및 제거

hi-choi 2020. 12. 20. 23:41

※ 목차

1. 기본 리스트 불릿 변경 및 제거

2. 순서 리스트 숫자 변경 및 제거

1. 기본 리스트 불릿 변경 및 제거

기본 리스트의 불릿 모양은 list-style-type 속성의 값을 변경함으로써 바꿀 수 있습니다. 기본 리스트의 list-style-type의 속성 값은 다음과 같습니다.

값	설명
none	불릿 제거
disc	기본값, 채운 원 모양 (●)
circle	비어있는 원 모양 (○)
square	채운 사각형 모양 (■)

예시

아래 코드는 list-style-type의 값을 none으로 변경한 코드입니다.

html 코드

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h3>기본 리스트</h3>
    <ul>
        <li>첫번째 목차</li>
        <li>두번째 목차</li>
        <li>세번째 목차</li>
    </ul>
</body>

css 코드

li {
    list-style-type : none;
}

결과 화면

불릿이 제거된 것을 확인하실 수 있습니다.

2. 순서 리스트 숫자 변경 및 제거

순서 리스트의 숫자 유형은 list-style-type 속성의 값을 변경함으로써 바꿀 수 있습니다. 순서 리스트의 list-style-type의 속성 값은 다음과 같습니다.

값	설명
none	숫자 제거
decimal	기본 값. 십진수 (1,2,3,4,5 ...)
decimal-leading-zero	십진수 (01, 02, 03 ... 10, 11 ...)
lower-roman	소문자 로마 숫자 (i, ii, iii, iv ...)
upper-roman	대문자 로마 숫자 (I, II, III, IV ...)
lower-alpha	소문자 알파벳 (a, b, c ...)
lower-latin	소문자 알파벳 (a, b, c ...)
upper-alpha	대문자 알파벳 (A, B, C ...)
upper-latin	대문자 알파벳 (A, B, C ...)

예시

아래 코드는 list-style-type의 값을 upper-roman으로 변경한 코드입니다.

html 코드

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h3>순서 리스트</h3>
    <ol>
        <li>첫번째 목차</li>
        <li>두번째 목차</li>
        <li>세번째 목차</li>
    </ol>

</body>

css 코드

li {
    list-style-type : upper-roman;
}

결과 화면

숫자 유형이 대문자 로마자로 변경된 것을 확인하실 수 있습니다.