css list 속성 이해

css의 list 속성은 html의 리스트 태그를 꾸밀 때 사용합니다.

html의 리스트 태그로는 순서가 없는 목록을 나타내는 <ul>태그와 순서가 있는 목록을 나타내는 <ol> 태그가 있죠. 

css의 list 속성을 사용하면 item marker라고 하는 리스트 아이템의 맨 앞에 나오는 모양을 변경하거나 이미지를 넣고 배경 색상을 변경하는게 가능합니다. 각각에 대해 살펴봅시다.

1. list-style-type : 이 속성은 리스트 아이템 마커의 타입을 지정할 때 사용합니다. 네모, 동그라미, 숫자, 알파벳 그런것들로 말이죠. 쓰는 법은 ul { list-style-type : circle }이런 식으로 쓰면 됩니다. 

2. list-style-image : 이 속성은 리스트 아이템 마커로 이미지를 지정할 때 사용합니다. 쓰는 법은 ul { list-style-image : url('my-circle.gif'); } 등으로 쓰고요.

3. list-style-position : 리스트 아이템 마커의 위치를 리스트 아이템의 바깥쪽에 할지 안쪽에 할지 정하는 속성입니다. 기본은 outside이구요. inside로 설정하면 마커와 글자가 좌측으로 세로 정렬됩니다. 사용법은 ul { list-style-position: outside; } 입니다.

4. list-style-type : 기본 속성을 삭제할 때 사용합니다. ul { list-style-type: none; } 으로 지정하면 리스트 아이템 마커가 사라집니다.

5. list-style : 여러개의 리스트 속성을 축약해서 한줄에 쓸 때 사용합니다. ul { list-style : circle inside url("my-circle.gif"); } 

6. 스타일 적용 범위 : ul, ol 태그에 css 속성을 준 경우 리스트 전체 스타일이 적용되고 li 태그에 적용하면 해당 아이템만 적용이 됩니다.