CSS (5) LIST 스타일 지정

(1) 리스트 타입 지정하기

.circle { list-style-type: circle; }
.square { list-style-type: square; }
.upperAlpha { list-style-type: upper-alpha; }
.lowerRoman { list-style-type: lower-roman; }

 

리스트의 스타일의 종류를 지정할 수 있다.

단, UL(Unordered List)와 OL(Ordered List)는 서로 갖는 속성값이 다르므로 주의가 필요하다.

 

속성명	요소 종류	값	설명
list-style-type	ul	disc	작은 검은색 원
		circle	작은 흰색 원
		square	사각형
	ol	decimal	숫자(기본값)
		upper-alpha	영문 대문자
		lower-alpha	영문 소문자
		upper-roman	로마자 숫자 대문자
		lower-roman	로마자 숫자 소문자

 

---

 

(2) 이미지로 리스트 표기하기

.imgMark { list-style-image: url("img/img_list.png"); }

 

이미지로 리스트 스타일을 지정할 수 있다. 

 

속성명 : 값

list-style-image : url('주소값')

 

(3) 리스트 표기 위치 지정

.outs { list-style-position: outside; }
.ins{ list-style-position: inside; }

 

리스트 스타일의 위치를 지정할 수 있다. 

 

속성	값	설명
list-style-position	outside	문단 바깥에 위치 (기본값)
	inside	텍스트 들여쓰기를 하여 더 안으로 넣는다.

 

(4) list-style 한줄 작성

 

 ul { list-style: square inside url("img/img_list.png"); }

 

위 모든 속성을 한 줄로 작성하여 코드를 줄일 수 있다.

 

한줄 작성

요소 { list-style : 종류  위치  경로('주소명')  ;}