CSS의 목록은 콘텐츠나 항목이 특정 방식으로 나열되는 방식을 결정합니다. 즉, 깔끔한 웹페이지를 만드는 데 도움이 되는 깔끔하게 또는 무작위로 정렬할 수 있습니다. 적응성이 뛰어나고 다루기가 간단하기 때문에 많은 양의 자료를 정리하는 데 사용할 수 있습니다. 목록의 기본 스타일은 경계선이 없습니다. 목록은 두 가지 범주로 나눌 수 있습니다.

순서가 지정되지 않은 목록:기본적으로 순서가 지정되지 않은 목록의 목록 요소는 작은 검은색 원인 글머리 기호로 표시됩니다.주문 목록:순서가 지정된 목록의 목록 요소는 숫자와 문자로 식별됩니다.

다음 CSS 목록 속성을 CSS 목록 제어에 사용할 수 있습니다.

목록 스타일 유형:이 속성은 디스크, 문자 또는 사용자 정의 카운터 스타일과 같은 목록 항목 표시자의 모양을 결정하는 데 사용됩니다.목록 스타일 이미지:목록 항목 마커 역할을 할 그림은 이 매개변수를 사용하여 지정할 수 있습니다.목록 스타일 위치:이는 마커 상자가 주 블록 상자에 대해 있어야 하는 위치를 설명합니다.목록 스타일:목록 스타일은 이 속성으로 구성됩니다.

이제 예제를 통해 이러한 특성에 대해 자세히 알아보겠습니다.

목록 스타일 유형 속성

기본 목록 유형의 마커는 사각형, 원형, 로마 숫자, 라틴 문자 등을 포함한 다양한 다른 유형으로 변경될 수 있습니다. 순서가 지정되지 않은 목록의 항목은 둥근 글머리 기호(•)로 표시되는 반면, 순서가 지정된 목록의 항목은 기본적으로 아라비아 숫자(1, 2, 3 등)를 사용하여 번호가 지정됩니다.

값을 없음으로 설정하면 표시나 글머리 기호가 제거됩니다.

통사론:

목록 스타일 유형:값;

시스템 소프트웨어

우리는 다음과 같이 값을 사용할 수 있습니다:

1. 원
2. 십진수(예: 1,2,3 등)
3. 소수점 앞자리 0, 예:01,02,03,04 등
4. 하 로마인
5. 상부 로마
6. 낮은 알파(예: a,b,c 등)
7. 상위 알파(예: A, B, C 등)
8. 정사각형

참고: 기본 패딩 및 여백도 목록에 포함됩니다. padding:0과 margin:0을 추가해야 합니다.

그리고
이를 제거하기 위한 태그입니다.

예

이 예는 여러 목록 스타일 유형과 값이 정사각형, 상위 알파 및 다수로 설정된 CSS 목록을 보여줍니다.

 Example for CSS Lists .num{ list-style-type:decimal; } .alpha{ list-style-type:upper-alpha; } .circle{ list-style-type:circle; } .square{ list-style-type:square; } .disc{ list-style-type:disc; } <h2> Ordered Lists </h2> <ol class="order"> <li>ONE</li> <li>TWO</li> </ol> <h2> Unordered lists </h2> <ul> <li>ONE</li> <li>TWO</li> </ul> 

산출