css list-style 단축 프로퍼티에 대하여 알아보기

css list-style 단축 프로퍼티에 대하여 알아보기

네 안녕하세요, 이번 포스팅에서는 리스트 관련 단축 프로퍼티에 대하여 알아보도록 하겠습니다.

우리가 항상 여러 가지 프로퍼티를 써보면 늘 단축 프로퍼티가 존재해 왔었습니다.

리스트 역시 단축 프로퍼티가 존재합니다.

그래서 오늘은 그러한 단축 프로퍼티를 알아보려 합니다.

그럼 지금부터 시작하도록 하겠습니다.

 

1. 리스트 단축 프로퍼티 - list-style

리스트 단축 프로퍼티는 말 그대로 제가 이전까지 포스팅했던 그 프로퍼티들을 한 번에 쓸 수 있도록

만들어둔 프로퍼티입니다.

그래서 우리가 불편하게 이것저것 여러 개를 붙여가며 쓸 필요가 없습니다.

사용 방법은 이렇습니다.

ul { list-style : list-style-type list-style-position list-style-image }

이렇게 마커의 종류, 마커의 위치, 이미지 마커 사용 여부 순서로 기입을 하시면 됩니다.

제가 한 가지 예를 들어보도록 하겠습니다.

제가 marker.png라는 이미지 파일을 어떤 리스트의 마커로 사용을 할 건데,

이 이미지 파일이 없을 경우에 원형의 마커를 표시하고,

마커를 안쪽에 기입하고자 한다면 이렇게 할 수 있습니다.

 

반응형

 

ul { list-style : circle inside url("media/marker.png") }

이런 식으로 프로퍼티 값 기입 순서만 지켜서 쓰시면 됩니다.

 

여기까지 리스트 단축 프로퍼티에 대하여 알아보았습니다.

다음 포스팅에서는 리스트로 메뉴를 직접 만들어보도록 하겠습니다.

긴 글 읽어주신 독자분들께 진심으로 감사합니다~