HTML로 구현된 목록 유형 중 하나는 다음과 같습니다. 글머리 기호 목록. 그렇지 않으면 이 유형의 목록을 번호가 없거나 순서가 없다고 합니다. 성은 해당 태그 이름의 공식적인 번역으로 자주 사용됩니다.

, 이 유형의 목록이 HTML 문서(UL - 정렬되지 않은 목록, 정렬되지 않은 목록)로 구성되는 도움을 받습니다.

글머리 기호 목록에서는 목록 표시자라는 특수 문자를 사용하여 해당 요소를 강조 표시합니다(영어 용어 bullet의 공식 발음인 bullets라고도 함). 목록 표시의 모양은 브라우저에 의해 결정되며, 중첩 목록을 생성할 때 브라우저는 다양한 중첩 수준에서 표시의 모양을 자동으로 다양화합니다.

태그

그리고

글머리 기호 목록을 만들려면 목록의 모든 요소가 있는 컨테이너 태그를 사용해야 합니다. 열기 및 닫기 목록 태그는 목록 앞뒤에 줄바꿈을 제공하여 목록과 문서의 주요 내용을 분리하므로 여기서는 단락 태그를 사용할 필요가 없습니다.


.

각 목록 요소는 태그로 시작해야 합니다.

• (LI - 목록 항목, 목록 요소). 꼬리표
• 원칙적으로 존재가 금지되지는 않지만 해당 닫는 태그가 필요하지 않습니다. 브라우저는 일반적으로 문서를 표시할 때마다 시작됩니다. 새로운 요소새 줄에서 목록을 작성하세요.

  제공된 정보는 기본 글머리 기호 목록을 구성하는 데 충분합니다. 글머리 기호 목록을 사용하는 HTML 문서의 예를 들어 보겠습니다. 브라우저에 표시되는 내용은 그림 1에 나와 있습니다. 2.1.

  조디악 징후:

  • 양자리

  • 황소자리

  • 쌍둥이

  • 처녀 자리

  • 저울

  • 투석기

  • 궁수

  • 염소자리

  • 물병자리

  • 물고기

  쌀. 2.1.글머리 기호 목록의 브라우저 표시

  태그로 표시된 목록 요소 외에도

• , 다른 HTML 요소가 존재할 수 있습니다. 위의 예에서 이러한 요소 중 하나는 목록 항목은 아니지만 제목 역할을 하는 일반 텍스트입니다.

  메모

  HTML 언어에 관한 일부 교과서에서는 목록 제목을 설정하는 데 컨테이너 태그를 사용해야 한다고 나와 있습니다. (LH - 목록 헤더, 목록 헤더). 이 태그는 현재 일반 브라우저에서 인식되지 않으며 HTML 사양의 일부도 아닙니다. 따라서 오류가 발생하지는 않지만 사용이 의미가 없게 됩니다.

  태그에서

  COMPACT와 TYPE의 두 가지 매개변수를 지정할 수 있습니다.

  COMPACT 매개변수는 값 없이 작성되며 브라우저에 다음을 나타내는 데 사용됩니다. 이 목록컴팩트한 형태로 제시되어야 합니다. 예를 들어, 글꼴이나 목록 줄 사이의 거리 등이 줄어들 수 있습니다.

  메모

  현재 태그에 COMPACT 매개변수가 있습니다.

  주요 브라우저의 목록 표시에는 어떤 방식으로도 영향을 미치지 않습니다. 따라서 응용 프로그램 이 매개변수특히 HTML 4.0 사양에서는 사용을 권장하지 않기 때문에 의미가 없습니다.

  TYPE 매개변수는 디스크, 원, 사각형 값을 사용할 수 있습니다. 이 매개변수는 목록 글머리 기호를 강제로 표시하는 데 사용됩니다. 정확한 마커 유형은 사용 중인 브라우저에 따라 다릅니다. 일반적인 표시 옵션은 다음과 같습니다.

  TYPE = 디스크 - 마커는 채워진 원으로 표시됩니다. TYPE = 원 - 마커가 열린 원으로 표시됩니다. TYPE = 정사각형 - 마커가 채워진 정사각형으로 표시됩니다. 예시 항목:

  .

  기본값은 TYPE = 디스크입니다. 중첩된 글머리 기호 목록의 경우 기본값은 첫 번째 수준에서는 디스크, 두 번째 수준에서는 원, 세 번째 수준 이상에서는 사각형입니다. 이것이 바로 에서 수행되는 작업입니다. 최신 버전넷스케이프 브라우저 및 인터넷 익스플로러. 다른 브라우저에서는 마커가 다르게 표시될 수 있습니다. 예를 들어, HTML 사양 TYPE=사각형 값일 때 표시되는 마커 유형은 4.0이며, 채워지지 않은 정사각형(사각형 외곽선)이 표시됩니다.

  동일한 값을 가진 TYPE 매개변수를 사용하여 개별 목록 요소에 대한 마커 유형을 지정할 수 있습니다. 이를 위해 해당 값을 가진 TYPE 매개변수를 목록 요소 태그에 지정할 수 있습니다.

  • .

    예시 항목:

  • .

    메모

    브라우저는 개별 목록 항목의 글머리 기호 유형 사양을 다르게 해석합니다. Netscape 브라우저는 마커 모양의 다음 재정의가 나타날 때까지 이 마커의 모양과 모든 후속 항목의 모양을 변경합니다. 인터넷 브라우저 Explorer는 이 요소에 대해서만 마커의 모양을 변경합니다.

    그래픽 목록 마커

    매력적이고 잘 디자인된 HTML 문서를 만드는 데 널리 사용되는 목록 글머리 기호로 그래픽 이미지를 사용할 수 있습니다. 실제로 그런 기회가 직접적으로 제공되는 것은 아닙니다 HTML 언어, 그러나 다소 인위적으로 구현되었습니다. 이는 그렇게 하는 것이 권장되지 않거나 비난받을 수 없다는 의미는 아니지만, 여기서는 특별한 HTML 언어 구성이 사용되지 않는다는 의미입니다.

    아이디어를 이해하려면 HTML 페이지에 목록을 구현하는 메커니즘을 이해해야 합니다. 목록 태그는

    (실제로 아래에 설명된 다른 유형의 목록 태그와 마찬가지로) 단일 작업을 수행합니다. 이는 이 태그 뒤에 있는 모든 정보가 특정 양만큼 오른쪽으로 이동(들여쓰기)되어 표시되어야 한다고 브라우저에 지시합니다. 태그
    • , 개별 목록 요소를 가리키며 출력 제공 표준 마커요소를 나열합니다.

      그래픽 마커를 사용하여 목록을 작성해야 하는 경우 태그 없이도 할 수 있습니다.

    • . 목록의 각 요소 앞에 원하는 그래픽 이미지를 삽입하는 것으로 충분합니다. 해결해야 할 유일한 문제는 목록 요소를 서로 분리하는 것입니다. 이에 대해 단락 태그를 사용할 수 있습니다.

      아니면 강제로 줄 바꿈을 하세요.
      . 그래픽 마커를 사용하여 목록을 구현하는 예는 그림 1에 표시되어 있습니다. 2.2는 아래와 같습니다.

      한 번만 전송됩니다. 작은 이미지의 파일 크기도 매우 작습니다.

      메모

      그래픽 글머리 기호가 있는 목록을 만드는 방법은 8장에서 차례로 설명합니다.

      
      

      목록의 주요 용도:

      번호 매기기 - 엄격하게 정의된 순서에 따라 요소를 나열합니다.

      글머리 기호 - 요소를 무작위 순서로 나열합니다.

      다중 레벨 - 특정 요소의 정보를 지정합니다.

      정의 목록 - 사전 형식을 지정하는 데 사용됩니다.

      번호 매기기 목록 HTML 페이지

      태그는 번호가 매겨진 목록을 만드는 데 사용됩니다.

      1. 꼬리표

         꼬리표

         1. 기본적으로 목록 항목에는 1, 2, 3... 순서로 번호가 매겨집니다. TYPE 속성을 사용하면 번호 매기기 스타일을 변경할 수 있습니다.

            값 번호 매기기 TYPE A A, B, C.. a a, b, c.. I I, II, III.. i i, ii, iii.. 1 1. 2. 3..

            이미 추가했다면 기존 목록새로운 값이 있으면 브라우저는 자동으로 이를 다시 계산합니다.

            START VALUE 속성을 사용하면 목록의 번호 매기기 순서를 변경할 수 있습니다.

            START - 목록의 시작 번호를 지정하는 데 사용되며 1과 다릅니다.

            VALUE - 목록의 모든 요소에 임의의 숫자를 할당할 수 있습니다.

            예:

            글머리 기호 목록 HTML 페이지

            태그는 글머리 기호 목록을 만드는 데 사용됩니다.

            꼬리표

            전체 목록의 시작/끝이 표시됩니다.

            꼬리표

            • 개별 목록 요소의 시작/끝을 나타냅니다.

              기본적으로 목록 항목은 검은색 원으로 표시됩니다. TYPE 속성을 사용하여 표시 스타일을 변경할 수 있습니다.

              하나의 목록 내에서 목록 요소에 대해 서로 다른 표시를 사용할 수 있습니다.

              예:

              다단계 목록 HTML 페이지

              다단계 목록을 만들려면 글머리 기호 목록이나 번호 매기기 목록을 사용하거나 둘을 조합하여 사용할 수 있습니다. 다중 레벨 목록은 하나의 목록을 다른 목록의 본문 내에 중첩하여 생성됩니다. 주요 임무는 혼동하지 않는 것입니다. 이렇게 하려면 개별 목록에 대해 서로 다른 들여쓰기를 하는 것이 좋습니다.

              HTML 페이지 정의 목록

              정의 목록을 생성하는 데 세 가지 태그가 사용됩니다.

              - 목록의 시작/끝.

              - 특정 용어의 시작/끝.

              - 용어 설명 기사의 시작/끝.

              태그

              그리고

              교체할 필요는 없습니다. 저것들. 여러 용어를 하나의 정의에 "연결"할 수 있으며 그 반대의 경우도 마찬가지입니다.

              예:

              HTML 코드: 1학기 초록 1 ~ 용어 1 초록 2 - 용어 1

              브라우저 디스플레이: 1학기 초록1~1학기 초록2~1학기

              이 사이트에서는 특정 스타일이 일부 요소에 적용되므로 표에 표시되는 내용이 실제와 다소 다릅니다.

              HTML 목록관련 정보를 그룹화하는 데 사용됩니다. 목록에는 세 가지 유형이 있습니다.

              글머리 기호 목록 —

              - 목록의 각 요소
              • 마커로 표시하고,
                번호 매기기 목록 —
                - 목록의 각 요소
                1. 숫자로 표시
                   정의 목록- - 용어 쌍으로 구성됨
                   —
                   정의.

                   각 목록은 목록 요소 또는 용어 정의 쌍이 있는 컨테이너입니다. 목록 요소는 블록 요소처럼 동작하며 서로 아래에 쌓여 컨테이너 블록의 전체 너비를 차지합니다. 각 목록 항목에는 레이아웃에 참여하지 않는 추가 블록이 측면에 있습니다.

                   HTML 목록 만들기

                   1. 글머리 기호 목록

                   글머리 기호 목록순서가 없는 목록입니다 (영어 순서가 없는 목록에서). 페어링된 태그를 사용하여 생성됨

                   . 목록 요소의 표시자는 레이블(예: 채워진 원)입니다.

                   브라우저는 기본적으로 목록 블록에 다음 형식을 추가합니다.

                   각 목록 요소는 쌍을 이루는 태그를 사용하여 생성됩니다.

                2. (영어 목록 항목에서).
                사용 가능 .
                • 마이크로소프트
                • Google
                • 사과
                쌀. 1. 글머리 기호 목록

                2. 번호가 매겨진 목록

                번호가 매겨진 목록쌍을 이루는 태그를 사용하여 생성됩니다. 각 목록 항목은 요소를 사용하여 생성됩니다.

              • . 브라우저는 자동으로 요소에 순서대로 번호를 매깁니다. 이러한 목록에서 하나 이상의 요소를 삭제하면 나머지 숫자가 자동으로 다시 계산됩니다.

                목록 블록에는 기본 브라우저 스타일도 있습니다.

              • 선택한 목록 항목의 기본 번호를 변경할 수 있는 값 속성을 사용할 수 있습니다. 예를 들어, 목록의 첫 번째 항목에 대해 설정한 경우
              • 을 선택하면 남은 번호 매기기가 새 값을 기준으로 다시 계산됩니다.

                태그의 경우

                다음 속성을 사용할 수 있습니다.
                표 1. 태그 속성

                기인하다	설명, 허용되는 값
                반전	reversed 속성을 사용하면 목록이 역순으로 표시됩니다(예: 9, 8, 7...).
                시작	시작 속성은 번호 매기기가 시작되는 초기 값을 지정합니다(예: 구성) 첫 번째 항목에는 일련번호 "10"이 할당됩니다. 번호 매기기 유형도 동시에 지정할 수 있습니다. 예를 들면 다음과 같습니다. .
                유형	type 속성은 목록에 사용할 마커 유형(문자 또는 숫자)을 지정합니다. 허용되는 값: 1 - 기본값, 10진수 매기기. A — 알파벳순으로 목록 번호 매기기, 대문자(A, B, C, D). a — 알파벳 순서, 소문자(a, b, c, d)로 번호를 매깁니다. I - 로마 대문자 숫자(I, II, III, IV)로 번호를 매깁니다. i — 로마 소문자 숫자로 번호 매기기(i, ii, iii, iv).

                1. 마이크로소프트
                2. Google
                3. 사과
                쌀. 2. 번호가 매겨진 목록

                3. 정의 목록

                정의 목록태그를 사용하여 생성됩니다.

                . 용어를 추가하려면 태그를 사용하세요.
                , 정의 삽입 - 태그
                .

                정의 목록 블록에는 다음과 같은 기본 브라우저 스타일이 있습니다.

                태그의 경우

                ,

                그리고

                사용 가능 .

                감독:

                피터 토칠린

                깁스:

                안드레이 가이둘리안

                알렉세이 가브릴로프

                비탈리 고군스키

                마리야 코제브니코바

                쌀. 3. 정의 목록

                4. 중첩 목록

                종종 간단한 목록의 기능만으로는 충분하지 않습니다. 예를 들어 목차를 만들 때 없이는 할 수 있는 방법이 없습니다. 중첩된 항목. 중첩 목록의 마크업은 다음과 같습니다.

                • 단락 1.
                • 포인트 2.
                  • 하위 조항 2.1.
                  • 하위 조항 2.2.
                    • 하위 조항 2.2.1.
                    • 하위 조항 2.2.2.
                  • 하위 조항 2.3.
                • 포인트 3.

                
                쌀. 4. 중첩 목록

                5. 다단계 번호 목록

                다중 수준 목록은 여러 들여쓰기를 사용하여 여러 수준에서 목록 항목을 표시하는 데 사용됩니다. 다단계 번호 목록의 마크업은 다음과 같습니다.

                1. 절
                2. 절
                   1. 절
                   2. 절
                   3. 절
                      1. 절
                      2. 절
                      3. 절
                   4. 절
                3. 절
                4. 절

                이 기본 마크업은 중첩된 각 목록에 대해 1부터 시작하여 새로운 번호 매기기를 생성합니다. 중첩된 번호 매기기를 생성하려면 다음 속성을 사용해야 합니다.
                counter-reset은 하나 이상의 카운터를 재설정하여 재설정할 값을 지정합니다.
                counter-increment는 카운터 증가 값을 지정합니다. 즉, 각 후속 항목에 번호가 매겨지는 증분 단위;
                콘텐츠 — 생성된 콘텐츠, 이 경우각 목록 항목 앞에 번호를 표시하는 역할을 담당합니다.

                Ol ( /* 표준 번호 매기기 제거 */ list-style: none; /* 카운터를 식별하고 이름을 li로 지정합니다. 카운터 값은 지정되지 않습니다. 기본적으로 0입니다. */ counter-reset: li; ) li :before ( /* 번호가 매겨질 요소를 정의합니다 - li. before 의사 요소는 content 속성을 사용하여 삽입된 콘텐츠가 목록 항목 앞에 배치된다는 것을 나타냅니다. 여기서는 카운터 증분 값도 설정합니다(기본값) 1) */ counter-increment: li; / * content 속성은 목록 항목의 번호를 표시합니다. counters()는 생성된 텍스트가 해당 이름을 가진 모든 카운터의 값을 나타냄을 의미합니다. 따옴표 안의 마침표 숫자 사이에 구분 마침표를 추가하고 각 목록 항목의 내용 앞에 공백이 있는 마침표를 추가합니다. */ content: counters(li,".") "."; )
                쌀. 5. 다단계 번호 목록

              HTML은 세 가지 목록을 지원합니다. 다른 유형, 각각 고유한 매개변수가 있습니다.

              • – 각 요소에 일련 번호(문자)가 있는 번호가 매겨진(숫자 또는 문자 사용) 목록
                1. – 각 요소 옆에 표시가 있는 글머리 기호(번호가 매겨지지 않음) 목록(일련 번호를 나타내는 숫자 또는 알파벳 문자 대신)

                   • – 정의 목록은 용어와 정의를 포함하는 이름/값 쌍으로 구성됩니다.

                   번호가 매겨진 목록

                   번호가 매겨진 목록에서 브라우저는 특정 값(보통 1)부터 시작하여 요소 번호를 순서대로 자동 삽입합니다. 이렇게 하면 나머지 숫자가 자동으로 다시 계산되므로 번호 매기기를 방해하지 않고 목록 항목을 삽입하고 삭제할 수 있습니다.
                   번호가 매겨진 목록은 블록 요소를 사용하여 생성됩니다.

                   (영어 순서 목록 - 번호 매기기 목록에서) 컨테이너 옆
                   각 목록 항목에 대해 요소가 배치됩니다.
                   1. (영어 목록 항목 - 목록 항목에서). 기본값은 아라비아 숫자가 포함된 번호가 매겨진 목록입니다.
                      꼬리표
                      다음과 같은 구문이 있습니다.
                      1. 요소 1
                      2. 요소 2
                      3. 요소 3

                      번호가 매겨진 목록 항목에는 다음 예와 같이 여러 목록 항목이 포함되어야 합니다.

                      예: 번호가 매겨진 목록

                      • 직접 해보세요 "

                      단계별 지침

                      1. 열쇠를 얻으세요
                      2. 자물쇠에 열쇠를 꽂으세요
                      3. 열쇠를 두 바퀴 돌리세요
                      4. 자물쇠에서 열쇠를 꺼내세요
                      5. 문을 열어라

                      단계별 지침

                      1. 열쇠를 얻으세요
                      2. 자물쇠에 열쇠를 꽂으세요
                      3. 열쇠를 두 바퀴 돌리세요
                      4. 자물쇠에서 열쇠를 꺼내세요
                      5. 문을 열어라

                      때로는 기존 HTML 코드를 볼 때 다음과 같은 주장을 접하게 됩니다. 유형요소에

                      , 번호 매기기 유형(문자, 로마자 및 아라비아 숫자등등.). 통사론:

                      여기에: 입력 – 기호 목록:

                      • A - 라틴 대문자(A, B, C...)
                      • a - 라틴 소문자(a, b, c...)
                      • I - 큰 로마 숫자(I, II, III...);
                      • i - 작은 로마 숫자(i, ii, iii...)
                      • 1 - 아라비아 숫자(1, 2, 3 . . . .)(기본적으로 사용됨)

                      목록이 1이 아닌 숫자로 시작하도록 하려면 속성을 사용하여 이를 지정해야 합니다. 시작꼬리표

                      .
                      다음 예에서는 큰 로마 숫자와 시작 값 XLIX가 포함된 번호 매기기 목록을 보여줍니다.

                      속성을 사용하여 번호 매기기를 시작할 수도 있습니다. 값, 요소에 추가됩니다.

                      1. 다음과 같은 방법으로:

                      7. 이 경우 목록의 일련 번호 지정이 중단되고 이 시점부터 번호 지정이 다시 시작됩니다(이 경우 7부터).

                         속성 사용 예 값꼬리표

                      8. , 주어진 목록 요소의 수를 변경할 수 있습니다.

                         이 예에서 "첫 번째 목록 항목"은 1번, "두 번째 목록 항목"은 7번, "세 번째 목록 항목"은 8번이 됩니다.

                         CSS로 번호 매기기 목록 서식 지정

                         목록 번호를 변경하려면 속성을 사용해야 합니다. 목록 스타일 유형 CSS 스타일 시트:

                         번호 매기기 목록 스타일

                         예	의미	설명
                         에이, 비, 씨	낮은 알파	소문자
                         에이,비,씨	상위 알파	대문자
                         나, ii, iii	하 로마인	소문자로 된 로마 숫자
                         나, II, III	상위 소설	대문자로 된 로마 숫자

                         예: CSS 속성 적용 목록 스타일 유형

                         글머리 기호 목록

                         글머리 기호 목록은 기본적으로 번호가 매겨진 목록과 유사하지만 항목에 순차적인 번호 매기기가 포함되어 있지 않습니다. 글머리 기호 목록은 블록 요소를 사용하여 생성됩니다.

                         (영어 순서가 없는 목록 - 번호가 없는 목록에서). 번호가 매겨진 목록에서와 같이 각 목록 요소는 태그로 시작됩니다.
                         • . 브라우저는 각 목록 항목을 들여쓰고 자동으로 글머리 기호를 표시합니다.
                           꼬리표
                           다음과 같은 구문이 있습니다.
                           • 첫 번째 포인트
                           • 두 번째 포인트
                           • 세 번째 포인트

                           다음 예에서는 기본적으로 채워진 원 형태의 작은 마커가 각 목록 항목 앞에 추가되는 것을 볼 수 있습니다.

                           태그 내부

                           • 텍스트만 배치할 필요는 없으며 스트리밍 콘텐츠의 모든 요소(링크, 단락, 이미지 등)를 배치해도 됩니다.

                             중첩 목록

                             모든 목록은 다른 목록 내에 중첩될 수 있습니다. 요소 내부
                           • 중첩 목록이나 두 번째 수준 목록을 만드는 것이 허용됩니다. 목록을 중첩하려면 요소 내부에 새 목록을 설명하세요.
                           • 이미 존재하는 목록입니다. 하나의 글머리 기호 목록을 다른 글머리 기호 목록에 중첩하면 브라우저는 두 번째 수준 목록의 글머리 기호 스타일을 자동으로 변경합니다. 모든 목록은 다른 목록 내에 중첩될 수 있습니다. 다음 예에서는 번호 매기기 목록의 두 번째 항목 내에 중첩된 글머리 기호 목록의 구조를 보여줍니다.

                             예: 중첩 목록

                             • 직접 해보세요 "
                             • 월요일
                               1. 메일을 보내다
                               2. 편집자 방문
                                  • 테마 선택
                                  • 장식적인 디자인
                                  • 최종 보고서
                               3. 저녁 메시지 보기
                             • 화요일
                               1. 일정 수정
                               2. 이미지 보내기
                             • 수요일...
                             • 월요일
                               1. 메일을 보내다
                               2. 편집자 방문
                                  • 테마 선택
                                  • 장식적인 디자인
                                  • 최종 보고서
                               3. 저녁 메시지 보기
                             • 화요일
                               1. 일정 수정
                               2. 이미지 보내기
                             • 수요일...

                             글머리 기호 목록 서식 지정

                             변화를 위해 모습목록 마커 속성을 사용해야 합니다. 목록 스타일 유형 CSS 스타일 시트:

                             다음 예에서는 글머리 기호 목록의 다양한 스타일을 보여줍니다.

                             예: 글머리 기호 목록 스타일

                             • 직접 해보세요 "
                             • 커피
                             • 커피
                             • 커피
                             • 커피

                             디스크:

                             • 커피
                             • 우유

                             원:

                             • 커피
                             • 우유

                             정사각형:

                             • 커피
                             • 우유

                             없음:

                             • 커피
                             • 우유

                             그래픽 마커.

                             HTML에서는 그래픽 마커를 사용하여 목록을 생성할 수 있습니다. 목록 마커가 표준 원 또는 사각형인 경우와 개발자가 페이지 디자인에 따라 마커를 직접 선택하는 경우는 완전히 다릅니다. 목록 항목을 아름답게 만들기 위해 작은 그림을 사용하는 경우가 많습니다.
                             일반 마커를 그래픽 마커로 바꾸려면 속성을 바꾸십시오. 목록 스타일 유형속성당 목록 스타일 이미지이미지의 URL을 표시합니다.

                             예: 그래픽 마커

                             • 직접 해보세요 "

                             조디악 징후

                             • 황소자리
                             • 쌍둥이 자리

                             조디악 징후

                             • 양자리
                             • 황소자리
                             • 쌍둥이 자리

                             정의 목록(설명)

                             정의 목록은 예를 들어 개인 용어 사전을 만드는 데 매우 유용합니다. 각 정의 목록 항목은 용어와 정의라는 두 부분으로 구성됩니다.
                             전체 목록을 요소에 넣습니다.

                             (영어 정의 목록 - 정의 목록에서). 태그가 포함되어 있습니다.

                             (영어 정의 용어 - 정의된 단어, 용어에서) 및

                             (영어 정의 설명에서 - 정의되는 용어에 대한 설명)
                             정의 목록은 종종 과학, 기술 및 교육 출판물에서 용어집, 사전, 참고 도서 등을 편집하는 데 사용됩니다.

                             설명 목록의 일반적인 구조는 다음과 같습니다.

                             첫 학기

                             첫 번째 용어에 대한 설명

                             두 번째 항

                             두 번째 용어에 대한 설명

                             다음 예에서는 다음 중 하나를 보여줍니다. 가능한 용도정의 목록:

                             예: 정의 목록

                             • 직접 해보세요 "

                             월드 와이드 웹 - 영어에서. 월드와이드웹(WWW)은 인터넷에 연결된 여러 컴퓨터에 있는 관련 문서에 대한 액세스를 제공하는 분산 시스템입니다. 인터넷은 정보를 전송하기 위해 단일 교환 프로토콜을 사용하는 네트워크 집합입니다. 웹사이트는 링크와 통일된 디자인으로 상호 연결된 개별 웹페이지의 집합입니다.

                             월드 와이드 웹

                             - 영어로부터 월드와이드웹(WWW)은 인터넷에 연결된 여러 컴퓨터에 있는 관련 문서에 대한 액세스를 제공하는 분산 시스템입니다.

                             인터넷

                             — 정보를 전송하기 위해 단일 교환 프로토콜을 사용하는 네트워크 집합입니다.

                             웹사이트

                             - 링크와 통일된 디자인으로 상호 연결된 개별 웹페이지 세트입니다.

                             기본적으로 용어의 텍스트는 브라우저 창의 왼쪽 가장자리에 눌려져 있으며, 용어에 대한 설명은 아래에 위치하여 오른쪽으로 이동됩니다.

                             번호가 매겨진 목록은 일련 번호가 포함된 요소의 모음입니다. 넘버링 유형과 유형은 요소 매개변수에 따라 다릅니다.

                             , 목록을 만드는 데 사용됩니다. 다음 값은 번호 매기기 요소로 사용될 수 있습니다.
                             • 아라비아 숫자(1, 2, 3, ...);
                             • 10보다 작은 숫자의 경우 앞에 0이 붙는 아라비아 숫자(01, 02, 03, ...,10)
                             • 라틴 대문자(A, B, C, ...);
                             • 소문자 라틴 문자(a, b, c, ...);
                             • 대문자 로마 숫자(I, II, III, ...);
                             • 소문자 로마 숫자(i, ii, iii, ...);
                             • 아르메니아 번호 매기기;
                             • 그루지야어 번호 매기기.

                             실용적인 관점에서 볼 때 글머리 기호 목록에 항목을 표시하는 원칙은 번호 매기기 목록과 유사한 방식으로 적용될 수 있습니다. 그러나 우리가 열거형을 다루고 있다는 점을 고려하면 더 자세히 논의할 몇 가지 기능이 있습니다.

                             목록 번호 매기기

                             어떤 숫자에서든 목록을 시작할 수 있습니다. 요소의 시작 속성이 이 목적으로 사용됩니다.

                             또는 요소의 값
                             1. . 값은 양의 정수입니다. 라틴 문자를 목록으로 사용하더라도 어떤 유형의 번호 매기기를 설정해도 상관 없습니다. 시작 속성과 값 속성이 모두 목록에 동시에 적용되는 경우 후자가 우선 적용되며 예제 1과 같이 value 로 지정된 숫자부터 번호 매기기가 표시됩니다.

                                예 1: 목록 번호 매기기 변경

                                4. 직장을 잘 관리해야 합니다.
                                5. 광원이 작업자 옆이나 뒤에 위치하도록 실내 조명을 조정합니다.
                                10. 의학적 합병증을 예방하려면 좌석이 부드러운 의자를 선택하는 것이 좋습니다.

                                이 예에서 목록의 첫 번째 요소는 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: 목록 보기 변경

                                1. 첫 번째
                                2. 두번째
                                3. 제삼
                                4. 네번째

                                위의 방법을 사용하면 모든 유형의 번호 매기기 목록을 만들 수 있습니다. 예를 들어 숫자를 대괄호 안에 넣습니다. 이 경우 스타일에서 한 줄만 변경됩니다.

                                내용: "[" 카운터(항목) "] ";

                                러시아 문자로 목록

                                라틴 문자로 번호가 매겨진 목록이 있지만 목록에 러시아어 문자가 없습니다. 위의 기술을 사용하여 인위적으로 추가할 수 있습니다. 번호 매기기는 스타일을 통해 수행되므로 목록 자체는 원본으로 유지되고 선택한 클래스만 추가됩니다. 키릴 문자라고 하겠습니다(예 4).

                                예제 4: 목록을 생성하는 코드

                                1. 하나
                                2. 둘
                                3. 삼

                                문자 추가는 ::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. 파이크 커틀릿
                                3. 쿨레뱌카
                                4. 사워 크림에 버섯
                                5. 캐비어를 곁들인 팬케이크
                                6. 크바스

                                결과 이 예그림에 표시됩니다. 삼.