순서 없는 목록의 경우, 목록 앞에 다양한 불릿(bullet)을 넣을 수 있고 순서 목록에서는 번호 스타일을 지정할 수 있습니다. 이때 list-style-type 속성을 이용합니다.
list-style-type
list-style-type으로 목록 앞의 점 모양 또는 형식을 바꿀 수 있습니다.
기본형
list-style-type : none | disc | circle | square | lower-roman | upper-roman | decimal | decimal-leading-zero | lower-greek | lower-latin | upper-latin | lower-alpha | upper-alpha | armenian | georgian
- 모양은 아래의 예제를 참고하세요.
순서 없는 목록에서 불릿 모양 바꾸기
순서 없는 목록에 들어가는 불릿부터 살펴 보겠습니다. 순서 없는 목록은 기본적으로 채운 원 disc(●)을 불릿으로 사용합니다.
다음과 같이 list-type-style 속성으로 불릿을 여러 모양으로 바꿀 수 있습니다.
순서 없는 목록에서 불릿 없애기
위의 예제에서 알 수 있듯이 불릿을 없 앨수도 있습니다.
주로 내비게이션 메뉴를 만들 때 불릿이 화면에 보이지 않아야 깔끔하겠죠?
이럴 경우 list-style-type 속성 값을 다음과 같이 none 으로 지정해 항목 앞에 붙는 불릿을 없앨 수 있습니다.
ul {
list-style-type : none;
}
순서 목록에서 숫자 바꾸기
순서 목록에는 항목 앞에 항상 숫자가 붙습니다. list-style-type 속성을 이용하면 이 숫자의 스타일도 바꿀 수 있습니다.
기본값으로 사용되는 스타일은decimal(1,2,3..10) 속성으로 아라비아 숫자입니다. 아라비아 숫자 대신 다른 숫자를 붙이는 순서 목록을 만들려면 다음 값 중 원하는 것을 지정하면 됩니다.