CSS로 목록 꾸미기 (목록의 머리 기호)

목록의 머리 기호 변경(list-style-type)

HTML태그에서 번호가 없는 목록은 UL과 LI 태그를 번호가 있는 목록은 OL과 LI 태그로 적용했어요
스타일시트에서는 목록에 머리기호를 바꿀때에는 LI태그에 type속성을 사용합니다.

Inline Style Sheet : 항목의 번호를 한번에 관리

<UL style="옵션">
	<LI type="옵션"> 항목
	<LI type="옵션"> 항목
</UL>

Embedded Style Sheet

<STYLE>
<!-- 
	Selector {list-style-type:옵션}
-->
</STYLE>

list-style-type 속성 옵션

none : 지정안함
disc : 검은원형
circle : 원형
square : 사각형
lower-roman : 작은로마자
lower-alpha : 알파벳소문자
decimal : 1부터 시작하는 10진수
upper-roman : 큰로마자
upper-alpha : 알파벳대문자

list-style-image 속성을 이용해서 그림을 목록의 머리 기호로 할수 잇어요

Inline Style Sheet

<UL style="list-style-image:url">
	<LI type="옵션"> 항목
</UL>

Embedded Style Sheet

<STYLE>
<!-- 
	Selector {list-style-image:url}
-->
</STYLE>

list-style-position속성은 머리기호를 들여쓰기나 밖으로 내어쓰기를 지정해요

속성 옵션

inside : 들여쓰기
outside : 내어쓰기

<STYLE>
<!-- 
	Selector {list-style-image:url; list-style-position:옵션;}
-->
</STYLE>