-
CSS - 목록 스타일프론트엔드/CSS 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
'프론트엔드 > CSS' 카테고리의 다른 글
CSS - 레이아웃 (0) 2020.08.24 CSS - 박스모델 (0) 2020.08.23 CSS - 텍스트 관련 (0) 2020.08.23 CSS의 적용 우선 순위 (0) 2020.08.23 선택자 (selector) (0) 2020.08.23