공부

li 목록 꾸미기 list-style-type

믹스 커피 2021. 12. 18.
반응형



목록을 구분 짓고 꾸미는 방법에는 list-style-type과 list-style-image이 있어요.
list-style-image는 말 그대로 이미지를 이용해서 목록 앞에 나타내는 것이고,
list-style-type은 속성을 이용해서 나타내는 것이예요.
훨씬 예쁘게 꾸미는것이 목적이라면 list-style-image를 사용하는게 더 좋겠어요.

list-style-type은 여러가지 속성이 있어요. 두루두루 유용하게 쓰입니다.
문서를 쓰다보면 1, 2, 3... 또는 a, b, c...등으로 순서를 열거해야 할 일이 있는데, 그때 list-style-type을 사용해주시면 돼요.
번호부터 알파벳 소문자/대문자, 로마자 소문자/대문자 등 다양한 속성으로 li를 꾸밀 수 있어요.

<ul style="list-style-type:decimal;">
	<li>list-style-type</li>
	<li>으로</li>
	<li>목록 꾸미기</li>
</ul>


결과는 아래처럼 나와요.


list-style-type의 많은 속성 중에 자주 사용하는 것만 적어볼게요.

disc : 검은원
circle : 하얀원
square 사각형
decimal : 숫자
lower-alpha : 알파벳 소문자
lower-roman : 로마자 소문자
upper-alpha : 알파벳 대문자
upper-roman : 로마자 대문자
cjk-ideographic : 한자 숫자
반응형