[CSS] 항목(리스트) 설정

list-style-type

list-style-type은 리스트의 마크를 지정한다.

none	마크 없음
disc	검정 동그라미(●)
circle	흰 동그라미(○)
square	검정 사각(■)
decimal	숫자
decimal-leading-zero	맨앞에 0를 붙인 숫자(01,02,...)
lower-roman	소문자 로마 숫자
upper-roma	대문자 로마 숫자
lower-latin, lower-alpha	소문자 알파벳
upper-latin, upper-alpha	대문자 알파벳
armenian	아르메니아 숫자
geogian	그루지아 숫자

많은 마크가 있다. 그 중에 쓰고 싶은 것을 쓰면 된다.

class로 먼저 만들어서 쓰거나 ul 안에 style태그를 넣어서 쓸수 있다.

 

하나는 class 로 해보았고, 하나는 style 태그를 넣어서 해보았다.

그러면 다음과 같이 나온다.

큰 차이는 없다. 다만, 자주 쓰는 항목 모양이 있다면 class 에서 미리 써놓는게 편하다.

---

 list-style-position

list-style-position 은 항목 마크의 위치를 지정한다.

 

outside 와 inside 의 차이만 알면 된다. 

outside 는 문단 바깥쪽에 마크를 놓고, inside 는 문단 안쪽에 마크를 놓는다.

나머지는 기존 설정을 따를건지 말건지만 설정하는 명령어다.

 

위에는 outside, 아래는 inside다.

list-style-position 에 아무것도 정하지 않으면 outside 가 지정된다.

---

list-style-image

마크를 이미지로 불러와서 정하고 싶을 때 list-style-image 를 사용하면 된다.

 

 

이러 모양을 마크로 쓰고 싶으면 list-style-image : url('경로지정')

으로 지정할 수 있다.