html에서 ul을 사용하는 방법 목록 항목을 가로로 배치하는 방법은 무엇입니까? Twenty Eleven 템플릿에서 목록 스타일이 작성되는 위치

집 / 브라우저

하이퍼텍스트 마크업 언어 HTML에는 태그가 있습니다.

    , 글머리 기호 목록을 만드는 데 사용됩니다. 모두의 지지를 받고 있습니다 최신 브라우저번호 매기기가 필요하지 않은 순서로 요소를 표시할 수 있습니다. 예를 들어 메뉴 항목과 페이지의 목록과 관련된 모든 항목(요리, 제품, 장비, 도구 등 특정 항목의 우선순위를 표시하지 않고 나열해야 하는 항목)을 매우 자주 표시합니다.

    태그 구문

      • 요소 #1
      • 요소 #2
      • 요소 #3
      • ...

      이 코드는 사이트의 글머리 기호 목록으로 변환됩니다.

      • 요소 #1
      • 요소 #2
      • 요소 #3

      꼬리표

      .

      목록 요소를 형성하기 위해 쌍을 이루는 태그가 사용됩니다. 여는 태그와 닫는 태그 사이에는 글머리 기호 목록의 내용인 개별 단어, 문구, 단락, 이미지, 코드 조각 등이 있습니다.

      글머리 기호 목록의 내용은 무엇입니까?

      이는 단일 단어, 구문 및 단락, 이미지, 중첩 목록, PHP 코드 조각 등 간단한 표시가 필요한 다양한 텍스트가 될 수 있습니다.

      각 글머리 기호 목록 항목은 기본적으로 오른쪽으로 40픽셀 들여쓰기됩니다. 사용 CSS 스타일, 디스플레이를 변경할 수 있습니다 이 목록귀하의 재량에 따라. 꼬리표

        블록 기반이므로 화면 가장자리, 테이블 프레임 또는 기타 페이지 요소에 의해 제한되어 사용 가능한 전체 영역을 차지합니다.

        목록 내 목록 첨부가 허용됩니다.

        예를 들어

        • 요소 #1
          • 항목 #2-1
          • 요소 #2-2
          • 요소 #2-3
        • 요소 #3
        • ...

        태그 속성 및 속성

          널리 사용되는 태그 속성

            목록 마커의 모양을 나타내는 유형 속성입니다. 다음 값을 사용할 수 있습니다.

            1. type="disc" - 채워진 원 형태의 마커(이 값이 기본값임) 디스크 예는 조금 더 높았습니다.

            2. type="circle" - 투명한 원 형태의 마커

            예를 들어:

            • 요소 #1
            • 요소 #2
            • 요소 #1
            • 요소 #2

            3. type="square" - 정사각형 형태의 마커

            예를 들어:

            • 요소 #1
            • 요소 #2

            페이지에 표시되는 내용은 다음과 같습니다.

            • 요소 #1
            • 요소 #2
            참고 1

            CSS에서 글머리 기호 유형은 list-style-type 속성을 사용하여 지정됩니다.

            • ...

            list-style-type이 어떤 값을 취할 수 있는지 살펴 보겠습니다.

            • 디스크 - 원 형태의 마커(위의 예)
            • 원 - 투명한 원 형태의 마커(위 예)
            • square - 정사각형 형태의 마커(예는 위에 있음)
            • 십진수 - 아라비아 숫자(1, 2, 3, ...)로 된 번호 목록 형태의 마커
            • 소수점 앞자리 0 - 앞에 0이 붙은 아라비아 숫자로 된 번호가 매겨진 목록 형태의 표식: 01, 02, 03, ...
            • Lower-roman - 소문자로 된 로마 알파벳의 번호 목록 형태의 마커: i, ii, iii, iv, v
            • 상위 로마자 - 대문자로 된 로마 알파벳 번호 목록 형식의 마커: I, II, III, IV, V
            • 낮은 라틴 - 소문자로 된 라틴 알파벳 목록 형태의 마커: a, b, c, d, ...
            • 상위 라틴 - 대문자 A, B, C, D, ...의 라틴 알파벳 목록 형태의 마커
            • 하급 그리스어 - 소문자로 된 그리스 알파벳 목록 형태의 마커
            • 상위 그리스어 - 대문자로 된 그리스 알파벳 목록 형태의 마커
            참고 2

            속성은 태그 자체에 할당될 수 있습니다.

              , 및 태그
            • . 태그에 속성을 설정할 때
                모든 목록 항목은 속성에 표시된 대로 표시됩니다. 그러나 우리는 이 요소나 저 요소에 고유한 표시를 제공할 수 있습니다. 그림의 예:

                코드는 다음과 같습니다.

                • 요소 #1
                • 요소 #2
                • 요소 #3
                • 요소 #1
                • 요소 #2
                • 요소 #3

                태그 마커 변경
                  CSS를 사용하여

                태그로 생성된 글머리 기호 목록 항목

                  , 임의의 이미지로 표시할 수 있습니다. CSS는 마커 유형을 변경하는 데 사용됩니다. 예를 들어

                  • 요소 #1
                  • 요소 #2
                  • 요소 #3

                  페이지에 표시되는 내용은 다음과 같습니다.

                  • 요소 #1
                  • 요소 #2
                  • 요소 #3

                  기음 CSS를 사용하여다른 유형의 마커 표시를 설정할 수 있습니다. 하지만 태그에 스타일을 지정할 때 기억해야 할 점은

                    , 목록의 모든 요소에 적용됩니다.

                    표준 ul 및 li 목록을 변경하기로 결정했다면 이 주제가 흥미로울 것입니다. 왜냐하면 여기서 당신은 몇 가지를 배울 것이기 때문입니다. 독창적인 솔루션. 이는 목록 디자인을 위해 CSS 스타일이 사용되는 고유한 모양으로 표준 모양을 변경하는 데 확실히 도움이 될 것입니다. 장점은 전체적으로 하나의 클래스만 사용하므로 모양이 근본적으로 바뀔 것이라는 점입니다. 이러한 매개변수 외에도 목록이 시작되는 번호를 지정할 수 있습니다. 여기서 모든 작업을 직접 수행할 수 있습니다. 번호가 매겨진 목록의 기본 시작 값은 첫 번째 또는 문자 A입니다.

                    기본 사항을 살펴보고 이제 디자인의 다양한 부분에 구조와 의미를 제공하는 데 사용되는 요소를 자세히 살펴보겠습니다. 모르는 사람이 있다면 ul과 li가 일반 텍스트보다 훨씬 더 나은 옵션입니다. 특히 텍스트를 줄바꿈할 때 그렇습니다. 휴대전화, 완벽하게 들여쓰기되고 마커 주위를 감싸지 않습니다.

                    목록은 읽기 쉽고 보기에도 좋기 때문에 페이지에 정보를 표시하는 좋은 방법으로 간주됩니다. 많은 사람들이 글머리 기호가 작은 이미지라고 생각하는 것 같지만 실제로는 모두 매우 간단한 HTML 코드를 통해 생성됩니다. 삽입할 수 있습니다. 다른 유형원하는 경우 서로 목록을 나열하고 올바르게 닫는 것을 잊지 마십시오. 이 모든 목록 명령에서 원하는 텍스트를 가지고 놀 수 있습니다.

                    또한 목록에는 처음에 여러 요소가 포함되어 있다는 것도 알아야 합니다.

                    1 . 무질서한 정보.
                    2 . 정보를 정리했습니다.
                    3 . 정의.

                    설치를 시작해 보겠습니다.

                    1. 옵션:


                    • 목록 항목

                    • 고유 목록

                    • 원본 목록

                    • ZORNET.RU-웹마스터

                    • 다른 목록


                    CSS

                    크상겔로판(
                    여백: 19px 0 0;
                    패딩:0;
                    목록 스타일: 없음;
                    카운터 재설정: li;
                    }
                    .ksangelopan 리(
                    테두리: 2px 단색 #3575ad;
                    배경: #d7dee4;
                    위치: 상대;
                    여백 하단: 17px;
                    패딩: 15px 9px;
                    }
                    .ksangelopan li:hover (
                    Z-색인: 1;
                    }
                    .ksangelopan li:이전 (
                    테두리: 2px 솔리드 #2270b3;
                    위치: 절대;
                    상단: -14px;
                    패딩: 3px 9px;
                    글꼴 크기: 11px;
                    글꼴 두께: 굵게;
                    색상: #246eaf;
                    배경: #f2f4f7;
                    역증분: li;
                    내용: 카운터(li);
                    -웹킷 전환 기간: 0.4초;
                    전환 기간: 0.4초;
                    }
                    .ksangelopan li:hover:이전(
                    배경: #2672b3;
                    색상: #f7f9fb;
                    -webkit-transform: 번역(-11px, 0);
                    -ms-변환: 번역(-11px, 0);
                    -o-변환: 번역(-11px, 0);
                    변환: 번역(-11px, 0);
                    }
                    .ksangelopan li:이후 (
                    콘텐츠: "";
                    위치: 절대;
                    전환 기간: 0.3초;
                    -webkit-transition-property: 너비;
                    전환 속성: 너비;
                    Z-색인: -1;
                    배경: #FFF;
                    높이: 100%;
                    왼쪽: 0;
                    상단: 0;
                    너비: 0;
                    }
                    .ksangelopan li:hover:이후 (
                    너비: 100%;
                    }


                    이것이 설치의 전부입니다.

                    2 두 번째 옵션:


                    • 목록 항목

                    • 고유 목록

                    • 원본 목록

                    • ZORNET.RU-웹마스터

                    • 다른 목록


                    CSS

                    벨레두스트로팜게스(
                    여백 하단: 8px;
                    패딩:0;
                    목록 스타일: 없음;
                    카운터 재설정: li;
                    }
                    .beleduzlopamges 리(
                    위치: 상대;
                    테두리: 2px 솔리드 #195588;
                    배경: #eff3f7;
                    패딩: 15px 19px 15px 27px;
                    여백: 12px 0 12px 40px;
                    -웹킷 전환 기간: 0.3초;
                    전환 기간: 0.3초;
                    }
                    .beleduzlopamges li:hover (
                    배경: #FFF;
                    }
                    .beleduzlopamges li:이전 (
                    줄 높이: 32px;
                    위치: 절대;
                    상단: 4px;
                    왼쪽: -39px;
                    너비: 39px;
                    텍스트 정렬: 중앙;
                    글꼴 크기: 16px;
                    글꼴 두께: 굵게;
                    색상: #f9f5f5;
                    배경: #275b88;
                    역증분: li;
                    내용: 카운터(li);
                    전환 기간: 0.2초;
                    }
                    .beleduzlopamges li:hover:before (
                    너비:46px;
                    }
                    .beleduzlopamges li:이후 (
                    위치: 절대;
                    왼쪽: 0;
                    상단: 4px;
                    콘텐츠: "";
                    높이: 0;
                    너비: 0;
                    테두리: 16px 솔리드 투명;
                    테두리 왼쪽 색상: #275b88;
                    -웹킷 전환 기간: 0.2초;
                    전환 기간: 0.2초;
                    }
                    .beleduzlopamges li:hover:after (
                    여백 왼쪽: 6px;
                    }


                    사이트의 기본 스타일에 맞게 중앙 감마를 독립적으로 설정할 수 있습니다.

                    3 세 번째 옵션:


                    • uCoz용 스크립트

                    • uCoz용 템플릿

                    • 웹사이트 디자인

                    • 웹사이트 스타일

                    • CSS를 사용한 스타일링


                    CSS

                    니주알리사네라그(
                    패딩:0;
                    목록 스타일: 없음;
                    카운터 재설정: li;
                    }
                    .nizualisanelag 리(
                    위치: 상대;
                    패딩: 9px 17px 17px 25px;
                    왼쪽 여백: 39px;
                    전환 기간: 0.2초;
                    커서: 포인터;
                    글꼴 두께: 굵게;
                    색상: #343638;
                    }
                    .nizualisanelag li:이전(
                    테두리: 3px 솔리드 투명;
                    줄 높이: 35px;
                    위치: 절대;
                    상단: 0;
                    왼쪽:-29px;
                    너비:41px;
                    텍스트 정렬:가운데;
                    글꼴 크기: 14px;
                    글꼴 두께: 굵게;
                    색상: #619dce;
                    역증분: li;
                    내용: 카운터(li);
                    전환 기간: 0.3초;

                    상자 크기 조정: 테두리 상자;
                    }
                    .nizualisanelag li:hover:이전(
                    색상: #337AB7;
                    }
                    .nizualisanelag li:이후(
                    위치: 절대;
                    상단: 0;
                    왼쪽: -29px;
                    너비: 41px;
                    높이: 41px;
                    테두리: 5px 솔리드 #468bd0;
                    테두리 반경: 50%;
                    콘텐츠: "";
                    불투명도: 0.5;
                    -webkit-box-sizing: 테두리 상자;
                    -moz-box-sizing: 테두리 상자;
                    상자 크기 조정: 테두리 상자;
                    }
                    .nizualisanelag li:hover:after (
                    애니메이션: 500ms 이지인아웃 0초 바운스인;
                    불투명도: 1;
                    }

                    @keyframes 바운스인(
                    0% {
                    불투명도: 0;
                    변환: scale3d(.3, .3, .3);
                    }
                    20% {
                    변환: scale3d(1.3, 1.3, 1.3);
                    }
                    40% {
                    변환: scale3d(.9, .9, .9);
                    }
                    60% {
                    불투명도: 1;
                    변환: scale3d(1.03, 1.03, 1.03);
                    }
                    80% {
                    변환: scale3d(.97, .97, .97);
                    }
                    에게 (
                    불투명도: 1;
                    변환: scale3d(1, 1, 1);
                    }
                    }


                    아름다운 애니메이션과 함께 제공됩니다.

                    4 네 번째 옵션:


                    • 사이트의 첫 번째 요소

                    • 사이트의 두 번째 요소

                    • 사이트의 세 번째 요소

                    • 사이트의 네 번째 요소

                    • 사이트의 다섯 번째 요소


                    CSS

                    패딩:0;
                    목록 스타일: 없음;
                    }
                    .kudezamuden 리(
                    패딩:6px;
                    }
                    .kudezamuden li:이전 (
                    패딩 오른쪽: 11px;
                    글꼴 두께: 굵게;
                    색상: #4979a0;
                    내용: "\2606";
                    전환 기간: 0.4초;
                    }
                    .kudezamuden li:hover:이전 (
                    색상: #235e90;
                    내용: "\2605";
                    }


                    비슷한 이전 버전, 아이콘 자체만 변경되었습니다.

                    일반적으로 이는 웹 마스터가 만들 수 있는 목록의 작은 선택입니다. 좋은 목록포털에서 그는 자신이 보고 싶어하는 대로 더 많은 것을 디자인할 수 있습니다.

                    글머리 기호 대신 번호가 매겨진 목록에 항목을 추가해야 하는 경우 순서가 지정된 HTML이 사용됩니다. 이 목록은 ol 태그를 사용하여 생성됩니다. 번호 매기기는 1부터 시작하고 li 태그가 있는 각 후속 정렬 목록 요소에 대해 1씩 증가합니다.

                    유일한 차이점은 이 태그가 번호 매기기 목록용으로 엄격하게 만들어졌다는 것입니다. 태그의 이름은 숫자가 매겨진 목록인 영어 약어 "Ordered List"에서 유래되었습니다.

                    태그 구문

                      1. 요소 #1
                      2. 요소 #2
                      3. 요소 #3
                      4. ...

                  type="value" 속성은 다음 값을 가질 수 있습니다.

                  • A - 라틴 대문자(A, B, C..) 형식으로 마커를 설정합니다.
                  • a - 라틴 소문자(a, b, c..) 형식으로 마커를 설정합니다.
                  • I - 큰 로마 숫자(I, II, III, IV..) 형태로 마커를 설정합니다.
                  • i - 작은 로마 숫자 형태로 마커를 설정합니다(i, ii, iii, iv..).
                  • 1(기본값) - 아라비아 숫자(1, 2, 3..) 형식으로 마커를 설정합니다.

                  start="value" 속성은 보고서의 초기 값(시작 값)을 지정합니다.

                  reversed 속성은 역방향 계산(필요한 경우)을 지정합니다.

                  꼬리표

                    닫는 태그를 의무적으로 사용해야 합니다.

                  목록 요소를 형성하기 위해 쌍을 이루는 태그가 사용됩니다.

                • . 여는 태그와 닫는 태그 사이에는 글머리 기호 목록의 내용인 개별 단어, 문구, 단락, 이미지, 코드 조각 등이 있습니다.

                  메모

                  목록 내에서 계정을 자신의 계정으로 변경할 수 있습니다. 이 목적을 위해 태그에 특수 속성 value=""가 있습니다.

                • , 이는 일부 할당됨 숫자 값. 예를 들어

                  1. 요소 #1
                  2. 요소 #2
                  3. 요소 #3

                html에서 번호가 매겨진 목록의 예(
                  )

                예 1. 라틴 문자로 된 HTML 번호 매기기 목록

                대문자의 예

                1. 요소 #1
                2. 요소 #2
                3. 요소 #3
                1. 요소 #1
                2. 요소 #2
                3. 요소 #3

                소문자의 예

                1. 요소 #10
                2. 요소 #11
                3. 요소 #12

                페이지에 표시되는 내용은 다음과 같습니다.

                1. 요소 #1
                2. 요소 #2
                3. 요소 #3

                예 2. 로마자로 된 HTML 번호 매기기 목록

                대문자의 예

                1. 요소 #1
                2. 요소 #2
                3. 요소 #3

                페이지에 표시되는 내용은 다음과 같습니다.

                1. 요소 #1
                2. 요소 #2
                3. 요소 #3

                소문자의 예

                1. 요소 #1
                2. 요소 #2
                3. 요소 #3

                페이지에 표시되는 내용은 다음과 같습니다.

                1. 요소 #1
                2. 요소 #2
                3. 요소 #3

                예 3. 번호가 매겨진 목록 HTML의 시작 위치가 다름

                카운터의 시작 값을 설정할 수 있는 시작 속성의 기능을 보여주는 예입니다.

                1. 요소 #1
                2. 요소 #2
                3. 요소 #3

                페이지에 표시되는 내용은 다음과 같습니다.

                1. 요소 #1
                2. 요소 #2
                3. 요소 #3

                예 4. HTML 번호 매기기 목록의 개수 변경

                다음은 태그에 새 요소를 표시할 때 value 속성을 사용하여 카운터 값을 변경하는 기능이 있는 예입니다.

              • .

                1. 요소 #1
                2. 요소 #2
                3. 요소 #3
                4. 요소 #4

                페이지에 표시되는 내용은 다음과 같습니다.

                1. 요소 #1
                2. 요소 #2
                3. 요소 #3
                4. 요소 #4

                예 5. HTML의 역순 번호 목록

                다음은 역순으로 번호가 매겨진 목록의 예입니다(역순으로 계산).

                1. 요소 #1
                2. 요소 #2
                3. 요소 #3
                4. 요소 #4

                페이지에 표시되는 내용은 다음과 같습니다.

                1. 요소 #1
                2. 요소 #2
                3. 요소 #3
                4. 요소 #4

                요소

                  (영어 "unordered list"에서) 글머리 기호(순서가 지정되지 않은) 목록을 만듭니다. 일반적으로 요소는
                    이 목록의 항목 순서를 변경해도 목록의 의미가 크게 변경되지 않는 목록을 만드는 데 사용됩니다.

                    꼬리표

                      블록 요소를 참조하므로 사용 가능한 전체 너비를 차지하며 높이의 크기는 콘텐츠의 양에 따라 달라집니다.

                      번호가 매겨진 목록의 항목은 태그를 사용하여 정의됩니다.

                    • , 여기에는 텍스트 외에도 다른 HTML 요소(목록, 이미지, 제목, 단락 등)가 포함될 수 있습니다. 기본적으로 글머리 기호 목록작은 검은색 원으로 시작하는 목록으로 웹 페이지에 표시됩니다. 브라우저는 목록 항목을 표시할 때 왼쪽에 작은 여백을 추가합니다.

                      메모:만약에

                        적용됩니다 CSS 속성, 요소
                      • 이러한 속성을 상속받습니다.

                        조언:마커 유형을 변경하려면 마커를 이미지로 대체할 수 있는 list-style-type CSS 속성 또는 list-style-image 속성을 사용하세요. 번호가 매겨진 목록을 만들려면 태그를 사용하세요.

                          .

                          통사론

                            ...
                          • ...
                            • ...

                          닫는 태그

                          필수의.

                          속성

                          CompactDeprecated in HTML5 들여쓰기 및 줄 간격을 줄입니다. type HTML5 목록 표시자의 유형을 설정합니다.

                          이 항목에 사용 가능 전역 속성그리고 이벤트.

                          기본 스타일

                          대부분의 브라우저는 요소를 표시합니다

                            다음과 함께 CSS 값기본:

                            Ul( 디스플레이: 블록; 목록 스타일 유형: 디스크; margin-top: 1em; margin-bottom: 1 em; margin-left: 0; margin-right: 0; padding-left: 40px; )

                            HTML 4.01과 HTML5의 차이점

                            HTML5에서는 Compact 및 type 속성이 지원되지 않습니다.

                            사용 예:

                            순서가 지정되지 않은 HTML 목록:

                            HTML 예:

                            직접 시도해 보세요
                            • 커피
                            • 차
                            • 코코아

                            명세서

                            사양 상태
                            WHATWG HTML 리빙 스탠다드(WHATWG) 생활 수준
                            HTML 4.01(W3C) 추천
                            HTML5(W3C) 추천
                            HTML 5.1(W3C) 추천

                            브라우저 지원

                            직접 시도해 보세요 - 예

                            목록이 1이 아닌 숫자로 시작하도록 하려면 어떻게 해야 합니까?

                            HTML의 시작에 대한 대화를 계속합시다. 이번 글에서는 텍스트에서 단락, 목록, 제목을 만드는 방법에 대해 이야기하고 싶습니다. 그리고 단일 태그에 대해서도
                            그리고

                            .

                            이 시리즈의 첫 번째 강의와 HTML에 아직 익숙하지 않은 사람들을 위해 HTML 공부 시작에 대한 소개 기사를 읽어 보시기를 강력히 권합니다.

                            이제 우리는 계속해서 태그를 연구할 것입니다. 나는 독자가 이미 위 기사의 내용을 잘 알고 있다고 가정합니다.

                            언제나 그렇듯이 작업 계획은 다음과 같습니다.

                            1. 단락
                            2. 줄 바꿈
                            3. 목록 및 목록 요소
                            4. 제목
                            5. 가로 눈금자

                            단락

                            텍스트는 거의 항상 단락으로 구성됩니다. 단락은 완전한 생각을 전달하는 텍스트 요소입니다.

                            html에서는 제목에서 알 수 있듯이 단락을 로 표시합니다. 문자 "p"는 "단락"을 의미하는 단어 "paragraph"에서 따왔습니다.

                            예를 살펴보겠습니다:

                            첫 번째 단락의 텍스트입니다. 생각이 담겨 있습니다. 그러나 이제 그 생각은 끝났습니다.


                            또 다른 생각이 이미 시작되었고 우리는 그것을 다른 문단에 씁니다.

                            보시다시피 단락 사용은 매우 간단하며 특별한 설명이 필요하지 않습니다. 브라우저에서 이 코드를 보면 두 줄 사이에 빈 줄이 하나 있는 것을 볼 수 있습니다. 러시아어 텍스트에서는 빈 줄이 아닌 첫 번째 줄을 오른쪽으로 이동하여 단락을 구분하는 것이 일반적입니다. 그러나 이것은 바로 인터넷에서 자주 사용되는 형식이므로 러시아어 텍스트에 남는 경우가 많습니다. 그러나 이 동작이 마음에 들지 않으면 CSS를 사용하여 변경할 수 있습니다.

                            줄 바꿈

                            때로는 생각을 끝내거나 문단을 닫지 않은 채 한 줄을 번역해야 할 때도 있습니다. 즉, 새로운 줄로 이동하십시오. 이에 대한 단일 태그가 있습니다.
                            . 다음은 그 사용 예입니다:

                            바람이 기분좋게 분다

                            그리고 배의 속도는 빨라진다

                            그는 파도 속을 달리고 있다
                            돛을 올린 채.

                            A.S. 푸쉬킨은 태그의 동작을 설명하는 데 도움을 주었습니다.
                            . 나는 이 quatrain의 마지막 두 줄을 한 줄의 코드에 특별히 배치하여 줄 바꿈을 배치했기 때문이 아니라 태그를 배치했기 때문에 해당 줄이 새 줄로 전송된다는 것을 보여줍니다.
                            . 이 태그는 매우 간단하고 자세한 설명이 필요하지 않으므로 여기서는 더 이상 논의하지 않겠습니다.

                            기울기,
                              및 목록 요소

                            때로는 텍스트에 무언가를 나열해야 할 때도 있습니다. 이를 위해 ul, ol, li의 세 가지 태그가 사용됩니다. 이러한 태그는 모두 컨테이너 태그이지만 태그는 항상 또는 컨테이너 중 하나에 포함되며 컨테이너 외부에서는 의미가 없습니다. ul 컨테이너는 나열된 항목의 순서에 관심이 없고 항목이 나타나는 순서에 초점을 맞추고 싶지 않을 때 사용됩니다. 반대로 ol 태그는 요소의 순서에 주의를 집중시켜 각 줄에 자동으로 번호를 매깁니다. 예를 살펴보겠습니다:


                            • 혈액 요소 질소

                            • 파이

                            • 덩어리

                            • 파이

                            브라우저 화면에서 이 코드는 다음과 같습니다.

                            • 혈액 요소 질소
                            • 파이
                            • 덩어리
                            • 파이

                            단순히 ul 태그를 ol 태그로 바꾸면 번호가 매겨진 목록이 표시됩니다.


                            1. 혈액 요소 질소

                            2. 파이

                            3. 덩어리

                            4. 파이

                            이제 다음과 같이 보입니다.

                            1. 혈액 요소 질소
                            2. 파이
                            3. 덩어리
                            4. 파이

                            어느 누구도 한 목록을 다른 목록 안에 중첩하여 하위 목록으로 중첩 목록을 형성하는 것을 금지하지 않습니다.


                              도구:
                            • 봤다

                            • 드라이버

                              1. 똑바로

                              2. 십자가



                            • 송곳

                            이 목록을 사용하는 데 익숙해지려면 이 목록을 약간 실험해 볼 필요가 있습니다. 또 다른 유형의 목록이 있지만 거의 사용되지 않으므로 지금은 이야기하지 않겠습니다. 아마도 다른 기사에 있을 겁니다.

                            물론 다른 모든 것과 마찬가지로 모습이러한 요소는 CSS를 사용하여 인식할 수 없을 정도로 수정될 수 있습니다.

                            제목

                            물론 단락은 문서 구조화에 도움이 됩니다. 그러나 큰 텍스트를 더 작은 논리적 부분으로 나누려면 각 부분에 제목을 붙일 수 있습니다. 각 부분에는 자체 하위 수준 제목 등을 포함한 추가 하위 부분이 포함될 수 있습니다. 제목을 설정하려면 태그를 사용하세요. , 여기서 "x"는 1부터 6까지의 숫자입니다. 숫자가 높을수록 제목이 낮아집니다. 즉, 최상위 제목은 h1, 하단 제목은 h6이라고 합니다. 기본적으로 이러한 제목의 텍스트는 큰 글꼴로 들여쓰기되어 표시됩니다. 이 텍스트는 전체 행에 표시됩니다. 즉, hx 태그는 블록 태그입니다. h1 태그의 글꼴이 가장 크고, h6 태그의 글꼴이 가장 작습니다. 일반적으로 페이지에는 최상위 h1 태그가 1개, 최대 2개 있습니다. 레벨이 낮아질수록 태그 수가 늘어납니다. 그러나 웹마스터가 레벨 5 또는 6 제목이 필요할 정도로 텍스트를 분할할 수 있는 경우는 거의 없습니다. 레벨 4도 거의 사용되지 않습니다.

                            더 적은 말, 더 많은 행동!

    편집자의 선택

    © 2024 ermake.ru - PC 수리 정보 - 정보 포털