[HTML5 & CSS3] 목록 스타일

▶ 목록 스타일

* list-style-type 속성 - 목록의 불릿과 번호 스타일 지정하기

순서 없는 목록의 경우, 목록 앞에 다양한 불릿을 넣을 수 있고 순서 목록에서는 번호 스타일을 지정할 수 있다.

불릿 없앨땐 none 값 입력.

불릿 모양 바꾸기도 가능.

기본형) list-style-type : none / 순서 없는 목록의 불릿 / 순서 목록의 번호

 

​

 

* list-style-image 속성 - 불릿 대신 이미지 넣기

기본형) list-style-image : 이미지 / none
<이미지> = url(이미지 파일 경로)

 

 

* list-style-position 속성 - 목록에 들여 쓰는 효과 내기

기본형) list-style-position :
inside(불릿이나 숫자를 안쪽으로 들여 쓴다) /
outside(기본 값으로 불릿이나 숫자를 밖으로 내어 쓴다)

 

​

* list-style 속성 - 목록 속성 한꺼번에 표시하기

ul {
	list-style: lower-alpha, inside;
}