CSS 목록

CSS 목록 속성은 목록 항목 상표를 배치하거나 변경하거나 이미지를 목록 항목 상표로 사용할 수 있도록 합니다.

일정한 의미에서, 설명적인 텍스트가 아닌 모든 내용은 목록으로 간주될 수 있습니다. 인구 통계, 태양계, 가족 트리, 방문 메뉴, 심지어 모든 친구들도 목록이나 목록의 목록으로 표현될 수 있습니다.

목록이 이렇게 다양하기 때문에, 목록은 매우 중요합니다. 따라서, CSS에서 목록 스타일이 부족한 것은 큰 아쉬움입니다.

목록의 스타일을 영향을 미치는 가장 간단하고(그리고 가장 완벽하게) 지원하는 방법은 상표 유형을 변경하는 것입니다.

예를 들어, 무정렬 목록에서 목록 항목의 상표(marker)는 각 목록 항목 옆에 나타나는 원점입니다. 정렬된 목록에서, 상표는 알파벳, 숫자 또는 다른 계산 체계의 상표일 수 있습니다.

목록 항목의 상표 유형을 변경하려면 다음 속성을 사용할 수 있습니다： list-style-type：

ul {list-style-type : square}

위의 선언은 무정렬 목록의 목록 항목 상표를 사각형으로 설정합니다.

때로는 일반적인 상표는 충분하지 않습니다. 각 상표에 이미지를 사용하고 싶을 수도 있습니다. 이는 다음과 같이 사용할 수 있습니다： list-style-image 속성을 통해 할 수 있습니다：

ul li {list-style-image : url(xxx.gif)}

url() 값만 사용하면 이미지를 상표로 사용할 수 있습니다.

CSS2.1은 목록 항목 내부에还是在 내부에 나타나는 상표를 확정할 수 있습니다. 이는 다음과 같은 방법으로 사용됩니다： list-style-position 완료.

간단을 위해 위의 3개의 목록 스타일 속성을 하나의 편리한 속성으로 합칠 수 있습니다：list-style그렇게 하면 다음과 같습니다：

li {list-style : url(example.gif) square inside}

list-style 값은 어떤 순서로든 나열할 수 있으며, 이 값들은 모두 무시될 수 있습니다. 하나의 값이 제공되면, 나머지는 기본 값으로 채워집니다.

CSS 목록 예제：

속성	설명
list-style	단축 속성. 모든 리스트 속성을 하나의 선언에 설정하는 데 사용됩니다.
list-style-image	이미지를 리스트 항목 기호로 설정합니다.
list-style-position	리스트 내 항목 기호의 위치를 설정합니다.
list-style-type	리스트 항목 기호의 유형을 설정합니다.
marker-offset