CSS 목록 속성: 목록 스타일 유형 및 목록 스타일 위치

CSS 목록 속성: 목록 스타일 유형 및 목록 스타일 위치, 특정 코드 예제가 필요합니다.

프론트 엔드 개발에서는 정보를 표시하기 위해 목록을 사용해야 하는 경우가 많습니다. CSS는 목록 스타일을 아름답게 하고 사용자 정의하기 위한 몇 가지 속성을 제공합니다. 가장 일반적으로 사용되는 두 가지 속성은 list-style-type과 list-style-position입니다.

1. list-style-type 속성
   list-style-type 속성은 목록 항목에 대한 마크업 기호 유형을 정의하는 데 사용됩니다. 기본적으로 브라우저는 목록 순서에 따라 마크 기호(일반적으로 단색 점(디스크))를 자동으로 생성합니다. 그러나 list-style-type 속성을 통해 마크업 기호의 스타일을 변경할 수 있습니다.

다음은 일반적으로 사용되는 목록 스타일 유형 값과 그 효과입니다.

• disc: 단색 점
• circle: 속이 빈 점
• square: 단색 사각형
• none: 표시 기호 없음
• 십진수: 십진수(1, 2, 3, ...)
• decimal-leading-zero: 앞에 0이 있는 십진수(01, 02, 03, ...)
• lower-roman: 소문자 로마 숫자( i, ii, iii, ...)
• upper-roman: 대문자 로마 숫자(I, II, III, ...)
• lower-alpha: 소문자(a, b, c, ...)
• upper-alpha: 대문자(A, B, C, ...)

예를 들어 목록의 마커 기호를 단색 사각형으로 변경하려면 다음 코드를 사용할 수 있습니다.

ul {
  list-style-type: square;
}

2. list-style- position 속성
   list-style-position 속성은 목록 항목 표시 기호의 위치를 ​​정의하는 데 사용됩니다. 기본적으로 마커 기호는 목록 항목의 왼쪽에 배치됩니다. 목록 스타일 위치 속성을 사용하여 목록 항목 외부 또는 내부에 마커 기호를 배치할 수 있습니다.

다음은 list-style-position의 두 가지 값과 그 효과입니다.

• inside: 마크 기호가 목록 항목 내부에 위치
• outside: 마크 기호가 목록 항목 외부에 위치

예를 들어, 항목의 표시 기호를 외부에 배치하려는 경우 다음 코드를 사용할 수 있습니다.

ul {
  list-style-position: outside;
}

3. 종합 예
   다음은 목록 스타일 유형과 목록 스타일 유형을 결합한 예입니다. list-style-position, 사용자 정의 스타일로 정렬된 목록 표시:

ol {
  list-style-type: decimal;
  list-style-position: inside;
  padding-left: 20px;
}

ol li {
  padding-left: 10px;
  line-height: 1.5;
}

이 예에서 목록 표시 기호는 십진수이며 목록 항목 내부에 배치되며 특정 왼쪽 여백과 줄 높이가 목록 항목에 추가됩니다. 목록 항목.

요약
list-style-type 및 list-style-position 속성을 사용하면 목록 스타일을 사용자 정의하여 디자인 요구 사항에 더 부합하도록 만들 수 있습니다. 위의 예는 일반적인 사용법 중 일부일 뿐입니다. 실제로 이 두 속성에 대해 선택할 수 있는 다른 값도 있습니다. 이러한 속성을 유연하게 사용하면 더욱 다양한 목록 효과를 만들 수 있습니다.

위 내용은 CSS 목록 속성: 목록 스타일 유형 및 목록 스타일 위치의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!