• 목록

CSS List 속성 정리

1. list-style-type (불릿/번호 모양)

• 설명: 목록 요소 앞의 기호나 번호 스타일을 지정합니다.

• 주요 값:

  • disc: 채운 원 모양입니다.

  • circle: 빈 원 모양입니다.

  • square: 채운 사각형 모양입니다.

  • decimal: 1부터 시작하는 10진수입니다.

  • decimal-leading-zero: 앞에 0이 붙는 10진수입니다. (01, 02...)

  • lower-roman: 로마 숫자 소문자입니다. (i, ii, iii...)

  • upper-roman: 로마 숫자 대문자입니다. (I, II, III...)

  • lower-alpha 또는 lower-latin: 알파벳 소문자입니다. (a, b, c...)

  • upper-alpha 또는 upper-latin: 알파벳 대문자입니다. (A, B, C...)

  • none: 불릿이나 숫자를 없앱니다.

2. list-style-image (불릿 이미지)

• 설명: 기호 대신 사용자 정의 이미지를 사용합니다.

• 작성법: list-style-image: url('image-path.png');

3. list-style-position (기호 위치)

• 설명: 목록 기호가 내용의 안쪽(inside) 혹은 바깥쪽(outside)에 위치할지 결정합니다.

• 기본값: outside

4. list-style (축약 속성)

• 설명: 위 속성들을 한꺼번에 정리가능

• 작성법: list-style: square inside url('icon.png');

• 목록