CSS의 마커. 라이브 예제를 사용하여 HTML로 글머리 기호 목록 만들기

CSS를 사용하면 글머리 기호 및 번호 매기기 목록을 만들고, 이미지로 글머리 기호 목록을 디자인하고, 필요한 경우 글머리 기호 목록 표시를 모두 제거할 수 있습니다.

CSS 글머리 기호 목록 스타일.

목록 스타일 유형

목록 스타일 유형:디스크 | 원 | 광장 | 십진수 | 낮은 로마자 | 상부 로마 | 낮은 알파 | 상위 알파 | 없음 ;

의미 :

디스크 – 채워진 원 형태의 글머리 기호 목록

Circle – 채워지지 않은 원 형태의 글머리 기호 목록

square – 채워진 사각형 형태의 글머리 기호 목록

십진수 – 아라비아 숫자(1,2,3 등)가 포함된 번호 목록

상위 로마자 – 큰 로마 숫자로 된 번호 목록(I, II, III, IV 등)

로우 로마 숫자 – 작은 로마 숫자를 사용한 번호 목록(i,ii,iii,iv 등)

upper-alpha – 대문자(A,B,C 등)로 된 번호가 매겨진 목록

lower-alpha – 소문자로 된 번호가 매겨진 목록(a,b,c 등)

없음 – 마커가 없습니다.

예:

• 최고를 믿고 최악을 예상하십시오.
• 인생은 치명적인 결과를 가져오는 질병이다.
• 결코 말하지 마십시오.

결과 :

목록에서 마커 표시를 제거해야 하는 경우가 있습니다. 이렇게 하려면 CSS 코드를 작성하세요.

목록 스타일 유형:없음;

예:

• 최고를 믿고 최악을 예상하십시오.
• 결코 말하지 마십시오.

결과 :

목록에 있는 일반적인 마커를 자신의 이미지로 바꿀 수 있습니다. 이는 list-style-image 속성을 사용하여 수행할 수 있습니다.

목록 스타일 이미지

목록 스타일 이미지: url(이미지.png);

예:

• 최고를 믿고 최악을 예상하십시오.
• 인생은 치명적인 결과를 가져오는 질병이다.
• 결코 말하지 마십시오.

결과 :

텍스트에서 글머리 기호 목록의 거리를 설정할 수도 있습니다. 이는 li 선택기의 padding-left 속성을 사용하여 수행할 수 있습니다.

예:

• 최고를 믿고 최악을 예상하십시오.
• 인생은 치명적인 결과를 가져오는 질병이다.
• 결코 말하지 마십시오.

결과 :

다음 작업은 텍스트 색상을 변경하지 않고 마커 색상을 변경하는 것입니다. 이것이 어떻게 가능한지? 테스트에 태그를 추가하여 마커 색상을 변경할 수 있습니다. .
다음과 같습니다.

예:

• 최고를 믿고 최악을 예상하십시오.
• 인생은 치명적인 결과를 가져오는 질병이다.
• 결코 말하지 마십시오.

결과 :

일반 주제에 추가됩니다.
어떤 이유로 마커 목록의 번호 매기기를 0이 아닌 8부터 설정해야 하는 경우 이렇게 이동할 수 있습니다.

예:

• 최고를 믿고 최악을 예상하라 1.
• 인생은 치명적인 질병입니다. 포인트 2
• 포인트 3 절대 말하지 마세요.
• 그게 내가 아는 전부였습니다. 포인트 4

결과 :

이 주제는 끝났습니다.

HTML에서는 전체 태그 세트가 목록 구성을 담당하며, 목록 구성은 데이터 구조화에 대한 특정 규칙을 준수해야 합니다.

HTML 표준의 다섯 번째 버전은 번호가 매겨진 목록, 글머리 기호 목록, 정의 목록 등 3가지 유형의 목록을 지원합니다. 또한 목록을 서로 중첩하여 중첩된 다단계 목록을 만드는 기능도 제공합니다.

번호가 매겨진 목록

번호가 매겨진 목록- 특정 순서를 갖는 요소(목록 항목)의 집합입니다. 번호가 매겨진 목록의 각 항목에는 목록의 다른 항목에 비해 해당 항목이 나타나는 순서를 나타내는 고유한 표시가 있습니다. 기본적으로 번호가 매겨진 목록 항목 표시자는 숫자입니다. 첫 번째 항목의 번호는 1이고, 두 번째 항목의 번호는 2입니다.

번호가 매겨진 목록의 가장 일반적인 예는 다양한 요리를 준비하는 요리법입니다. 모든 레시피는 번호가 매겨진 목록이므로 명확한 작업 순서가 있습니다.

HTML로 번호가 매겨진 목록을 만들려면 태그를 사용하세요.

, 그 안에 데이터가 있는 목록 요소가 있습니다. 각 목록 항목은 태그를 사용하여 표시됩니다.
1. :

   번호가 매겨진 목록:

   1. 커피
   2. 차
   3. 우유
   
   
   노력하다 "

   참고: 태그

   태그를 하위 요소로만 포함할 수 있습니다.
   1. 즉, 번호가 매겨진 목록의 모든 내용은 요소 안에 배치되어야 합니다.
   2. . 꼬리표
   3. , 내용에 대한 제한이 없으므로 단락, 그림, 링크, 표, 기타 목록 등을 넣을 수 있습니다.

      글머리 기호 목록

      글머리 기호 목록- 번호가 지정되지 않은 요소, 즉 순서가 지정되지 않은 요소 목록이며 순서는 중요하지 않습니다. 모든 글머리 기호 목록 항목은 동일한 글머리 기호를 가지며 기본적으로 작은 검은색 원으로 나타납니다.

      HTML로 글머리 기호 목록을 만들려면 태그를 사용하세요.

      , 목록 자체의 요소가 위치하는 내부(번호가 매겨진 목록의 경우 태그
      • , 목록에 표시된 모든 내용이 포함됨):

        글머리 기호 목록:

        • 커피
        • 차
        • 우유
        
        
        노력하다 "

        마커 유형

        번호가 매겨진 목록 글머리 기호의 유형은 유형 속성을 사용하여 변경할 수 있습니다. 이 속성은 다섯 가지 유형의 마커를 지원합니다.

        글머리 기호 목록에는 유형 속성이 없으므로 HTML을 사용하여 글머리 기호 목록의 글머리 기호 유형을 변경할 수 없습니다. 이 경우 마커 유형을 변경하려면 CSS 속성 list-style-type 을 사용하면 됩니다. 이 속성을 사용하면 기본값 외에도 원형 또는 사각형이라는 두 가지 마커 유형을 더 선택할 수 있습니다.

        목록 표시 변경:

        type="a" 속성이 있는 번호가 매겨진 목록:

        1. 사과
        2. 바나나
        3. 레몬

        type="I" 속성이 있는 번호가 매겨진 목록:

        1. 사과
        2. 바나나
        3. 레몬

        글머리 기호 목록 표시 유형:

        • 사과
        • 바나나
        • 레몬
        • 사과
        • 바나나
        • 레몬
        
        
        노력하다 "

        CSS 속성 list-style-type 에는 글머리 기호 목록에 대한 마커 유형 외에도 번호 매기기 목록에 대한 다양한 유형의 마커가 있습니다. 그러나 하나의 표준 유형의 마커를 다른 유형으로 변경하는 것만으로는 항상 아름다운 목록을 만드는 데 충분하지 않습니다. 목록을 디자인하려면 CSS를 사용하는 것이 더 좋습니다. CSS를 사용하면 마커의 모양을 변경할 수 있을 뿐만 아니라 마커를 그림으로 대체하고 위치를 제어하며 들여쓰기를 제어할 수 있습니다. 이 모든 작업을 수행하는 방법을 볼 수 있습니다.

        수평 목록

        HTML 목록 상자를 사용하여 가로 메뉴를 만드는 경우 목록 항목을 같은 줄에 하나씩 정렬해야 합니다. HTML로는 불가능하므로 CSS를 사용해야 합니다.

        가로 목록을 만들려면 사용할 다른 속성에 따라 inline 또는 inline-block 값을 사용하여 목록 항목에 대한 CSS 표시 속성을 설정해야 합니다.

        번호가 매겨진 목록

        1. 사과
        2. 바나나
        3. 레몬

        글머리 기호 목록:

        • 사과
        • 바나나
        • 레몬
        
        
        노력하다 "

        그러면 모든 목록 항목이 한 줄에 정렬됩니다. 목록 항목에서 글머리 기호가 사라지고 항목 사이에 공백도 생기지 않지만 목록의 왼쪽 들여쓰기는 그대로 유지됩니다.

        가로 목록을 가로 메뉴로 바꾸는 방법을 볼 수 있습니다.

        HTML 마크업 언어에는 순서가 있는(번호가 매겨진) 목록, 순서가 없는(번호가 없는) 목록, 정의 목록이라는 3가지 유형의 목록이 있습니다.

        이러한 목록을 작성하려면 'ul'(순서가 없는 목록의 약자, 즉 순서가 없는 목록)과 'li'(목록 요소)라는 두 가지 유형의 요소가 필요합니다. 'li' 안에 쓰여진 모든 내용에는 마커가 표시됩니다.

        이러한 목록의 모양은 마커 유형을 지정하여 제어할 수 있습니다.

        마커 유형

        두 목록 요소 모두에 배치되는 특별한 유형 속성이 있습니다. 이것이 귀하의 마커 유형입니다. 원형, 원판, 정사각형의 3가지 유형만 있습니다.

        - 정사각형
        - 디스크
        - 둘레

        표식 유형을 지정하는 위치에 따라 전체 목록 또는 특정 요소에 대해 표식 유형을 변경할 수 있습니다.

        주문목록

        목록을 만들려면 'ol'과 'li'(목록 요소)라는 두 가지 요소도 필요합니다. 마커는 점이 있는 숫자로 대체됩니다. 간단한 목록의 예:

        1. 첫 번째 요소
        2. 두 번째 요소
        3. 마지막 요소

        다양한 유형의 번호 매기기를 지정하여 순서가 지정된 목록의 모양을 제어할 수 있습니다.

        번호 매기기 유형

        'ol' 또는 'li' 요소에 배치되는 특별한 유형 속성이 있습니다. 이것이 귀하의 목록 유형입니다. 총 5가지 유형이 있습니다.

        - 아라비아 숫자로 번호 매기기(1, 2, 3)
        - 대문자(A, B, C)로 번호 매기기
        - 소문자로 번호 매기기(a, b, c)
        - 큰 로마 숫자로 번호 매기기(I, II, III)
        - 작은 로마 숫자로 번호 매기기(i, ii, iii)
        - 번호 매기기를 시작할 번호는 무엇입니까?

        번호 매기기 유형을 지정하는 위치에 따라 전체 목록 또는 특정 요소에 대해 번호 매기기 유형을 변경할 수 있습니다.

        정의 목록

        사전 항목에 대한 정의 목록이 개발되었습니다.

        일반 컨테이너 'dl'이 있습니다. 그 안에는 'dt'(정의 용어)와 'dd'(정의 설명)가 있습니다. 가장 간단한 예:

        마케팅 부서

        이 부서는 상품과 서비스의 홍보에 종사하고 있습니다.

        금융 부서

        모든 금융거래를 담당하는 부서입니다.

        모든 목록의 모든 요소는 블록 요소입니다. 하지만 'dt' 요소 안에는 인라인 요소만 배치할 수 있습니다. 'dd' 및 'li' 요소에는 원하는 것을 무엇이든 넣을 수 있습니다. 이것이 중첩된 목록의 출처입니다.

        중첩(혼합 목록)

        이는 계층 구조가 포함된 다중 레벨 목록입니다. 이러한 목록은 사이트 맵을 작성할 때 종종 사용됩니다. 예:

        혼합 목록

        오늘의 뉴스

        오늘은 비

        하루 종일 비가 올 거예요

        밤의 뉴스

        밤에는 비가 올 거예요

        내일은 새로운 하루가 시작될 거야

        사랑하는 친구와 독자 여러분 모두에게 좋은 하루 되세요. 어제 나는 축하했고 가족 관계에서 모든 것이 계획대로 잘 진행되었다고 말하고 싶습니다. 글쎄요, 그랬어야 했어요. 그래도 우리는 가족 모임에 앉았습니다. 음, 6월 19일은 친구들과 축하할 예정이라 연회는 계속될 예정이에요. 하지만 오늘 우리는 마침내 일상 업무로 돌아가(비록 휴가 중이지만) HTML 언어를 계속 배울 수 있습니다.

        알잖아? 어제 아내와 저는 집, 생일, 휴가를 위해 무엇을 사야할지 목록을 작성하고 있었는데 문득 이런 생각이 들었습니다. “아. 그리고 다음 글에서는 html 목록에 대해 집중적으로 다루겠습니다.” 일반적으로 두 가지 주요 유형이 있으므로 각 유형에 대해 별도의 기사를 작성하고 싶었습니다. 그리고 오늘은 글머리 기호 목록 html을 공부하겠습니다.

        글머리 기호 목록이란 무엇입니까? 이것은 순서가 지정된 작업을 포함하지 않지만 의미가 유사한 요소를 포함하는 특수 목록입니다. 그리고 이러한 목록은 마커, 하이픈 등과 같은 일종의 아이콘으로 강조 표시됩니다. 여기 내 블로그에서는 검지 형태로 표시되어 있으며 무언가를 나열할 때 사용합니다. 예를 살펴보겠습니다.

        컴퓨터 부품:

        • 마더보드
        • 램
        • HDD
        • 비디오 카드
        • 등.

        이제 이 모든 것을 HTML로 재현하는 방법을 살펴보겠습니다.

        이러한 목록을 만들려면 두 쌍의 .

        • - 순서가 없는 목록. 이 태그는 목록의 시작 부분에 배치되고 맨 끝에서 닫힙니다. 순서가 지정되지 않은 글머리 기호 목록이 여기에 표시된다는 것을 알려줍니다.
          • — 목록 항목(목록 항목). 이 태그에는 목록의 각 요소가 포함되어 있습니다.

          실제로 글머리 기호 목록을 만드는 절차는 매우 쉽고 예를 들어 설명하겠습니다.

          • 푸조
          • 오펠

          문서를 저장하고 브라우저에서 열면 목록은 다음과 같습니다. 직접 확인하고 사용해 보세요.

          

          속성

          그리고 물론, 이 태그와 관련된 것들에 대해서는 말씀드리지 않을 수 없습니다. 사실, 이러한 속성은 스타일, 즉 CSS를 통해 모든 것이 더 간단하고 편리하기 때문에 더 이상 html에서 사용되지 않습니다. 하지만 그래도 일반적인 개발에 대해서 말씀드리고 싶어서 type 속성과 그 의미에 대해 소개해드리겠습니다.

          type 속성은 마커 유형을 변경하기 위해 설정되지만 앞서 말했듯이 오늘날 현실에서는 여전히 작동하지만 설정하는 것이 더 이상 관례가 아닙니다.

          

          • — 이 값은 기본값이므로 지정할 필요가 전혀 없습니다. 마커는 검정색으로 채워진 원처럼 보입니다.
            • — 이 값 덕분에 마커는 둥글게 유지되지만 더 이상 채워지지 않습니다.
              • - 이 경우 마커는 작은 검은색 사각형으로 변합니다.

                어떻게 작동하는지 직접 확인하면 모든 변경 사항을 볼 수 있습니다.

                

                중첩 목록

                단일 목록으로는 만족하지 못할 때가 있습니다. 그러면 모든 것을 올바르게 배포하기 위해 중첩된 목록을 만들어야 합니다. 자동차의 예를 들어보자. 이전 예에서는 단순히 자동차 목록을 만들었지만 이제는 각 브랜드에 여러 모델을 더 추가해 보겠습니다.

                정말 쉽습니다. 해당 태그로 이동하세요.

              • 확장하려는 새 목록 컨테이너를 추가합니다.
                , 이미 다른 태그 세트를 거기에 삽입했습니다.
                • 그 사이에 자동차 모델이 작성됩니다. 공습 경보 신호? 그렇지 않다면 코드에서 어떻게 보이는지 살펴보겠습니다.

                  

                  이제 브라우저에서 모든 것을 저장하고 실행합니다. 우리가 얻은 것을 보세요. 이제 각 목록 요소에 또 다른 새로운 목록이 있습니다. 이것이 우리가 노력한 것입니다. 그리고 눈치채셨다면 기본 마커는 상위 마커와 다르게 설정되어 있습니다. 이는 혼란을 피하기 위해 의도적으로 수행된 것이지만 원하는 속성을 입력하고 마커를 선택할 수 있습니다. 나는 여기서 모든 것이 명확해야한다고 생각합니다.

                  

                  하지만 앞으로 우리는 CSS를 연구하고 그에 따라 모든 일을 할 것입니다. 스타일 덕분에 목록 표시를 크게 개선할 수 있으며 자신만의 마커를 만들 수도 있습니다. 내 블로그 메뉴(홈, 전체글, 작성자 소개 등) 보이시나요? 그리고 일반적으로 거의 모든 웹사이트에 가서 비슷한 메뉴를 볼 수 있습니다. 따라서 이러한 모든 메뉴 항목은 목록 요소이며 CSS를 통해서만 처리됩니다.

                  

                  글쎄요, 전반적으로 요점을 이해하신 것 같습니다. 하지만 HTML과 CSS에 정통하고 싶다면 이 과정을 시청하는 것이 좋습니다. 처음부터 전문가까지 HTML5 및 CSS3". 이 과정 덕분에 HTML과 CSS의 모든 기본 사항을 쉽게 배울 수 있을 뿐만 아니라 명함 사이트, 블로그, 온라인 상점, 심지어 랜딩 페이지까지 여러 유형의 웹사이트를 직접 만드는 방법도 배울 수 있습니다. 이 과정은 정말 놀랍습니다. .

                  감사합니다, 드미트리 코스틴.

                  안녕하세요!

                  이 기사에서는 목록의 모든 가능성에 대해 배우고, 번호가 매겨진 목록을 만드는 방법을 이해하며, 간단한 글머리 기호 목록을 임의의 글머리 기호를 사용하여 더 흥미롭고 눈에 띄는 목록으로 바꾸는 데 도움이 되는 마스터 태그를 설명합니다. 수업을 마친 후에는 목록이 어디에 사용되는지, 어떤 상황에서 사용할 수 있는지 이해하게 됩니다.

                  이 글은 HTML의 기초에 관한 짧은 강좌의 세 번째 글입니다. 이 강의를 읽기 전에 이전 두 가지 내용을 살펴보는 것이 좋습니다.

                  기사가 이제 막 시작되었으며 이미 표준 글머리 기호 목록이 사용된 것을 볼 수 있습니다. 내 웹사이트에서는 매우 단순해 보입니다. 왼쪽에는 선과 사각형 마커가 있는 작은 들여쓰기가 있습니다. 이 기사의 뒷부분에서 우리는 어떤 종류의 마커가 있는지, 어떻게 숫자를 만드는지, 그리고 자신만의 마커를 만드는 방법을 자세히 살펴볼 것입니다.

                  기사의 각 부분에서는 특정 목록을 생성할 때 특정 목록을 삽입하는 방법에 대한 자세한 설명이 함께 제공됩니다.

                  1. HTML의 글머리 기호 목록

                  이 유형의 목록은 유사한 의미를 가진 요소 집합을 텍스트에 나열하는 데 사용됩니다. 이는 동일한 주제와 관련된 링크 목록, 텍스트의 개별 부분에 대한 자세한 설명일 수 있습니다. 하지만 코드에서 글머리 기호 목록이 어떻게 보이는지 살펴보겠습니다.

                  브라우저에서는 다음과 같이 표시됩니다.

                  쌀. 1.1. 브라우저에서 HTML 글머리 기호가 있는 정렬되지 않은 목록의 표준 보기

                  1.1 글머리 기호 목록의 표준 글머리 기호

                  위 이미지(그림 1.1.)에서 각 메뉴 항목의 시작 부분에 있는 원을 볼 수 있습니다. 이것이 마커입니다. 기본적으로 브라우저에서는 채워진 원으로 나타납니다. HTML에는 채워진 원, 빈 원, 정사각형 등 여러 유형의 마커가 있습니다. CSS나 타사 이미지가 필요하지 않습니다.

                  1.2 빈 원 형태의 리스트 마커

                  속성 값을 알고 있지만 이제 코드에서 HTML 글머리 기호 목록을 만드는 방법을 살펴보겠습니다. 위의 표에서 type 속성으로 두 번째 값 "circle"을 선택하고 이를 글머리 기호 목록으로 설정했습니다.

                  <HTML > <머리 > <제목 >빈 원 마커가 있는 글머리 기호 목록의 예</제목> </머리> <몸 > <피>별:</피> <ul 유형 = "원" > <리 >천랑성</li> <리 >아르크투루스</li> <리 >폴룩스</li> <리 >베텔게우스</li> <리 >해</li> </ul> </본문> </html>

                  이 코드가 브라우저에서 어떻게 보이는지 즉시 살펴보겠습니다.

                  쌀. 1.2. 브라우저에서 목록 마커를 원으로 보기

                  1.3 사각형 형태의 리스트 마커

                  HTML 목록에 사각형 마커가 있는 마지막 예도 살펴보겠습니다.

                  마커에 주의하세요. 사각형으로 변했습니다.

                  쌀. 1.3. 브라우저에서 목록 마커를 사각형으로 보기

                  중요 사항:이 방법은 더 이상 글머리 기호 목록의 스타일을 만드는 데 사용되지 않습니다. CSS(CSS가 무엇인지 읽어보세요)와 HTML 사이에는 명확한 구분이 있습니다. HTML은 마크업을 위한 것이고 CSS는 매력적인 모양을 만들기 위한 것입니다.

                  현재 문서 유형을 HTML5("")를 입력하면 유효성 검사 중에 오류가 발생합니다. 유효성 검사가 무엇인지 들어본 적이 없다면 여기가 적합합니다.

                  오류는 다음과 같습니다.

                  쌀. 1.4. 목록의 "type" 속성을 사용할 때 유효성 검사기에서 오류가 발생했습니다.

                  글머리 기호 목록을 정리했습니다. 이제 번호가 매겨진 목록으로 넘어가서 실제 사이트에서 가장 자주 사용되는 중첩된 목록과 미리 만들어진 몇 가지 예를 고려해 보겠습니다.

                  2. HTML의 번호 매기기 목록

                  이전 유형의 목록과 달리 번호가 매겨진 목록에는 한 가지 중요한 기능이 있습니다. 자동으로 번호가 매겨집니다. 이는 큰 목록에 번호를 매겨야 할 때 유용합니다. 수동으로 수행하면 시간이 많이 걸리고 여전히 혼란스러울 수 있습니다. 번호가 매겨진 목록은 태그를 사용하여 지정됩니다. 실제 모습은 다음과 같습니다.

                  번호가 매겨진 목록의 예:

                  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

                  <HTML > <머리 > <제목 >표준 번호 매기기 목록의 예</제목> </머리> <몸 > <피> 1부터 5까지:</피> <올 > <리 >첫 번째</li> <리 >두번째</li> <리 >제삼</li> <리 >네번째</li> <리 >다섯</li> </ol> </본문> </html>

                  다음은 표준 브라우저 설정에서 번호가 매겨진 목록의 모습입니다.

                  쌀. 2.1. 표준 설정이 적용된 브라우저의 번호 매기기 목록

                  이전 버전(글머리 기호 목록)과 마찬가지로 숫자 표시에 대한 고유한 스타일이 있습니다. 일반 번호 매기기는 HTML의 번호 매기기 목록에 대한 유일한 글머리 기호 유형이 아닙니다.

                  2.1 번호가 매겨진 목록의 표준 글머리 기호

                  여기서는 세 가지 유형의 마커가 아닌 다섯 가지 유형의 마커를 선택할 수 있습니다.

                  마커 이름	"유형" 속성 값	목록 예
                  아라비아 숫자 형태의 마커	1	배드민턴 야구
                  라틴 소문자 형태의 마커	ㅏ	초모룽마 초고리 칸첸중가
                  라틴 대문자 형태의 마커	ㅏ	서밋 급락 탠트럼 골목 인사노
                  소문자 로마 숫자 표시	나	필리핀해 아라비아해 산호 바다
                  대문자 로마 숫자 마커	나	빨간색 녹색 파란색

                  2.2 HTML 목록에서 고유한 번호 매기기

                  번호 매기기 목록의 일반적인 출력 외에도 어떤 숫자에서든 번호 매기기를 시작할 수도 있습니다. 이렇게 하려면 추가 속성 "start"를 설정해야 합니다. 이 번호 매기기는 번호가 매겨진 목록의 모든 유형의 표시에 적용됩니다. 실제 모습은 다음과 같습니다.

                  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

                  <HTML > <머리 > <제목 >번호 매기기 목록에 대한 사용자 정의 번호 매기기</제목> </머리> <몸 > <피>우리는 12부터 번호를 매기기 시작합니다.</피> <ol 유형 = "a" 시작 = "12" > <리 >열둘</li> <리 >열셋</li> <리 >십사</li> <리 >열 다섯</li> <리 >열여섯</li> </ol> </본문> </html>

                  실제 사이트에서는 다음과 같이 표시됩니다.

                  쌀. 2.2. 번호 매기기 목록의 임의의 숫자에서 번호 매기기

                  위 이미지에서는 12부터 시작하여 목록에 번호를 매겼고 라틴 소문자 형태로 마커를 만들었습니다. 이제 프로젝트에서 이러한 속성을 사용하는 방법이 분명해진 것 같습니다.

                  이제 중첩된 HTML 목록으로 넘어가겠습니다.

                  3. HTML에서 다중 레벨(중첩) 목록을 만드는 방법

                  다단계 목록은 사이트에서 메뉴를 만드는 데 사용됩니다. 이 메뉴는 대부분 아래쪽 드롭다운(강의 중) 또는 왼쪽 또는 오른쪽 드롭다운 메뉴로 나타납니다. 이러한 메뉴를 사용하면 다른 메뉴 요소를 압축된 형식으로 저장할 수 있습니다.

                  자동차 모델을 예로 들어 HTML로 다단계 목록을 작성하겠습니다.

                  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

                  <HTML > <머리 > <제목 > HTML 중첩 글머리 기호 목록</제목> </머리> <몸 > <울 > <리 >시트로엥<울 > <리 >베를링고</li> <리 > C1</li> <리 > C2</li> <리 > C3 피카소</li> <리 > C4 그랜드 피카소</li> </ul> </li> <리 >기아</li> <리 >토요타</li> <리 >아우디</li> <리 >렉서스</li> </ul> </본문> </html>

                  다단계 목록이 브라우저에 어떻게 표시되는지 확인하세요.

                  쌀. 3.1. HTML의 다중 레벨 목록 예

                  글머리 기호(태그)를 사용하여 다단계 목록을 만들었습니다.

                  ). 시트로엥 모델이 포함된 다단계 목록이 다른 마커와 함께 나타났습니다. 기본 목록에는 글머리 기호가 채워져 있고 두 번째 수준 목록에는 빈 원이 있습니다. 하지만 기억하시는 것처럼 "type" 속성을 사용하여 마커를 재정의할 수 있습니다(설정하는 것이 더 좋음).

                  그러나 다단계 목록을 다음과 같이 번호가 매겨진 목록과 글머리 기호 목록과 결합할 수 있습니다.

                  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

                  <HTML > <머리 > <제목 > HTML의 번호 매기기, 글머리 기호 및 다중 레벨 목록</제목> </머리> <몸 > <울 > <리 >첫 번째 튤립 그룹<올 > <리 > 1학년<울 > <리 >간단한 초기 튤립</li> </ul> </li> <리 >이급<울 > <리 >테리 튤립</li> </ul> </li> </ol> </li> </ul> </본문> </html>

                  위의 예에서는 이중 중첩(2개 수준)이 있습니다. 먼저, 두 가지 종류의 튤립 목록이 포함되어 있습니다. 그런 다음 글머리 기호 목록이 번호 매기기 목록의 각 항목 내에 중첩됩니다.

                  브라우저에서 어떻게 보이는지 살펴보겠습니다.

                  쌀. 3.2. 브라우저의 글머리 기호 목록에 대한 다단계 번호 매기기 목록의 예

                  4. HTML 목록의 유용한 자료

                  CSS 속성에 대한 이해가 필요한 정보입니다. 이를 위해 다음 수업을 공부하는 것이 좋습니다. 모든 예제는 소스 코드와 함께 즉시 HTML(구조), CSS(스타일) 및 결과(결과) 탭으로 구분됩니다.

                  4.1 HTML 목록을 문자열로 만드는 방법

                  가로 메뉴를 만들 때 HTML 목록을 문자열로 변환해야 할 수도 있습니다. 매우 쉽습니다:

                  4.2 아이콘 없이 HTML 목록을 만드는 방법

                  CSS의 list-style-type 속성이 이를 담당합니다(자세한 내용).

                  4.3 HTML에서 목록을 중앙에 배치하는 방법

                  목록 항목은 블록 요소이므로 패딩을 사용하여 중앙에 배치해야 합니다. 그러나 한 가지 중요한 점이 있습니다. 정렬이 작동하려면 너비를 명시적으로 지정해야 합니다.

                  4.4 HTML로 사진으로 목록을 만드는 방법

                  CSS 속성 list-style-image 하나만으로 충분합니다. URL 내에서 아이콘 앞에 주소를 지정하세요. 목록 줄의 높이가 이에 따라 달라지기 때문에 작은 이미지를 즉시 선택하는 것이 더 낫다는 점을 참고하고 싶습니다.

                  4.5 글머리 기호 목록 HTML 글머리 기호 목록

                  이 경우 글꼴 아이콘을 미리 연결해야 합니다(예: FontAwesome ). 그런 다음 표준 마커 대신 어떤 아이콘이라도 만들 수 있습니다.

                  4.6 여러 열의 HTML 목록을 만드는 방법

                  여러 열의 목록을 만들기 위해 CSS 열 개수 속성을 사용합니다(이 속성은 IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+ 브라우저에서만 지원됩니다). 또한 여러 열로 분할된 내용을 보려면 목록의 높이를 설정해야 합니다.

                  5. 목록 작업 연습

                  아래 비디오에서는 실제로 HTML 목록을 사용한 모든 작업을 볼 수 있습니다.