HTML 목록 스타일

• 목록은 형식화된 방식으로 데이터를 배치하기 위한 일반적인 요구 사항입니다. 예를 들어 호텔의 피자 메뉴 콘텐츠를 표시해야 하는 웹페이지를 만든 경우 HTML 목록 스타일이 될 가능성이 높습니다. 명확하고 분리된 방식으로 나타납니다.
• 다른 경우로는 학급의 최고 성과자 사이에 나타난 일련의 학생들이 있는 경우가 있습니다. 이러한 맥락에서 요구 사항은 순위가 오름차순으로 1위 학생을 맨 위에 배치하고 다른 학생을 그 아래에 배치하는 것입니다. 이를 위해 이를 정렬된 목록으로 형식화해야 합니다.
• 또 다른 유형은 Javascript와 Html을 함께 사용하여 만들 수 있는 사용자 정의 목록으로, 개체의 역학도 설정할 수 있으며 목록에 사용자 정의된 전망을 적용할 수 있습니다.

HTML의 다양한 목록 스타일

다음은 다양한 HTML 목록 스타일에 대한 설명입니다.

1) 순서가 지정되지 않은 목록

여기서 콘텐츠 표시 순서는 신경 쓸 필요가 없습니다. HTML 페이지에서 사용자 앞에 형식이 잘 맞고 명확한 방식으로 배치되도록 항목을 잘 배치하면 됩니다.

HTML 언어에는 이러한 목록을 처리하는 태그가 두 개 있으며, 이 태그만 사용하여 탐색 바와 세로 사이드바를 만들 수 있습니다.

1. : 순서가 지정되지 않은 목록을 나타냅니다. 순위를 매길 필요가 없거나 무작위 순서로 배치할 필요가 없을 때마다 이 태그가 통합됩니다.
3. : 이는 목록 항목, 즉 순서가 지정되지 않은 목록, 즉
   아래에 배치될 항목 세트를 나타냅니다. 태그는
   • 꼬리표. 이러한 마크업으로 표시된 항목은 시작 부분에 자동으로 글머리 기호나 원이 표시됩니다. 이것이 기본 HTML 기능입니다.

이제

에 대한 코드를 살펴보겠습니다. 그리고
• 순서가 지정되지 않은 목록을 기반으로 하며 HTML 페이지가 어떻게 보이는지; 해당 파일을 실행한 후에는 메모장과 같은 편집기에서 작성하고 ".html" 확장자로 파일을 저장할 수 있습니다. 따라서 어떤 브라우저에서든 열 수 있습니다.

  예제 조각 –

  코드:

   HTML Lists 
  
  <h2> list of pizzas <h2>
  <ul>
  <li style="color:red"> farmhouse </li>
  <li style="color:green"> peppy paneer </li>
  <li style="color:blue"> onion pizza </li>
  </ul>
  
  </h2>
  </h2>

  출력:

  

  2) 순서가 지정된 목록

  이제 수업 순위에 따라 학생들을 순서대로 배치하는 경우를 살펴보겠습니다. 이는

  HTML의 태그이며 여러 개의
  1. 태그에는 목록 항목이 포함됩니다.
     : 이 태그는 순서가 지정된 목록을 설정하는 데 사용되며 모든 요소는 그 안에 있는
     1. 태그.
     2. 태그에 대해서는 위에서 설명했습니다.

        이 경우에도 예시를 보시고 위와 같이 저장을 해주시면 됩니다.

        코드:

         HTML Lists 
        
        <h2> list of students <h2>
        <ol>
        <li style="color:red"> John </li>
        <li style="color:green"> Harris </li>
        <li style="color:blue"> Plunket </li>
        </ol>
        
        </h2>
        </h2>

        출력/HTML 페이지

        

        이제 HTML 페이지에 CSS 속성을 추가하여 목록을 사용자 정의하거나 형식을 잘 지정할 수 있는 몇 가지 변형을 살펴보겠습니다. 이렇게 하면 페이지 모양이 더 좋아집니다.

        1. 순서가 지정되지 않은 목록에는 다음과 같은 속성을 부여할 수 있습니다.
        2. 목록 스타일 유형 – 디스크, 원형, 정사각형 또는 없음이 될 수 있습니다. 따라서 여기서 없음을 선택하면 순서가 지정되지 않은 목록 항목에 표시된 원이 표시되지 않습니다.

        예 –

        코드:

         HTML Lists 
        
        <h2> list of students <h2>
        <ul style="list-style-type:none">
        <li style="color:red"> John </li>
        <li style="color:green"> Harris </li>
        <li style="color:blue"> Plunket </li>
        </ul>
        
        </h2>
        </h2>

        출력/HTML 페이지 –

        

        그래서 원형 글머리 기호는 더 이상 존재하지 않습니다. 위에 제공된 옵션을 사용하여 맞춤설정할 수 있습니다.

        마찬가지로 주문 목록 값을 숫자, 로마자, 알파벳으로 표시할지 여부를 선택하는 조항이 있습니다.

        에서 속성 유형을 설정할 수 있습니다. 동일한 태그를 사용하며 유형은 다음 값을 사용할 수 있습니다.

        유형: “1”,” A”,” a”, “I”,” i.”

        동일한 예제 코드를 살펴보겠습니다 –

        코드:

         HTML Lists 
        
        <h2> list of students <h2>
        <ol type="i">
        <li style="color:red"> John </li>
        <li style="color:green"> Harris </li>
        <li style="color:blue"> Plunket </li>
        </ol>
        
        </h2>
        </h2>

        출력/HTML 페이지 –

        

        마찬가지로 설명을 추가해야 하는 항목을 정의할 수 있는 설명 목록도 있습니다. 일부 키워드에 대한 몇 가지 정의를 배치해야 하는 페이지를 만들고 있다고 가정하면 설명 목록을 선택할 수 있습니다.

        태그

        동일한 작업을 처리하기 위해 다음과 같은 태그가 있습니다.

         

        – 이 태그는 설명 목록을 정의합니다
        – 이 태그는 설명 용어를 제공합니다
        – this tag carries the description of each term

        Example –

        Code:

         HTML Lists 
        
        <h2> list of students <h2>
        <dl>
        <dt style="color:red"> Docker </dt>
        <dd> -: this is used to make environment portable application containers </dd>
        <br>
        <dt style="color:green"> Kubernetes </dt>
        <dd> -: this is an orchestrator for those containers make by docker </dd>
        </dl>
        
        </h2>
        </h2>

        Output/HTML page –

        

        You can also define the start property in the ordered lists in

        tag, which tells from where the count starts. Let’s see an example of the same –

        Code:

         HTML Lists 
        
        <h2> list of students <h2>
        <ol type="1" start="10">
        <li style="color:red"> John </li>
        <li style="color:green"> Harris </li>
        <li style="color:blue"> Plunket </li>
        >
        
        </ol>
        </h2>
        </h2>

        Output:

        

        Conclusion

        So we saw various lists in which we can place data; this data can be rendered from the model to view using javascript frameworks; what we have shown is a static page, and it can be made dynamic with JS. These lists can be formatted with bootstrap to make them look like navbars or sidebars too.

위 내용은 HTML 목록 스타일의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!