CSS - 목록 스타일

프론트엔드/CSS

CSS - 목록 스타일

ksge7 2020. 8. 23. 22:08

HTML 문서 내에 목록을 만들 때 목록 앞에 오는 불릿을 CSS로 바꿔줄 수 있다.

'list-style-type'을 속성으로 주고 다양한 속성값을 줘서 불릿 모양을 바꿀 수 있다.

리스트 { list-style-type: 속성값; }

<body>

    <style>
        ul{ list-style-type: 속성값; }
        ol{ list-style-type: 속성값; }
</body>

<body>

    <style>
        ul{
            margin-left: 50px;
            font-size: 50px;
            list-style-type: decimal;
        }
        ol{
            margin-left: 50px;
            font-size: 50px;
            list-style-type: decimal-leading-zero;
        }
    </style>

    <ul>
        <li> 국어 </li>
        <li> 수학 </li>
        <li> 영어 </li>
    </ul>
    <ol>
        <li> 국어 </li>
        <li> 수학 </li>
        <li> 영어 </li>
    </ol>

</body>

속성 값을 다양하게 줘서 불릿을 바꿀 수 있다.

속성 값을 다음과 같다.

속성 값	설명	예시
decimal	1로 시작하는 십진수	1, 2, 3, 4, 5 ...... 10, 11
decimal-leading-zero	앞에 0이 붙는 십진수	01, 02, 03, 04, 05 ..... 09, 10, 11
lower-roman	소문자 로마 숫자	ⅰ, ⅱ, ⅲ ... ⅹ
upper-roman	대문자 로마 숫자	Ⅰ, Ⅱ, Ⅲ ..... Ⅸ, Ⅹ
lower-alpha, lower-latin	소문자 알파벳	a, b, c, d, e
upper-alpha, upper-latin	대문자 알파벳	A, B, C, D, E
armenian	아르메니아 숫자
georgian	조지 왕조 시대 숫자	an, ban, gan