중첩된 목록 HTML. 번호가 매겨진 목록. 예: 그래픽 마커
목록은 콘텐츠 블록의 자동 번호 매기기에 적극적으로 사용됩니다. 그러나 중첩된 목록을 사용하는 경우 각 목록이 독립적이므로 1.1, 1.2, 1.3과 같은 하위 절의 번호를 얻는 것은 불가능합니다. 그러나 SHTML에서는 불가능한 것이 스타일에 할당될 수 있습니다.
먼저, 일반적인 중첩 목록을 만드는 방법을 살펴보겠습니다. 주요 컨테이너는 태그입니다.
- , 목록 요소는 태그로 구성됩니다.
- . 중첩 목록은 다음으로 시작합니다.
- 하지만 이 태그는 컨테이너 내부에 있어야 합니다.
- , 이것이 올바른 구문이 유지되는 방법입니다(예 1).
예시 1: 일반 중첩 목록
중첩 목록
- 제1항
- 하위 조항 1.1
- 하위 조항 1.2
- 하위 조항 1.3
- 포인트 2
- 하위 조항 2.1
- 하위 조항 2.2
이 예의 결과는 그림 1에 나와 있습니다. 1. 중첩된 목록의 번호 매기기는 매번 새로 시작됩니다.
쌀. 1. 중첩된 목록 보기
이제 목록에 내장된 번호 매기기를 제거하고 필요한 형식으로 새 목록을 만들어 보겠습니다. 이렇게 하려면 카운터 재설정, 카운터 증가 및 콘텐츠라는 세 가지 스타일 속성이 필요합니다.
counter-reset - 카운터 값을 저장할 변수를 설정합니다.
카운터 증가 - 지정된 숫자만큼 카운터 값을 늘리거나 줄입니다.
content - counter(variable) 인수를 사용할 때 카운터 값을 인쇄합니다. 의사 요소 이전 또는 이후와 함께 작동합니다.
첫 번째 수준 목록의 경우 카운터 변수 list1 을 호출하고 두 번째 수준 목록의 경우 list2 를 호출합니다. 그러면 목록에 대한 카운터의 시작은 다음과 같습니다.
OL( 카운터 재설정: list1; ) /* 첫 번째 수준 목록 */
OL OL(카운터 재설정: list2; ) /* 두 번째 수준 목록*/이 경우 콘텐츠 선택기는 중첩된 목록을 외부 목록에서 분리하는 데 도움이 됩니다. OL OL 구문은 태그에만 스타일을 적용한다는 의미입니다.
- , 그러나 다른 태그 안에 있는 경우에만 해당됩니다.
- 절
- 하위 조항
- 하위 조항
- 하위 조항
- 절
- 하위 조항
- 하위 조항
- .
다음은 번호 매기기 목록을 사용하는 HTML 문서의 예입니다. 그 중 디스플레이브라우저는 그림 1에 나와 있습니다. 2.3.
번호 매기기 목록의 예 지구에서 볼 수 있는 가장 밝은 별:
- 천랑성
- 카노푸스
- 아르크투루스
- 알파 센타우리
- 베가
- K 아펠라
- 리겔
- 프로키온
- 아케르나르
- 베타 센타우리
- 웨텔기우스
- 알데바란
- 미자르
- 극선
쌀. 2.Z.번호가 매겨진 목록
태그에서
- COMPACT, TYPE 및 START 매개변수를 지정할 수 있습니다.
- .
예시 항목:
- .
START 태그 매개변수
- 하나가 아닌 다른 것에서 목록 번호 매기기를 시작할 수 있습니다. START 매개변수의 값은 목록 번호 매기기 유형에 관계없이 항상 자연수여야 합니다. 예는 다음과 같습니다.
- 번호가 매겨진 목록의 경우 TYPE 및 VALUE 매개변수의 사용을 허용합니다. TYPE 매개변수는 태그와 동일한 값을 가질 수 있습니다.
- .
- .
메모
브라우저는 개별 목록 항목의 번호 매기기 유형을 다르게 해석합니다. Netscape 브라우저는 다음 재정의가 발생할 때까지 이 요소와 모든 후속 요소의 번호 지정 유형을 변경합니다. Internet Explorer는 이 요소에 대해서만 숫자 모양을 변경합니다.
VALUE 태그 매개변수의 값
- - 주어진 목록 요소의 수를 변경할 수 있습니다. 그러면 모든 후속 요소의 번호가 변경됩니다. 일반적인 응용 프로그램은 일부 요소가 누락된 목록입니다. 그러한 목록의 예가 위에 나와 있습니다(그림 2.3). 가장 밝은 별의 순서 목록을 제공하며, 58번째와 75번째 위치에는 위도에서 명확하게 볼 수 있는 별이 포함되어 있습니다(Mizar는 큰곰자리에서 가장 밝은 별이고 Polaris는 작은곰자리에서 가장 밝은 별입니다). .
다양한 유형의 번호 매기기를 사용하는 또 다른 원래 예를 들어 보겠습니다. 아래 HTML 코드에는 번호가 다른 세 개의 목록이 포함되어 있습니다. 쉽게 볼 수 있도록 각 목록은 별도의 테이블 셀에 배치됩니다. 세 목록은 모두 동일하며 번호 매기기 유형만 다릅니다. 표의 첫 번째 열에는 아라비아 숫자가 있고, 두 번째 열에는 로마 숫자가 있고, 세 번째 목록에는 라틴 문자가 있습니다. 목록 요소는 비어 있습니다(예: 태그 뒤).
- 데이터가 없습니다. 이러한 종류의 예는 아라비아 숫자와 로마 숫자로 숫자를 쓰는 것 사이의 대응표로 사용될 수 있습니다. 목록을 지원하는 모든 브라우저는 이러한 테이블(그림 2.4)의 생성기로 사용될 수 있으며, 주어진 HTML 코드를 입력하기만 하면 됩니다. 로마 숫자로 번호 매기기는 3999 값까지 올바르게 작동합니다. 오른쪽 열을 연구하면 로마 문자로 번호 매기기가 수행되는 방식을 이해할 수 있습니다. 한 글자로 된 번호 지정(A부터 Z까지)이 소진되면 처음 두 글자로 된 번호가 다음 번호(AA 등)로 사용됩니다.
목록에서 다양한 유형의 번호 매기기 사용
. . .
쌀. 2.4.다양한 유형의 HTML 목록 번호 매기기
HTML은 세 가지 유형의 목록을 지원하며 각 유형에는 고유한 목록 유형이 있습니다.
번호가 매겨진 목록
번호가 매겨진 목록에서 브라우저는 특정 값(보통 1)부터 시작하여 요소 번호를 순서대로 자동 삽입합니다. 이렇게 하면 나머지 숫자가 자동으로 다시 계산되므로 번호 매기기를 방해하지 않고 목록 항목을 삽입하고 삭제할 수 있습니다.
번호가 매겨진 목록은 블록 요소를 사용하여 생성됩니다.
꼬리표- 요소 1
- 요소 2
- 요소 3
번호가 매겨진 목록 항목에는 다음 예와 같이 여러 목록 항목이 포함되어야 합니다.
예: 번호가 매겨진 목록
- 직접 해보세요 "
단계별 지침
- 열쇠를 얻으세요
- 자물쇠에 열쇠를 꽂으세요
- 열쇠를 두 바퀴 돌리세요
- 자물쇠에서 열쇠를 꺼내세요
- 문을 열어라
단계별 지침
- 열쇠를 얻으세요
- 자물쇠에 열쇠를 꽂으세요
- 열쇠를 두 바퀴 돌리세요
- 자물쇠에서 열쇠를 꺼내세요
- 문을 열어라
때로는 기존 HTML 코드를 볼 때 다음과 같은 주장을 접하게 됩니다. 유형요소에
- A - 라틴 대문자(A, B, C...)
- a - 라틴 소문자(a, b, c...)
- I - 큰 로마 숫자(I, II, III...);
- i - 작은 로마 숫자(i, ii, iii...)
- 1 - 아라비아 숫자(1, 2, 3 . . . .)(기본적으로 사용됨)
- 다음과 같은 방법으로:
-
이 경우 목록의 일련 번호 지정이 중단되고 이 시점부터 번호 지정이 다시 시작됩니다(이 경우 7부터).
속성 사용 예 값꼬리표
이 예에서 "첫 번째 목록 항목"은 1번, "두 번째 목록 항목"은 7번, "세 번째 목록 항목"은 8번이 됩니다.
CSS로 번호 매기기 목록 서식 지정
목록 번호를 변경하려면 속성을 사용해야 합니다. 목록 스타일 유형 CSS 스타일 시트:
- . 브라우저는 각 목록 항목을 들여쓰고 자동으로 글머리 기호를 표시합니다.
- 첫 번째 포인트
- 두 번째 포인트
- 세 번째 포인트
- 텍스트만 배치할 필요는 없으며 스트리밍 콘텐츠의 모든 요소(링크, 단락, 이미지 등)를 배치하는 것이 허용됩니다.
- 중첩 목록이나 두 번째 수준 목록을 만드는 것이 허용됩니다. 목록을 중첩하려면 요소 내부에 새 목록을 설명하세요.
- 이미 존재하는 목록입니다. 하나의 글머리 기호 목록을 다른 글머리 기호 목록에 중첩하면 브라우저는 두 번째 수준 목록의 글머리 기호 스타일을 자동으로 변경합니다. 모든 목록은 다른 목록 내에 중첩될 수 있습니다. 다음 예에서는 번호 매기기 목록의 두 번째 항목 내에 중첩된 글머리 기호 목록의 구조를 보여줍니다.
- 직접 해보세요 "
- 월요일
- 메일을 보내다
- 편집자 방문
- 테마 선택
- 장식적인 디자인
- 최종 보고서
- 저녁 메시지 보기
- 화요일
- 일정 수정
- 이미지 보내기
- 수요일...
- 월요일
- 메일을 보내다
- 편집자 방문
- 테마 선택
- 장식적인 디자인
- 최종 보고서
- 저녁 메시지 보기
- 화요일
- 일정 수정
- 이미지 보내기
- 수요일...
- 직접 해보세요 "
- 커피
- 커피
- 커피
- 커피
- 커피
- 우유
- 커피
- 우유
- 커피
- 우유
- 커피
- 우유
- 직접 해보세요 "
- 황소자리
- 쌍둥이 자리
- 양자리
- 황소자리
- 쌍둥이 자리
- (영어 정의 용어 - 정의된 단어, 용어에서) 및
- (영어 정의 설명에서 - 정의되는 용어에 대한 설명)
- 첫 학기
- 첫 번째 용어에 대한 설명
- 두 번째 항
- 두 번째 용어에 대한 설명
- 직접 해보세요 "
- 월드 와이드 웹
- - 영어로부터 월드 와이드 웹(WWW)은 인터넷에 연결된 여러 컴퓨터에 있는 관련 문서에 대한 액세스를 제공하는 분산 시스템입니다.
- 인터넷
- — 정보를 전송하기 위해 단일 교환 프로토콜을 사용하는 네트워크 집합입니다.
- 웹사이트
- - 링크와 통일된 디자인으로 상호 연결된 개별 웹페이지 세트입니다.
- 아라비아 숫자(1, 2, 3, ...);
- 10보다 작은 숫자의 경우 앞에 0이 붙는 아라비아 숫자(01, 02, 03, ...,10)
- 라틴 대문자(A, B, C, ...);
- 소문자 라틴 문자(a, b, c, ...);
- 대문자 로마 숫자(I, II, III, ...);
- 소문자 로마 숫자(i, ii, iii, ...);
- 아르메니아 번호 매기기;
- 그루지야어 번호 매기기.
- . 값은 양의 정수입니다. 라틴 문자를 목록으로 사용하더라도 어떤 유형의 번호 매기기를 설정해도 상관 없습니다. start 속성과 value 속성이 동시에 목록에 적용되는 경우 후자가 우선 적용되며 예제 1과 같이 value 로 지정된 숫자부터 번호 매기기가 표시됩니다.
예 1: 목록 번호 매기기 변경
기울기 - 직장을 잘 관리해야 합니다.
- 광원이 작업자 옆이나 뒤에 위치하도록 실내 조명을 조정합니다.
- 의학적 합병증을 예방하려면 좌석이 부드러운 의자를 선택하는 것이 좋습니다.
이 예에서 목록의 첫 번째 요소는 start="4" 속성이 지정되었으므로 로마 숫자 IV로 시작하고 숫자 V가 오고 마지막 요소는 순서가 어긋나 숫자 X가 할당됩니다(그림 1).
쌀. 1. 목록의 로마 숫자
숫자 쓰기
기본적으로 번호 매기기 목록은 특정 모양을 갖습니다. 먼저 숫자가 있고 그 다음 점이 있고 그 다음에는 텍스트가 공백으로 구분되어 표시됩니다. 이러한 형태의 글쓰기는 시각적이고 편리하지만 일부 개발자는 목록 번호 매기기를 디자인하는 다른 방법을 선호합니다. 즉, 그림 1과 같이 점 대신 닫는 괄호가 있습니다. 2 또는 이와 유사한 것.
쌀. 2. 괄호가 있는 번호가 매겨진 목록 보기
스타일을 사용하면 내용 및 카운터 증가 속성을 사용하여 목록 번호 매기기 유형을 변경할 수 있습니다. 먼저, ol 선택기를 counter-reset : item 으로 설정해야 합니다. 이는 각각의 새 목록에서 번호 매기기가 새로 시작되도록 하기 위해 필요합니다. 그렇지 않으면 번호 매기기가 계속되고 1,2,3 대신 5,6,7이 표시됩니다. 항목 값은 우리가 직접 선택하는 카운터의 고유 식별자입니다. 다음으로, 값이 none 인 list-style-type 스타일 속성을 통해 원래 마커를 숨겨야 합니다.
콘텐츠 속성은 일반적으로 ::after 및 ::before 의사 요소와 함께 작동합니다. 따라서 li::before 구성은 목록의 각 요소 앞에 일부 내용을 추가해야 함을 나타냅니다(예제 2).
예 2. 나만의 번호 매기기 만들기
Li::before ( content: counter(item) ") "; /* 숫자에 괄호를 추가합니다. */ counter-increment: item; /* 카운터 이름 설정 */ )
값이 counter(item)인 콘텐츠 속성은 숫자를 표시합니다. 이 예에 표시된 것처럼 괄호를 추가하면 필요한 번호 매기기 유형을 얻을 수 있습니다. 목록 번호를 1씩 늘리려면 카운터 증가가 필요합니다. item 이라는 동일한 식별자가 전체적으로 사용됩니다. 최종 코드는 예제 3에 나와 있습니다.
예시 3: 목록 보기 변경
기울기 - 첫 번째
- 두번째
- 제삼
- 네번째
위의 방법을 사용하면 모든 유형의 번호 매기기 목록을 만들 수 있습니다. 예를 들어 숫자를 대괄호 안에 넣습니다. 이 경우 스타일에서 한 줄만 변경됩니다.
내용: "[" 카운터(항목) "] ";
러시아 문자로 목록
라틴 문자로 번호가 매겨진 목록이 있지만 목록에 러시아어 문자가 없습니다. 위의 기술을 사용하여 인위적으로 추가할 수 있습니다. 번호 매기기는 스타일을 통해 수행되므로 목록 자체는 원본으로 유지되고 선택한 클래스만 추가됩니다. 이를 키릴 문자라고 하겠습니다(예 4).
예제 4: 목록을 생성하는 코드
- 하나
- 둘
- 삼
문자 추가는 ::before 의사 요소와 콘텐츠 속성을 사용하여 수행됩니다. 각 줄에는 고유한 문자가 있어야 하므로 가상 클래스 :nth-child(1) 를 사용하고 문자 번호는 괄호 안에 적습니다. 당연히 첫 번째 문자는 A, 두 번째 문자는 B, 세 번째 문자는 C 등입니다. 이 전체 집합은 다음과 같이 li 선택기에 추가됩니다(예제 5).
예제 5: pseudo-class:nth-child 사용
키릴 문자 li:nth-child(1)::before ( content: "a)"; ) .cyrilic li:nth-child(2)::before ( 내용: "b)"; ) .cyrilic li:nth-child(3)::before ( 내용: "at)"; )
이 예에서는 각 문자 뒤에 괄호가 오고 모든 문자는 소문자입니다. 자신만의 목록 번호 매기기 유형을 정의할 수 있습니다. 예를 들어 대문자와 마침표, 1~2개의 괄호 또는 문자만 포함할 수 있습니다. 표준 번호 매기기와 달리 여기서는 원하는 대로 자유롭게 수행할 수 있습니다. 거의 모든 상황에 10개의 문자 목록이면 충분하지만, 이것이 갑자기 충분하지 않은 경우 최소한 러시아어 알파벳의 모든 문자를 포함하도록 목록을 확장하는 데 방해가 되는 것은 없습니다.
마지막으로 문자의 정렬과 위치를 조정하고 선택적으로 글꼴 크기, 색상 및 기타 매개변수를 지정합니다(예 6).
예 6. 러시아어 문자가 포함된 목록
목록 - 보르쉬
- 파이크 커틀릿
- 쿨레뱌카
- 사워 크림에 버섯
- 캐비어를 곁들인 팬케이크
- 크바스
이 예의 결과는 그림 1에 나와 있습니다. 삼.
- 2표 기준 5점 만점에 4.5점
웹사이트의 특정 정보를 목록 형식으로 표시해야 하는 경우가 많습니다.
리스트를 이용하면 다양한 정보를 정리, 체계화하여 방문자에게 편리한 형태로 제시할 수 있습니다.
HTML의 목록에는 글머리 기호 목록, 번호 매기기 목록, 정의 목록의 세 가지 종류가 있습니다. 순서대로 만드는 방법을 살펴보겠습니다.
글머리 기호 목록.
이 유형의 목록이 가장 자주 사용됩니다. HTML의 글머리 기호 목록은 태그를 사용하여 생성됩니다.
- . 이 경우 기본적으로 각 목록 항목 반대편에 마커가 추가되며 이는 원 형태의 마커입니다. 태그를 사용하면 목록 요소가 있는 컨테이너가 생성됩니다.
글머리 기호 목록 코드는 다음과 같습니다.
- 이 옵션은
- 이 옵션
- 이런 종류의 옵션
이 코드를 사용하여 HTML 페이지를 만들 수도 있습니다. 결과는 다음 목록이 됩니다.
보시다시피 각 목록 요소는 새 줄에 배치되며 왼쪽, 위쪽 및 아래쪽에 특정 들여쓰기가 생성됩니다. 각 목록 항목은 마커로 시작합니다. 마커는 채워진 원(기본적으로 사용됨), 원 또는 사각형일 수 있습니다. 태그에서
- 마커의 스타일을 설정하는 데 사용되는 type 속성이 있습니다. 이 속성의 의미는 다음과 같습니다.
- 디스크 - 원;
- 원 - 원;
- 정사각형 - 정사각형.
- 이 옵션은
- 이 옵션
- 이런 종류의 옵션
- 이 옵션은
- 이 옵션
- 이런 종류의 옵션
- . 이렇게 하면 다양한 글머리 기호가 포함된 목록을 만들 수 있습니다.
- 이 옵션은
- 이 옵션
- 이런 종류의 옵션
결과는 다음과 같습니다.
번호가 매겨진 목록.
HTML의 번호가 매겨진 목록은 각 항목에 일련 번호가 있는 목록이 태그를 사용하여 생성됩니다.
- 태그에 중첩되어 있습니다.
-
- 첫 번째 줄
- 두 번째 줄
- 세 번째 줄
목록은 다음과 같습니다.
기본적으로 번호는 아라비아 숫자로 지정됩니다. 하지만 태그는
- 라틴 문자에서는 대문자(type="A") 또는 소문자(type="a"), 대문자(type="I")에는 로마 숫자로 번호를 매길 수 있는 값을 사용하는 유형 속성이 있습니다. ) 및 하위 (type="i" ) 레지스터입니다.
- . 꼬리표
- 목록, 태그에 대한 컨테이너를 생성합니다.
- 용어와 태그를 설정합니다.
- 용어의 설명 또는 정의.
이 목록은 다음과 같이 작성됩니다.
- 1학기
- 정의 1
- 2학기
- 용어 2의 정의
- 3학기
- 정의 3
결과는 다음 목록이 됩니다.
보시다시피 이는 용어 및 정의 텍스트에 대한 적절한 들여쓰기를 생성합니다.
HTML의 중첩 또는 다중 레벨 목록.
때로는 특정 목록 유형의 한 요소 내에 다른 목록을 중첩해야 하는 경우가 있습니다. HTML을 사용하면 일부 목록을 다른 목록의 요소에 무제한으로 포함할 수 있습니다.
예를 들어 글머리 기호 목록 항목 내에 번호가 매겨진 목록을 중첩하는 코드는 다음과 같습니다.
- 이 옵션은
- 첫 번째 줄
- 두 번째 줄
- 세 번째 줄
- 이 옵션
- 첫 번째 줄
- 두 번째 줄
- 세 번째 줄
- 이런 종류의 옵션
- 첫 번째 줄
- 두 번째 줄
- 세 번째 줄
찾다
신청
인기 게시물
마지막 메모
다음은 어떤 경우에든 있을 수 있는 코드의 축약된 버전과 번호 매기기 유형입니다.
목록보기:
목록보기:
라틴 알파벳 소문자로 번호 매기기:
목록보기:
목록보기:
목록보기:
HTML의 정의 목록입니다.
특별한 유형의 목록은 정의 목록입니다. 각 목록 요소는 두 가지 요소, 즉 용어와 해당 의미를 나타내는 텍스트로 구성된다는 점에서 다릅니다. 이 목록은 태그를 사용하여 생성됩니다.
디스크 값이 기본값입니다.
원 마커를 사용하여 글머리 기호 목록을 만드는 예:
결과적으로 목록은 다음과 같은 형식을 취하게 됩니다.
사각형 마커를 사용하여 글머리 기호 목록 만들기:
목록은 다음과 같습니다.
type 속성은 단순한 태그 이상에 적용될 수 있습니다.
- , 태그에도 적용됩니다.
번호 매기기 목록 스타일
예 의미 설명 에이, 비, 씨 낮은 알파 소문자 에이, 비, 씨 상위 알파 대문자 나, ii, iii 하 로마인 소문자로 된 로마 숫자 나, II, III 상부 로마 대문자로 된 로마 숫자 예: CSS 속성 적용 목록 스타일 유형
글머리 기호 목록
글머리 기호 목록은 기본적으로 번호가 매겨진 목록과 유사하지만 항목에 순차적인 번호 매기기가 포함되어 있지 않습니다. 글머리 기호 목록은 블록 요소를 사용하여 생성됩니다.
꼬리표다음 예에서는 기본적으로 채워진 원 형태의 작은 마커가 각 목록 항목 앞에 추가되는 것을 볼 수 있습니다.
태그 내부
중첩 목록
모든 목록은 다른 목록 내에 중첩될 수 있습니다. 요소 내부예: 중첩 목록
글머리 기호 목록 서식 지정
목록 표시자의 모양을 변경하려면 속성을 사용하십시오. 목록 스타일 유형 CSS 스타일 시트:
다음 예에서는 글머리 기호 목록의 다양한 스타일을 보여줍니다.
예: 글머리 기호 목록 스타일
디스크:
원:
정사각형:
없음:
그래픽 마커.
HTML에서는 그래픽 마커를 사용하여 목록을 생성할 수 있습니다. 목록 마커가 표준 원 또는 사각형인 경우와 개발자가 페이지 디자인에 따라 마커를 직접 선택하는 경우는 완전히 다릅니다. 목록 항목을 아름답게 만들기 위해 작은 그림을 사용하는 경우가 많습니다.
일반 마커를 그래픽 마커로 바꾸려면 속성을 바꾸십시오. 목록 스타일 유형속성당 목록 스타일 이미지이미지의 URL을 표시합니다.예: 그래픽 마커
조디악 징후
조디악 징후
정의 목록(설명)
정의 목록은 예를 들어 개인 용어 사전을 만드는 데 매우 유용합니다. 각 정의 목록 항목은 용어와 정의라는 두 부분으로 구성됩니다.
전체 목록을 요소에 넣습니다.
정의 목록은 종종 과학, 기술 및 교육 출판물에서 용어집, 사전, 참고 도서 등을 편집하는 데 사용됩니다.설명 목록의 일반적인 구조는 다음과 같습니다.
다음 예에서는 정의 목록의 가능한 한 가지 용도를 보여줍니다.
예: 정의 목록
월드 와이드 웹 - 영어에서. 월드 와이드 웹(WWW)은 인터넷에 연결된 여러 컴퓨터에 있는 관련 문서에 대한 액세스를 제공하는 분산 시스템입니다. 인터넷은 정보를 전송하기 위해 단일 교환 프로토콜을 사용하는 네트워크 집합입니다. 웹사이트는 링크와 통일된 디자인으로 상호 연결된 개별 웹페이지의 집합입니다.
기본적으로 용어의 텍스트는 브라우저 창의 왼쪽 가장자리에 눌려져 있으며, 용어에 대한 설명은 아래에 위치하여 오른쪽으로 이동됩니다.
번호가 매겨진 목록은 일련 번호가 포함된 요소의 모음입니다. 넘버링 유형 및 유형은 요소 매개변수에 따라 다릅니다.
- , 목록을 만드는 데 사용됩니다. 다음 값은 번호 매기기 요소로 사용될 수 있습니다.
실용적인 관점에서 볼 때 글머리 기호 목록에 항목을 표시하는 원칙은 번호 매기기 목록과 유사한 방식으로 적용될 수 있습니다. 그러나 우리가 열거형을 다루고 있다는 점을 고려하면 더 자세히 논의할 몇 가지 기능이 있습니다.
목록 번호 매기기
어떤 숫자에서든 목록을 시작할 수 있습니다. 요소의 시작 속성이 이 목적으로 사용됩니다.
- 또는 요소의 값
여기에: 입력 – 기호 목록:
목록이 1이 아닌 숫자로 시작하도록 하려면 속성을 사용하여 이를 지정해야 합니다. 시작꼬리표
다음 예에서는 큰 로마 숫자와 시작 값 XLIX가 포함된 번호 매기기 목록을 보여줍니다.속성을 사용하여 번호 매기기를 시작할 수도 있습니다. 값, 요소에 추가됩니다.
예시 항목:
- .
- .
이 항목은 라틴 대문자 "E"로 시작하는 목록의 번호 매기기를 결정합니다. 다른 유형의 번호 매기기의 경우 START=5 항목은 각각 숫자 "5", 로마 숫자 "V" 등으로 번호 매기기를 설정합니다.
목록의 모든 요소에 대해 목록 번호 매기기 유형 및 번호 값을 변경할 수 있습니다. 꼬리표
- 번호가 매겨진 목록의 경우 TYPE 및 VALUE 매개변수의 사용을 허용합니다. TYPE 매개변수는 태그와 동일한 값을 가질 수 있습니다.
COMPACT 매개변수는 글머리 기호 목록과 동일한 의미를 갖습니다. TYPE 매개변수는 목록 번호 매기기 유형을 지정하는 데 사용됩니다. 다음 값을 사용할 수 있습니다.
TYPE = A - 라틴 대문자 형식으로 마커를 설정합니다.
TYPE = a - 라틴 소문자 형식으로 마커를 설정합니다.
TYPE = I - 큰 로마 숫자 형태로 마커를 설정합니다.
TYPE = i - 작은 로마 숫자 형태로 마커를 설정합니다.
TYPE = 1 - 아라비아 숫자 형식으로 마커를 설정합니다.
기본값은 항상 TYPE = 1입니다. 즉, 아라비아 숫자를 사용하여 번호를 매깁니다. 이는 중첩된 번호 목록에도 적용됩니다. 여기에서 글머리 기호 목록과 달리 브라우저는 기본적으로 목록 중첩 수준에 따라 번호 매기기를 다르게 만들지 않습니다. 목록 요소 번호 뒤에는 항상 추가 "점" 기호가 있다는 점에 유의하세요.
동일한 값을 가진 TYPE 매개변수를 사용하여 개별 목록 요소의 번호 매기기 스타일을 지정할 수 있습니다. 이를 위해 해당 값을 가진 TYPE 매개변수를 목록 요소 태그에 지정할 수 있습니다.
-
.
카운터 값은 카운터 증가 및 콘텐츠 스타일 속성이 추가된 OL LI:before 선택기를 통해 증가됩니다. 값이 list1인 counter-increment 속성은 이 카운터의 값을 1씩 증가시키고 content: counter(list1) "."은 목록 항목 앞에 카운터 값을 표시합니다. 이러한 속성은 쌍으로 작동하므로 동시에 활성화해야 합니다.
OL LI:이전 ( /* 첫 번째 수준 목록 */
카운터 증가: list1;
/* 값을 1., 2.로 출력합니다.*/
}
OL OL LI:이전 ( /* 두 번째 수준 목록 */
카운터 증가: list2; /* 카운터 값 증가 */
}중첩된 목록의 경우 콘텐츠 선택기(OL OL)를 다시 사용하고 동시에 카운터 list1 및 list2의 출력을 사용합니다. 이 경우 필요한 유형의 번호 매기기를 얻습니다.
최종 코드는 예제 2에 나와 있습니다.
예 2. 자동 번호 매기기가 포함된 중첩 목록
중첩 목록
이 예의 결과는 그림 1에 나와 있습니다. 2.
쌀. 2. Opera 브라우저의 목록 자동 번호 매기기 유형
논평
주어진 예제는 주어진 스타일 속성을 지원하지 않기 때문에 버전 7 이하의 Internet Explorer 브라우저에서는 작동하지 않습니다.
Internet Explorer 브라우저는 많은 흥미로운 스타일 속성을 지원하지 않으므로 특히 목록의 일반적인 번호 매기기는 그대로 두어야 합니다. 이렇게 하려면 list-style-type: none 을 제거하세요. 그러나 이는 예제가 올바르게 작동하는 다른 브라우저에도 영향을 미치므로 해킹을 사용해야 합니다. 이는 서로 다른 브라우저에 서로 다른 스타일 코드가 제공되는 기술을 의미합니다. 예를 들어 !important 태그를 사용할 수 있습니다. 스타일 속성 값에 !important를 추가하면 중요성이 높아집니다. !important 없이 동일한 속성을 재정의하면 브라우저에서 해당 속성이 무시됩니다. 그러나 Internet Explorer 버전 6 이하에서는 그렇지 않습니다.
리(
목록 스타일 유형: 없음 !중요; /* Opera, Safari, Firefox 브라우저에서 번호 매기기 제거 */
목록 스타일 유형: 십진수; /* IE6 이하 브라우저에서는 번호를 그대로 둡니다 */
}예제 2의 LI 선택기가 있는 문자열로 이러한 코드를 바꾸면 모든 브라우저에서 올바르게 작동하는 중첩 목록을 얻을 수 있습니다.
HTML로 구현된 또 다른 유형의 목록은 번호가 매겨진 목록입니다. 그렇지 않으면 이 유형의 HTML 목록을 순서가 지정된다고 합니다. 성은 해당 태그 이름의 공식적인 번역으로 자주 사용됩니다.
- , 이 유형의 목록이 HTML 문서(OL - 정렬된 목록, 정렬된 목록)로 구성되는 도움을 받습니다.
이 유형의 목록은 일반적으로 개별 요소의 순서가 지정된 시퀀스입니다. 글머리 기호 목록과의 차이점은 번호가 매겨진 목록에서는 각 요소 앞에 자동으로 일련 번호가 붙는다는 것입니다. 번호 매기기 유형은 브라우저에 따라 다르며 목록 태그의 매개변수로 설정할 수 있습니다. 그렇지 않으면 번호가 매겨진 목록의 구현은 글머리 기호 목록의 구현과 매우 유사합니다.
태그
- 그리고
번호가 매겨진 목록을 만들려면 목록의 모든 요소가 들어 있는 컨테이너 태그를 사용해야 합니다. 목록 열기 및 닫기 태그는 목록 앞뒤에 줄바꿈을 제공하여 목록과 문서의 주요 내용을 분리합니다.
글머리 기호 목록과 마찬가지로 번호 매기기 목록의 각 항목은 태그로 시작해야 합니다.
- 제1항
- , 이것이 올바른 구문이 유지되는 방법입니다(예 1).