728x90
반응형
list-style 속성
① list-style-type
② list-style-image
③ list-style-position
CSS list-style 속성
| 속성 | 설명 |
| list-style | 모든 list-style 속성을 이용한 스타일을 한 줄에 설정할 수 있음 |
| list-style-type | 리스트 요소의 마커(marker)를 설정 |
| list-style-image | 리스트 요소의 마커로 사용할 이미지를 설정 |
| list-style-position | 리스트 요소의 위치를 설정 |
list-style-type
리스트 요소의 앞에 위치하는 숫자나 기호를 마커(marker)라고 함
list-style-type 속성을 이용하면 리스트에 다양한 마커(marker)를 적용할 수 있음
| none | 지정하지 않음 |
| disc | 검은 원형 |
| circle | 원형 |
| square | 사각형 |
| lower-roman | 소문자 로마자 |
| upper-roman | 대문자 로마자 |
| decimal | 1부터 시작하는 10진수 |
| lower-alpha | 소문자 알파벳 |
| upper-alpha | 대문자 알파벳 |
list-style-image
list-style-image 속성을 이용하면 마커(marker)로 자신만의 이미지를 사용할 수 있습
list-style-position
list-style-position 속성을 이용하면 리스트 요소의 위치를 설정할 수 있습니다.
list-style-position 속성의 기본 속성값은 outside로 설정되어 있습니다.
반응형
'프로그래밍 > CSS' 카테고리의 다른 글
| 06.24(display & 화면에서 요소 감추기) (0) | 2020.06.24 |
|---|---|
| 06.23(background) (0) | 2020.06.23 |
| 06.18(box model) (0) | 2020.06.18 |
| 06.17(text-align) (0) | 2020.06.17 |
| 06.16(text) (0) | 2020.06.16 |