[CSS] 목록 관련 속성 :: list-style-type, list-style-image, list-style-position, list-style

---

목록 관련 속성

---

 

속성	속성값	설명
list-style-type	none, disc, circle, decimal, lower-alpha, ...	목록 마커의 형태를 도형, 숫자, 문자로 지정
list-style-image	none, url('이미지 경로')	목록 마커의 형태를 이미지로 지정
list-style-position	outside, inside	목록 마커의 위치를 지정
list-style	...	목록 관련 속성 일괄 지정

 

 

---

list-style-type

---

 

HTML 문서에서 목록은 <ul> 태그 혹은 <ol> 태그를 통해 만들 수 있다. 이때 목록 앞에 붙는 도형이나 문자를 목록 마커라고 하는데, CSS에서 list-style-type 속성을 통해 목록 마커의 형태를 지정할 수 있다. 순서가 없는 목록 즉 <ul> 태그의 경우 list-style-type 속성에 대하여 none, disc, circle, square를 속성값으로 가질 수 있다. 순서가 있는 목록 즉 <ol> 태그의 경우 list-style-type 속성에 대하여 decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-roman, upper-roman, lower-greek 등을 속성값으로 가질 수 있다.

 

속성	속성값	설명
list-style-type	none	목록 마커 삭제
list-style-type	disc	채워진 원형으로 목록 마커 지정 (ul default)
list-style-type	circle	빈 원형으로 목록 마커 지정
list-style-type	square	채워진 사각형으로 목록 마커 지정
list-style-type	decimal	숫자 1, 2, 3의 형태로 목록 마커 지정
list-style-type	decimal-leading-zero	숫자 01, 02, 03 형태로 목록 마커 지정
list-style-type	lower-alpha	영어 소문자 a, b, c 형태로 목록 마커 지정
list-style-type	upper-alpha	영어 대문자 A, B, C 형태로 목록 마커 지정
list-style-type	lower-roman	로마자 소문자 i, ii, iii 형태로 목록 마커 지정
list-style-type	upper-roman	로마자 대문자 I, II, III 형태로 목록 마커 지정
list-style-type	lower-greek	그리스문자 소문자 α, β 형태로 목록 마커 지정

 

ul{
	list-style-type: square;
}
ol{
	list-style-type: decimal-leading-zero;
}

 

 

---

list-style-image

---

 

list-style-image 속성을 통해 사용자가 원하는 이미지로 목록 마커를 만들 수도 있다. list-style-image 속성에 url('이미지 경로')를 속성값으로 지정할 경우, 해당 이미지가 목록 마커로 표현된다. 이때 기본 경로는 CSS 파일이 위치한 경로이다.

 

속성	속성값	설명
list-style-image	none
list-style-image	url('이미지 경로')	이미지 경로에 존재하는 이미지를 목록 마커로 지정

 

 

---

list-style-position

---

 

list-style-position 속성은 목록 마커의 위치를 지정한다. outside를 속성값으로 가질 때에는 텍스트 박스의 바깥쪽에 목록 마커를 위치시키고, inside를 속성값으로 가질 때에는 텍스트 박스의 안쪽에 목록 마커를 위치시킨다.

 

속성	속성값	설명
list-style-position	outside	텍스트 박스 바깥으로 목록 마커의 위치 설정
list-style-position	inside	텍스트 박스 안으로 목록 마커의 위치 설정

 

ul{
	list-style-position: outside;
}
ol{
	list-style-position: inside;
}

 

 

---

list-style

---

 

list-style 속성은 앞서 살펴보았던 여러 목록 관련 속성들을 일괄적으로 지정할 수 있도록 한다. 이때 list-style에 할당되는 속성값들의 순서는 상관이 없다.

 

ul{
	list-style: circle inside;
}