[CSS] 기본 속성 - 리스트

CSS list-style 속성

1. list-style-type
2. list-style-image
3. list-style-position

 

 

1. list-style-type

- 리스트에 다양한 마커 적용 가능

마커(marker) : 리스트 요소 앞의 숫자 / 기호

.circle { list-style-type: circle; }
.square { list-style-type: square; }
.upperAlpha { list-style-type: upper-alpha; }
.lowerRoman { list-style-type: lower-roman; }

2. list-style-image

- 마커로 자신만의 이미지 사용 가능

.imageMarker { list-style-image: url("/examples/images/img_list_marker.png"); }

 

3. list-style-position

- 리스트 요소의 위치 설정 가능

- 기본 : outside

.outside { list-style-position: outside; }
.inside { list-style-position: inside; }

 

 

list-style 속성 한 번에 적용하기

ul { list-style: square inside url("/examples/images/img_list_marker.png"); }

 

 

리스트에 배경색 적용

ul { background: #D2691E; padding: 15px; }
ol { background: #6495ED; padding: 15px; }
ul li { background: #DEB887; margin: 5px; }
ol li { background: #00FFFF; margin-left: 15px; }

 

 

 

 

 

http://tcpschool.com/css/css_basic_lists

코딩교육 티씨피스쿨