CSS 목록은 번호 또는 글 머리 기호 집합에 도달하는 데 매우 유용합니다. 이 기사는 유형, 위치, 스타일을 제어하는 방법을 보여줍니다. CSS를 사용합니다. 여기서는 다음과 같은 포인터를 다룹니다.
그럼 시작하겠습니다.
CSS 목록
CSS 속성
목록을 제어하는 데 사용할 수있는 5 가지 CSS 속성이 있습니다.
- List-style-type : 마커의 모양이나 모양을 제어 할 수 있습니다.
- List-style-position : 두 번째 줄로 줄 바꿈하는 데 긴 점이 필요하거나 첫 번째 줄과 정렬되거나 마커로 시작해야 함을 지정합니다.
- List-style-image : 글 머리 기호 나 번호가 매겨진 포인트보다 마커의 이미지를 추가하거나 더 매력적으로 만들어야 함을 지정합니다.
- List-style : 앞의 속성에 대한 속기를 보여줍니다.
- Marker-offset : 목록에 입력 된 마커와 텍스트 사이의 거리를 지정합니다.
일반적으로 사용되는 목록은 다음과 같습니다 : 목록 스타일 유형 및 목록 스타일 위치. 아래에 설명되어 있습니다.
목록 스타일 유형 속성
목록 스타일 유형 속성에서는 순서가 지정되지 않은 목록 케이스에서 글 머리 기호 또는 마커의 모양과 스타일을 제어 할 수 있습니다. 정렬 된 목록의 경우 번호 매기기 문자입니다.
순서가 지정되지 않은 목록을 나타내는 아래 표 :
| 값 | 기술 |
| 없음 | NA |
| 디스크 | 원 안에 채워져 있습니다. (기본값) |
| 원 | 빈 원입니다. |
| 광장 | 사각형 안에 채워져 있습니다. |
정렬 된 목록을 나타내는 아래 표 :
| 값 | 기술 | 예 |
| 소수 | 숫자입니다 | 1,4,3 |
| 10 진수 선행 0 | 실제 숫자 앞에 0 | 01, 04, 03 |
| 낮은 알파 | 소문자 영숫자입니다. | a, b, c, d |
| 대문자 | 대문자 영숫자입니다. | A, B, C, D |
| 하 로마 | 소문자 로마 숫자입니다. | 나는, ii, iii, iv, v |
| 어퍼 로마 | 대문자 로마 숫자입니다. | I, II, III, IV, V |
| 낮은 그리스어 | 마커는 낮은 그리스어입니다 | 알파, 감마 |
| 낮은 라틴어 | 마커가 낮은 라틴어에 있습니다. | a, b, c, d |
| 라틴어 | 마커는 상위 라틴어에 있습니다. | A, B, C, D |
CSS 목록 : 샘플 프로그램
- 자바
- 파이썬
- 모난
- 자바
- 파이썬
- 모난
- 자바
- 파이썬
- 모난
- 자바
- 파이썬
- 모난
- 자바
- 파이썬
- 모난
산출
목록 스타일 위치 속성
목록 스타일 위치 속성에 대한 마커 값
목록 스타일 위치 속성에서 마커가 글 머리 기호를 포함하는 상자 내부 또는 외부에 나타나야 함을 보여줍니다. 다음 두 값 중 하나를 가질 수 있습니다.
| 값 | 기술 |
| 없음 | NA |
| 내부 | 이 경우 텍스트가 두 번째 줄에 들어가면 텍스트가 마커 아래로 줄 바꿈되며 목록에 골짜기가있는 경우 텍스트가 시작된 위치도 표시됩니다. |
| 외부 | 이 경우 텍스트가 두 번째 줄에 들어가면 텍스트가 첫 번째 줄의 시작 부분에 정렬됩니다. |
예:
- 수학
- 사회 과학
- 물리학
- 수학
- 사회 과학
- 물리학
- 수학
- 사회 과학
- 물리학
- 수학
- 사회 과학
- 물리학
산출
이것으로 CSS 목록에 대한이 기사의 끝으로 이동합니다.
Tableau의 컨텍스트 필터 란?
우리를 확인하십시오 강사 주도의 라이브 교육 및 실제 프로젝트 경험과 함께 제공됩니다. 이 교육을 통해 백엔드 및 프런트 엔드 웹 기술을 다루는 기술을 능숙하게 사용할 수 있습니다. 여기에는 웹 개발, jQuery, Angular, NodeJS, ExpressJS 및 MongoDB에 대한 교육이 포함됩니다.
질문이 있으십니까? 기사의 댓글 섹션에 언급 해 주시면 다시 연락 드리겠습니다.