CSS 목록 스타일(불릿 없애기등)

1.순서 없는 목록에서 불릿 모양 바꾸기

ul을 사용할 때 번호가 없이 그냥 나오는 부분에서 불릿 모양을 없애거나 다른 모양으로 교체할 수 있다.

먼저 <style>에 list-style-type: none을 해서 적용 할 경우 불릿을 아예 없앨 수 있다. 아니면 값 부분에

disc(채워진 원), circle(빈 원), square(채운 사각형)으로 모양을 변경 가능하다.

2.순서 있는 목록에서 숫자 바꾸기

이번에는 ol에서 사용되는 숫자를 바꿀 것이다. 디폴트 값으로 1,2,3.. 이 적용이 되지만 이것은 

01,02,03.. 혹은 (decimal-leading-zero)

소문자 로마숫자 혹은 (lower-roman)

대문자 로마숫자 혹은 (upper-roman)

소문자 알파벳 혹은 (lower-alpha, lower-latin)

대문자 알파벳 등으로 변경이 가능하다. (upper-alpha, upper-latin)

ex) list-style-type: lower-roman;

3.불릿 대신 이미지 넣기

1번에서 지정된 3가지의 이미지 말고 다양하게 사용하고 싶을 때 사용 가능하다.

list-style-type: url(이미지경로);

ex) ul { list-style-type: url('images/dot.png'); }

4. list-style-position - 목록에 들여 쓰는 효과 내기

불릿이나 번호는 실제 내용의 바깥쪽에 표시된다. 하지만 좀 더 안쪽으로 들여 써진 듯한 효과가 나타내려면 이 기능을 사용한다.

list-style-position: inside | outside

inside - 불릿이나 숫자를 안쪽으로 들여 쓴다.

outside - 기본 값이다. 불릿이나 숫자를 밖으로 내어 쓴다.

위에 두개를 한번에 쓸 수 있는데 방법은

->ul { list-style: lower-alpha, inside; } 이런식으로 같이 사용이 가능하다.