List

list-style-type을 바꾸면 list item 마커를 변경할 수 있다.

추가로 list-style-image로 이미지를 삽입할 수도 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
ul.a {
  list-style-type: circle;
}

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

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}
ul {
  list-style-image: url("sqpurple.gif");
}

list-style-position

list-item 마커를 list-item 내부 또는 외부로 위치를 이동시킬 수 있다.

1
2
3
4
5
6
7
ul.a {
  list-style-position: outside;
}

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

기본 셋팅 제거하기

1
2
3
4
5
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}