HTML5 및 CSS3 프로그래밍 용 중첩 목록 작성 방법 - 인형

비디오: HTML 기초2 / 폼 태그(input text) 2024

경우에 따라 HTML5 페이지에 외곽선이나 다른 종류의 복잡한 데이터를 만들고 싶을 수도 있습니다. 원하는 경우 서로의 목록을 쉽게 중첩 할 수 있습니다. 미국과 호주에서 인기있는 고양이 이름을 설명하는 더 복잡한 목록을 볼 수 있습니다.

이 예제는 목록을 조합하여 작업을 수행합니다. 여기에는 미국과 호주의 두 국가 목록이 있습니다. 각 국가는 H3 제목과 그 안에 다른 (주문한) 목록이 있습니다. 목록 안의 다양한 요소를 중첩 할 수 있지만 페이지의 유효성을 검사하려면 신중하게 작성해야합니다.

이 예제에는 두 개의 요소 만있는 정렬되지 않은 목록이 있습니다. 이러한 각 요소에는 표제와 정렬 된 목록이 포함됩니다. 이 페이지는이 모든 데이터를 비교적 깔끔하게 처리하고 올바르게 검증합니다.

중첩 목록 예제

중첩 된 목록의 전체 코드입니다. html이 여기에 재현됩니다:

nestedList. html

중첩 목록

인기있는 고양이 이름


미국

티거
타이거
최대
스모키
샘



오스트레일리아

오스카
최대 > Tiger
Sam
Misty
다음은이 코드 목록에서 알 수있는 몇 가지 사항입니다.

전체 주 목록을 둘러싼 큰

세트가 있습니다.
- 이들 항목 각각은 국가를 나타냅니다.
- 각 국가에는
- 요소가있어
  안에 국가 이름을 설명합니다.
  각 국가에는 이름 목록이
  설정되어 있습니다.
  1. 코드를 들여 쓰는 법
HTML 코드가 일반적으로 들여 쓰기되어 있음을 눈치 챘을 것입니다. 브라우저는 모든 들여 쓰기를 무시하지만 여전히 중요한 코딩 습관입니다.

코드의 형식을 지정하는 방법에 대한 의견이 많지만 표준 형식은 자신 만의 스타일을 개발할 때까지 잘 서비스 할 것입니다.

일반적으로 HTML 코드를 들여 쓰기하는 데 다음 규칙이 적용됩니다.

중첩 된 각 요소를 들여 씁니다.
- 태그가 요소 안에 있기 때문에 들여 쓰기 할 수 있습니다. 마찬가지로, 요소는 항상
- 또는
  중첩 된리스트의 코드를 살펴볼 때 위협적으로 보일 수 있지만 실제로 그리 어렵지는 않습니다. 비밀은
  
  목록을 외부에 작성하는 것입니다. 먼저 외부 목록을 만듭니다.
  1. 기본 목록 작성 (주문 여부). 이 예에서는 원래 두 국가의 순서가 정해지지 않은 목록 만있었습니다.
    
    목록 항목을 외부 목록에 추가합니다.
  2. 큰 목록에 텍스트 또는 헤드 라인을 표시하려면 여기에 넣을 수 있습니다. 기본 목록에 아무것도 넣지 않고 목록에 넣는 경우 자리 표시 자 태그를 넣어서 모든 것이 제대로 작동하는지 확인할 수 있습니다.
    
    다음 목록 수준을 추가하기 전에 유효성을 검사합니다.
  3. 중첩 목록은 유효성 검사기 (및 사용자)를 혼동시킬 수 있습니다. 내부 목록을 추가하기 전에 외부 목록을 사용하여 코드의 유효성을 검사하여 문제가 없는지 확인하십시오.
    
    첫 번째 내부 목록을 추가합니다.
  4. 기본 구조가 괜찮다는 것을 알게되면 첫 번째 내부 목록을 추가하십시오. 예를 들어, 이것은 미국에서 주문한 고양이 이름 목록이었습니다.
    
    끝날 때까지 반복하십시오.
  5. 페이지가 올바르게 표시 될 때까지 목록을 계속 추가하십시오.
    
    자주 확인하십시오.
  6. 모든 일이 끝날 때까지 기다리는 것보다 검증하는 것이 훨씬 낫습니다. 실수를 일찍 잡아서 복제하지 마십시오.