[CSS] list-style

목록 요소의 list-style 속성

list-style-type

목록의 머리 기호를 결정하는 속성

<li> 태그에 각각 스타일을 적용할 수도, <ul> 태그에 클래스명으로 스타일을 지정함으로써 <ul> 태그에 속한 모든 <li> 태그들의 머리 기호를 한번에 지정할 수도 있다.

예시 1

스타일 시트에 직접 지정

.css

list-style-type: none; /* 지정하지 않음 */
list-style-type: disc; /* 검은 원형 */
list-style-type: lower-roman; /* 소문자 로마자 */
list-style-type: decimal; /* 1부터 시작하는 10진수 */
list-style-type: upper-alpha; /* 대문자 알파벳 */
list-style-type: circle; /* 원형 */
list-style-type: square; /* 사각형 */
list-style-type: lower-alpha; /* 소문자 알파벳 */
list-style-type: upper-roman; /* 대문자 로마자 */

예시 2

클래스명으로 지정

.html

<ul class="disc">
  <li>list1</li>
  <li>list2</li>
  <li>list3</li>                   
</ul> 

<ul>
  <li class="lower-roman">list1</li>
  <li class="lower-roman">list2</li>
  <li class="lower-roman">list3</li>                   
</ul> 

list-style-image

목록의 머리 기호가 될 이미지를 지정하는 속성

예시

.css

.list-icon {     
  list-style-image: url(list_icon_16x16.png); /* 이미지의 상대경로를 url에 지정 */
}

.html

<ul class="list-icon">
  <li>list1</li>
  <li>list2</li>
  <li>list3</li>                   
</ul>

list-style-position

목록의 들여쓰기 방향을 지정하는 속성

예시

.css

list-style-type: inside; /* 머리 기호를 들여 씀 */
list-style-type: outside; /* 머리 기호를 내어 씀 */