[CSS] 목록 스타일

list-style-type : 불릿 모양과 번호 스타일 지정

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

• disc : 채운 원 모양 ( ● ) 
• circle : 빈 원 모양 ( ○ )
• square : 채운 사각형 모양 ( ■ )
• decimal : 1부터 시작하는 10진수 ( 1, 2, 3, ... )
• decimal-leading-zero : 앞에 0이붙는 10진수 ( 01, 02, 03, ... )
• 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 : 불릿이나 숫자 없애기

<style>
  .book1 {
    list-style-type: upper-alpha;
  }
</style>

 

 

list-style-image : 불릿 대신 이미지 사용

list-style-image: <url(이미지 파일 경로)> | none 

 

불릿을 원하는 이미지로 바꾸어 사용한다. 이 때 불릿에 들어갈 이미지는 불릿 크기만큼 작을수록 좋다.

속성값으로 none을 사용하면 이미지를 사용하지 않고 list-style-type 속성에서 지정한 형태로 표시한다.

 

<style>
  ul {
    list-style-image: url('images/dot.png');
  }
</style>

 

 

list-style-position : 목록 들여 쓰기

list-style-position: inside | outside

 

불릿이나 번호의 위치를 들여 쓰는 것으로

텍스트 문단 사이에 있는 목록을 더 쉽게 구분할 수 있다.

• inside : 불릿이나 번호를 기본 위치보다 안으로 들여 쓴다.
• outside : 기본값

<style>
  .inside {list-style-position: inside;}
</style>

 

 

list-style : 목록 속성을 한꺼번에 표시

list-style-type, list-style-image, list-style-position 속성을 한꺼번에 표시할 수 있다.

 

<style>
  .book1 {
    list-style: upper-alpha;
  }
  ul {
    list-style: url('images/dot.png');
  }
  .inside {list-style: inside;}
</style>