HTML 목록의 3가지 유형과 사용 방법

핵심 사항

정렬된 목록, 정렬되지 않은 목록 및 설명 목록.

정렬된 목록은 숫자 또는 숫자가 아닌 지정을 사용하여 요소를 정렬합니다. ‘유형’ 속성은 개인화된 설정을 가능하게 하며, ‘시작’ 및 ‘반전’ 속성은 목록 순서의 초기 배치와 방향을 조절합니다.

정렬되지 않은 목록은 미리 정해진 순서가 없는 항목의 컬렉션을 표시하는 데 사용되며, CSS(Cascading Style Sheet)를 활용하여 모양을 조정할 수 있습니다.

HTML 목록은 웹사이트에 표시되는 상호 연결된 정보의 집합을 위한 기본적인 구조적 구성 요소 역할을 합니다. 메뉴와 같은 탐색 도구를 구성하거나, 할인된 가격으로 제공되는 기사를 강조하거나, 복잡한 데이터를 보다 일관되고 이해하기 쉬운 형식으로 설명하려고 할 때, 이러한 목록은 만족스러운 결과를 얻기 위해 필요한 리소스를 제공합니다.

HTML 목록은 세 가지 주요 유형으로 분류되며, 각 유형은 웹 디자인 및 개발 내에서 고유한 기능적 역할을 수행합니다.

정렬 목록

HTML의 정렬 목록은 일련의 연결된 항목을 특정 순서로 정렬하는 효율적인 방법입니다. 새로운 정렬 목록을 생성하려면

태그를 적용해야 합니다. 이 태그는 목록 내의 각 항목을 나타내는 개별
1. 요소를 수집하고 묶습니다.

    <!-- Ordered list -->
   <ol> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     <li>Item 4</li>
   </ol> 

   주어진 코드는 ‘보기’라고 하는 특정 데이터의 시각적 표현을 생성하는 역할을 합니다.

   

   정렬된 목록을 사용할 때 표준 배열은 본질적으로 숫자 배열이라는 점을 인식하는 것이 중요합니다. 하지만 ‘유형’ 속성을 사용하여 이 구성을 변경할 수 있습니다. 이 속성은 목록의 구성을 결정하는 요소를 제어할 수 있는 권한을 부여합니다. 알파벳 대문자 또는 소문자, 아라비아 숫자, 대문자 또는 소문자 형식의 로마 숫자 등 여러 가지 옵션을 선택할 수 있습니다.

    <!-- Ordered list -->
   <ol type="a"> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     <li>Item 4</li>
   </ol> 

   ”

   ” 마크업 내에 “type” 속성을 통합하면 다음과 같이 수정된 관점이 생성됩니다.

   

   요소는 앞서 언급한 “type” 속성과 함께 “start” 및 “reversed” 속성을 활용하여 보강할 수도 있습니다.

   “start” 속성을 사용하면 정수 표현을 활용하여 시퀀스의 어느 지점부터든 리스팅을 시작할 수 있습니다. 예를 들어,

   태그에 특정 주문 유형에 대한 지정을 생략하고 “start=3″을 포함하면 숫자 3부터 목록 정리가 시작됩니다.”type=’a'” 또는 “type=’I'”가 지정되면 각각 ‘c’ 또는 ‘III’부터 배열이 시작됩니다.

    <!-- Ordered list -->
   <ol type="I" start="3"> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     <li>Item 4</li>
   </ol> 

   앞서 언급한 코드는 주어진 데이터의 시각적 표현, 즉 ‘뷰’를 생성하여 정보를 이해하기 쉽도록 명확하고 체계적으로 표시합니다.

   

   ‘반전’ 속성을 사용하면 이어지는 목록의 순차 배열을 변경할 수 있습니다. 이 특성은 기본값이 거짓인 부울 값을 입력으로 받습니다.

    <!-- Ordered list -->
   <ol reversed="true"> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     <li>Item 4</li>
   </ol> 

   앞서 언급한 프로그램은 인터페이스에 다음과 같은 후속 표시를 생성합니다:

   

   정렬되지 않은 목록

   정렬되지 않은 목록을 사용하면 순서에 따라 중요하지 않은 항목을 그룹화할 수 있습니다. 브라우저에서 사용하는 기본 표현은 목록 내의 각 개별 항목을 나타내는 글머리 기호로 구성됩니다.

   비정형 목록을 생성하려면

   HTML 태그를 부모 요소로 사용하고 목록 내의 모든 개별 항목에
   • 태그를 활용해야 합니다:

      <ul>
       <li>Item 1</li>
       <li>Item 2</li> 
       <li>Item 3</li> 
       <li>Item 4</li>
     </ul> 

     주어진 코드는 “보기”라고 하는 웹 페이지에서 데이터의 특정 시각적 표현을 생성하고 표시하는 함수를 실행합니다. 구체적으로, 이 코드는 해당 데이터를 표현하기 위해 SVG(Scalable Vector Graphics) 요소를 생성하는 역할을 하는 ‘SVGWidget’이라는 클래스의 인스턴스를 생성합니다. 그런 다음 자바스크립트의 DOM 조작 기능을 사용하여 결과 보기가 HTML 문서의 `` 요소에 추가됩니다.

     

     일반적으로 비정형 목록에 사용되는 표준 글머리 기호는 일반적으로 “디스크”라고 하는 둥근 모양으로 표시됩니다. 예전에는 “유형” 속성의 기능을 사용하여 정렬되지 않은 목록의 시각적 모양을 지정할 수 있었습니다. 안타깝게도 이 기능은 더 이상 사용되지 않는 것으로 간주되어 중단되었습니다. 현재 정렬되지 않은 목록의 디자인 요소를 수정하는 데 선호되는 방법은 더 광범위한 사용자 정의 옵션을 제공하는 CSS “목록 스타일 유형” 속성을 구현하는 것입니다.

      <style>
     ul { list-style-type: square; } 
     </style> 

     앞서 언급한 코드는 아래와 같이 뷰의 표시를 수정합니다:

     

     CSS 목록 스타일 유형 속성을 사용하면 원형 모양, 사용자 지정 이미지, 아이콘 및 기호와 같은 다양한 글머리 기호 스타일을 활용할 수 있습니다. 목록 항목의 배열을 변경하는 CSS를 사용하면 정렬되지 않은 목록을 활용하여 탐색 메뉴를 구성할 수 있습니다.

     중첩 목록

     중첩 목록은 하위 목록 항목으로 구성되며, 데이터 포인트 간의 복잡한 관계를 반영하기 위해 다양한 방식으로 구성할 수 있습니다.이러한 계층적 표현의 구성에는 필요에 따라 열거형 및 글머리 기호 목록 형식을 모두 사용하는 것이 포함됩니다.

      <H3>Chicken Pasta Insturctions</H3>
     <ol> 
       <li>Boil pasta.</li> 
       <li>
        Season chicken breast.
         <ul> 
           <li>salt and pepper</li> 
           <li>paprika</li> 
           <li>garlic powder</li> 
           <li>Italian seasoning</li> 
         </ul>
       </li>
       <li>Heat olive oil in pot over medium-high heat.</li> 
       <li>Add chicken breast to pan and cook for 5 minutes.</li> 
       <li>Add heavy cream and parmesan cheese to empty pot.</li> 
       <li>Add pasta and slice chicken to cream sauce.</li>
     </ol> 

     주어진 코드는 “보기”라고 하는 특정 데이터의 시각적 표현을 생성하는 역할을 담당합니다. 특히 정보에 대한 특정 관점의 렌더링을 생성하며, 이는 정보의 본질적인 특성과 관계를 설명하는 역할을 합니다.

     

     설명 목록

     `

     ` HTML 태그는 특정 용어 또는 문구를 나타내는 일련의 `

     ` 태그를 포함하는 설명 목록을 만드는 데 사용되며, 해당 `

     ` 태그는 각 용어와 관련된 자세한 설명 또는 정의의 형태로 보충 정보를 제공합니다.

      <h3>Popular Laptops</h3>
     <dl>
       <dt>MacBook Pro</dt> 
       <dd> 
         Provides up to 22 hours of battery life, 
         has an advanced camera, and a magic keyboard with touch ID. 
       </dd>
     
       <dt>MSI GS76 Stealth</dt> 
       <dd>
         A powerful gaming laptop with supercharged graphics and customized keys. 
       </dd>
     </dl> 

     앞서 언급한 코드는 다음과 같은 관점을 생성합니다.

     

     올바른 HTML 목록으로 콘텐츠 구성

     웹 개발 작업에서 어떤 HTML 목록을 활용할지 결정할 때는 사이트 방문자에게 전달할 정보의 특성을 고려하는 것이 필수적입니다. 레시피의 준비 지침이나 작업 완료를 위한 단계별 가이드와 같이 선형적인 데이터 시퀀스를 제공해야 하는 경우에는 정렬된 목록을 사용하는 것이 가장 적합합니다.

     체크리스트와 같이 순차적인 배열이 필요하지 않은 콘텐츠의 구성을 고려할 때는 정렬되지 않은 목록을 활용하는 것이 더 나은 대안이 될 수 있습니다. 또한 자주 제기되는 질문에 대한 포괄적인 용어집이나 카탈로그를 제시하고자 하는 경우에는 설명 목록을 사용하는 것이 더 적합한 것으로 간주됩니다.

     이 글도 확인해 보세요:  내부에서 REST API 호출을 수행하는 방법 VS 코드