6. 목록 스타일

 

1. list-style-type
2. list-style-image
3. list-style-position
4. list-style

 

마커 모양 (list-style-type)

• disc: 채운 원  ex) ●
• circle: 빈 원  ex) ○
• square: 채운 사각형  ex) ■
• ' 원하는 모양 ': 직접 지정
• decimal: 1부터 시작하는 10진수
• decimal-leading-zero: 앞에 0이 붙은 10진수  ex) 01, 02, ...
• lower-roman: 로마 숫자 소문자  
• upper-roman: 로마 숫자 대문자
• lower-alpha(latin): 알파벳 소문자
• upper-alpha(latin): 알파벳 대문자
• none: 마커나 숫자를 없앤다

- 활용 코드

    <p>순서 없는 목록 앞의 마커 모양: dash</p>
    <ul style="list-style-type: '-'">
      <li>에스프레소</li>
      <li>아메리카노</li>
      <li>카페라떼</li>
    </ul>

    <p>순서 없는 목록 앞의 마커 모양: astar</p>
    <ul style="list-style-type: '*'">
      <li>에스프레소</li>
      <li>아메리카노</li>
      <li>카페라떼</li>
    </ul>

 

- 실행 결과

순서 없는 목록 앞의 마커 모양: dash

• 에스프레소
• 아메리카노
• 카페라떼

순서 없는 목록 앞의 마커 모양: astar

• 에스프레소
• 아메리카노
• 카페라떼

 

 

이미지 마커 (list-style-image)

• none: 이미지x
• url: 사용할 이미지의 url
• initial: 기본값으로 설정

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

 

 

마커 위치 (list-style-postion)

• inside: 문단 안쪽으로 들여쓰기
• outside: 기본값

- 활용 코드

<ul style=" list-style-position: inside;
  list-style-type: square;">List 1
  <li>List Item 1-1</li>
  <li>List Item 1-2</li>
  <li>List Item 1-3</li>
  <li>List Item 1-4</li>
</ul>

<ul style=" list-style-position: outside;
  list-style-type: circle;">List 2
  <li>List Item 2-1</li>
  <li>List Item 2-2</li>
  <li>List Item 2-3</li>
  <li>List Item 2-4</li>
</ul>

 

- 실행 결과

List 1
• List Item 1-1
• List Item 1-2
• List Item 1-3
• List Item 1-4

List 2
• List Item 2-1
• List Item 2-2
• List Item 2-3
• List Item 2-4

 

 

한꺼번에 표시 (list-style)

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

ul{list-style-type: none;}  ->  ul{list-style: none;}

ol{list-style-type: lower-alpha; 
list-style-position: inside;}
-> ol{list-style: lower-alpha inside;}