[CSS] list-style-type 속성

https://jinnnkcoding.tistory.com/104

[HTML] 목록 태그(ul, ol, li 태그)

목록태그의 스타일을 변경하는 list-style-type 속성

 

CSS에서 사용할 수 있는 list-style 속성은 다음과 같음 .

 

1. list-style-type

2. list-style-image

3. list-style-position

 

list-style 속성

항목 모양의 종류, 위치, 항목에 넣을 이미지를 한꺼번에 지정할 수 있음

/*문법*/
list-style: list-style-type(항목 모양 종류) list-style-position(위치) list-style-image(이미지)

 

ul{
  list-style: disc outside none;
}

위 속성값은 모두 기본값(속성값이 생략될 경우, 기본값이 적용)

 

list-style-type, list-style-position, list-style-image 을 각각 지정할 수도 있음

 

list-style-type 속성

리스트 요소의 앞에 위치하는 숫자나 기호를 마커(marker)라고 하는데,

list-style-type 속성을 이용하면 리스트에 다양한 마커(marker)를 적용할 수 있음

 

▶ disc : 기본값, 검은 원

▶ none : 항목 표시가 되지 않음

▶ initial  : 기본값으로 초기화

▶ circle : 원

▶ square 사각형

▶ decimal : 숫자(1로 시작하는 십진수)

▶ lower-alpha  : 알파벳 소문자 (a, b, c, d, e,..)

▶ lower-roman : 로마자 소문자 (i, ii, iii, iv, v,..)

▶ upper-alpha : 알파벳 대문자 (A, B, C, D, E...)

▶ upper-roman :  로마자 대문자 (I, II, III, IV, V,...)

/*사용 예*/
<style>

    .circle { list-style-type: circle; }

    .square { list-style-type: square; }

    .upperAlpha { list-style-type: upper-alpha; }

    .lowerRoman { list-style-type: lower-roman; }

</style>

 

 

list-style-position 속성

list-style-position 속성을 이용하면 리스트 요소의 위치를 설정할 수 있음

list-style-position 속성의 기본 속성값은 outside

 

▶ outside 기본값으로, 왼쪽에 둠.

▶ inside 항목과 텍스트를 들여쓰기 함.

/*사용 예*/
<style>

    .outside { list-style-position: outside; }

    .inside { list-style-position: inside; }

</style>

 

list-style-image 속성

list-style-image 속성을 이용하면 마커(marker)로 자신만의 이미지를 사용할 수 있음

/*사용 예*/
<style>

    .imageMarker { list-style-image: url("/examples/images/img_list_marker.png"); }

</style>