List | Notion

📌 list-style-type

list-style-type은 목록 항목 요소의 마커(예: disc, circle 등)를 설정하는 속성입니다.

ul {
	list-style-type: disc;
}

ol {
	list-style-type: none;
}

📌 list-style-position

list-style-position은 목록 항목 마커와 텍스트 간의 위치를 설정할 수 있는 속성으로 기본값은 outside 입니다.

ul {
	list-style-position: inside;
}

ol {
	list-style-position: outline;
}

📌 list-style-image

list-style-image를 사용하여 목록 항목 마커로 사용할 이미지를 설정할 수 있으며 마커로 그래디언트 효과를 적용하는 것도 가능합니다.

ul {
	list-style-image: url("../images/new.png");
}

ol {
	list-style-image: linear-gradient(to left bottom, #foo, #0f0);
}

📌 list-style

list-style 속성은 list-style-type, list-style-image, list-style-position 속성 값을 한 번에 설정할 수 있는 단축 속성(Shorthand Porperty)입니다.

ul {
	list-style: circle inside;
}

ol {
	list-style: upper-roman url("../images/new.png") outside;
}