list

 

-list-style

:모든 리스트 속성을 하나로 정의한 축약 속성이다. 여기에는 list-style-type, list-style-position, list-style-image 가 포함 될 수 있으며 만약 { list-style:circle inside } 이 것처럼 세 개의 속성 중 하나가 빠진다면 생략 된 값은 기본 값으로 대체된다.

 

{ list-style:value; }

list-style-type : 리스트 목록의 블릿 타입을 지정

list-style-position : 리스트 목록의 위치를 지정

list-style-image : 리스트 목록의 블릿 이미지를 지정

inherit : 지정 요소의 리스트 목록 스타일을 부모(상위) 요소로부터 상속받음

 

사용 예)

ul li { list-style:decimal inside;}

 

 

-list-style-image

:리스트 목록 마커(블릿이라고도 한다)를 이미지로 지정한다. 블릿을 이미지로 사용할 때에는 항상 list-style-type 속성을 추가로 정의하도록 한다. 이것은 이미지 블릿이 어떤 이유에서 이용할 수 없을 경우 사용된다.

 

{ list-style-image:url('url'); }

url : 리스트 목록의 블릿으로 사용할 이미지의 url을 지정

none : 이미지 사용 안함

inherit : 지정 요소의 리스트 목록 이미지를 부모(상위) 요소로부터 상속받음

 

사용 예)

ul li { list-style-image:url('image/bul_circle.gif');}

 

 

-list-style-position

:리스트 목록에 마커(블릿)가 있다면 그것을 리스트 영역 안에 위치시킬지 밖에 위치시킬지를 지정한다.

 

{ list-style-position:value; }

inside : 마커(블릿)와 텍스트를 들여쓰기한다. 블릿은 리스트의 영역안에 포함된다.

outside : 마커(블릿)을 텍스트 영역 밖에 위치시킨다.

inherit : 지정 요소의 리스트 목록 위치를 부모(상위) 요소로부터 상속받음

 

사용 예)

ul li { list-style-position:inside; }

 

 

-list-style-type

: 리스트 목록 앞의 블릿 타입을 지정한다.

 

{ list-style-type:value; }

armenian : 아르메니아 문자의 넘버링(그리스 문자를 기초로 해서 만든 특수 문자 38자)

circle : 원 모양 블릿

cjk-ideographic : 표의 문자 블릿(중국 한자 넘버링)

decimal : 넘버링 블릿, ol 리스트의 기본값

decimal-leading-zero : 01,02,03 같이 한 자리수 넘버링일 때 0으로 시작하게 지정

disc : 색칠된(검정원) 원모양 블릿, ul 리스트의 기본값

georgian : Georgian alphabet 문자의 넘버링

hebrew : 히브리어 문자의 넘버링

hiragana : 히라가나(일본 문자)의 넘버링

hiragana-iroha : 히라가나-이로하(일본 문자)의 넘버링

katakana : 카타카나(일본 문자)의 넘버링

katakana-iroha : 카타카나-이로하(일본 문자)의 넘버링

lower-alpha : 영어 소문자 넘버링

lower-greek : 그리스어 소문자 넘버링

lower-latin :

lower-roman : 로마어 소문자 넘버링

none : 리스트 목록의 블릿 없음

square : 네모 모양의 블릿

upper-alpha : 영어 대문자 넘버링

upper-latin :

upper-roman : 로마어 대문자 넘버링

inherit : 지정 요소의 리스트 목록 타입을 부모(상위) 요소로부터 상속받음

 

사용 예)

ul li { list-style-type:circle; }

 

 

출처 : http://htmlcss.kr/css/list/