03 HTML List, Table, Form_1. List

  ● 정렬되지 않은 목록(<ul>) 및 정렬된 목록(<ol>)

   - 정렬되지 않은 목록(<ul>):
비순차 목록은 특정 순서가 없는 항목 모음을 나타내는 데 사용됩니다. 기본적으로 정렬되지 않은 목록의 각 항목 앞에는 글머리 기호가 있습니다. <ul> 요소는 정렬되지 않은 목록을 만드는 데 사용되며 각 개별 항목은 <li>(목록 항목) 요소를 사용하여 정의됩니다.
다음은 정렬되지 않은 목록의 예입니다.

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

위의 코드는 각각 글머리 기호로 표시되는 세 개의 항목이 있는 정렬되지 않은 목록을 렌더링합니다.

 

    - 정렬된 목록(<ol>):
정렬된 목록은 항목을 특정 순서로 표시해야 하는 경우에 사용됩니다. 정렬된 목록의 각 항목에는 숫자(기본적으로 십진수)가 할당됩니다. <ol> 요소는 정렬된 목록을 만드는 데 사용되며 각 개별 항목은 <li> 요소를 사용하여 정의됩니다.
다음은 정렬된 목록의 예입니다.

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

위의 코드는 세 개의 항목이 있는 정렬된 목록을 렌더링하며 각 항목에는 숫자가 표시됩니다.

 

정렬되지 않은 목록과 정렬된 목록은 서로 중첩되어 계층 구조를 만들 수 있습니다. 예를 들어:

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

위의 예에는 3개의 항목이 있는 순서 없는 목록(<ul>)이 있고 두 번째 항목에는 중첩된 순서 없는 목록이 포함되어 있습니다. 이렇게 하면 기본 목록 내에 하위 목록을 만들 수 있습니다.

CSS를 사용하여 글머리 기호 스타일, 간격, 들여쓰기 등을 변경하여 이러한 목록의 모양을 추가로 사용자 정의할 수 있습니다.

 

  ● 목록 항목(<li>) 및 중첩 리스트

    - 항목 나열(<li>):
<li>(목록 항목) 요소는 목록 내의 개별 항목을 정의하는 데 사용됩니다. 목록 항목은 순서가 없는 목록(<ul>) 또는 순서가 있는 목록(<ol>) 내에서 사용됩니다. 각 <li> 요소는 목록 내의 단일 항목 또는 항목을 나타냅니다.
다음은 정렬되지 않은 목록에서 목록 항목을 사용하는 예입니다.

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

위의 코드에서 각 <li> 요소는 정렬되지 않은 목록 내의 항목을 나타냅니다. 목록 항목은 기본적으로 글머리 기호로 표시됩니다.

 

    - 중첩 리스트:
중첩 리스트를 사용하면 기본 목록 항목 내에 하위 목록을 만들 수 있습니다. 정렬되지 않은 목록(<ul>) 또는 정렬된 목록(<ol>)을 목록 항목(<li>) 안에 중첩할 수 있습니다. 계층 구조나 다단계 목록을 만들어야 할 때 유용합니다.
다음은 정렬되지 않은 목록 내에서 중첩된 리스트를 사용하는 예입니다.

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

위의 코드에서 두 번째 목록 항목(<li>)에는 중첩된 정렬되지 않은 목록(<ul>)이 포함됩니다. 이렇게 하면 기본 목록 내에 하위 목록이 생성됩니다.

목록 항목과 중첩 리스트를 사용하여 HTML에서 구조화되고 조직화된 콘텐츠를 만들 수 있습니다. 계층 구조를 포함하여 다양한 유형의 정보를 목록 형식으로 표현할 수 있습니다.

 

  ● 목록 및 목록 항목에 속성 추가하기 Adding attributes to lists and list items

    - 목록에 속성 추가:
<ul> 또는 <ol> 요소로 표시되는 목록에는 추가 정보를 제공하거나 동작을 제어하기 위해 다양한 속성이 추가될 수 있습니다. 목록에 일반적으로 사용되는 속성은 다음과 같습니다.
  > class: CSS 스타일을 적용하거나 JavaScript 조작을 위해 하나 이상의 클래스 이름을 지정합니다.
  > id: 목록 요소에 대한 고유 식별자를 제공하며 CSS 또는 JavaScript로 타겟팅하는 데 사용할 수 있습니다.
  > style: 인라인 CSS 스타일을 목록 요소에 직접 적용할 수 있습니다.
  > title: 목록에 대한 툴팁 또는 추가 정보를 제공합니다.
다음은 정렬되지 않은 목록에 속성을 추가하는 예입니다.

<ul class="my-list" id="unique-list" style="color: red;" title="This is my list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

위의 코드에서 <ul> 요소에는 class 속성이 "my-list"로 설정되고 id 속성이 "unique-list"로 설정되고 style 속성 설정이 있습니다. 텍스트 색상은 빨간색으로, title 속성은 목록에 대한 추가 정보를 제공합니다.

 

    - 목록 항목에 속성 추가:
개별 목록 항목(<li>)에는 추가 정보를 제공하거나 동작을 제어하기 위해 속성이 추가될 수도 있습니다. 목록 항목에 일반적으로 사용되는 속성은 다음과 같습니다.
  > class: CSS 스타일을 적용하거나 JavaScript 조작을 위해 하나 이상의 클래스 이름을 지정합니다.
  > id: 목록 항목에 대한 고유 식별자를 제공하며 CSS 또는 JavaScript로 타겟팅하는 데 사용할 수 있습니다.
  > style: 인라인 CSS 스타일을 목록 항목에 직접 적용할 수 있습니다.
  > value: 목록 항목과 관련된 값을 지정하며 특히 순서가 지정된 목록(<ol>)에서 유용합니다.
다음은 목록 항목에 속성을 추가하는 예입니다.

<ul>
  <li class="highlight">Item 1</li>
  <li id="unique-item" style="font-weight: bold;">Item 2</li>
  <li value="3">Item 3</li>
</ul>

위의 코드에서 첫 번째 <li> 요소에는 "highlight"로 설정된 class 속성이 있고, 두 번째 <li> 요소에는 "unique-item"으로 설정된 id속성이 있습니다. 및 세 번째 <li> 요소에는 "3"으로 설정된 value 속성이 있습니다. 이는 정렬된 목록에 대한 특정 값을 정의하는 데 유용합니다.

  ● CSS로 목록 스타일 지정하기 Styling lists with CSS

    - 스타일링 목록 유형:
CSS는 정렬되지 않은 목록(<ul>) 및 정렬된 목록(<ol>)과 같은 목록 유형의 모양을 사용자 정의하는 다양한 속성을 제공합니다. list-style-type 속성은 목록 마커 또는 글머리 기호의 스타일을 지정하는 데 사용됩니다. list-style-type의 일반적인 값은 다음과 같습니다.
  > none: 목록에서 글머리 기호 또는 번호 매기기를 제거합니다.
  > disc: 정렬되지 않은 목록의 글머리 기호로 채워진 원을 표시합니다(<ul> 기본값).
  > circle: 정렬되지 않은 목록의 글머리 기호로 빈 원을 표시합니다.
  > square: 정렬되지 않은 목록의 글머리 기호로 사각형을 표시합니다.
  > decimal: 정렬된 목록의 번호 매기기 스타일로 십진수(1, 2, 3 등)를 표시합니다(<ol> 기본값).
  > lower-alpha: 정렬된 목록의 번호 매기기 스타일로 소문자 알파벳(a, b, c 등)을 표시합니다.
  > upper-roman: 정렬된 목록의 번호 매기기 스타일로 대문자 로마 숫자(I, II, III 등)를 표시합니다.
정렬되지 않은 목록의 목록 마커 스타일을 사각형으로 변경하는 CSS 코드 예:

ul {
  list-style-type: square;
}

    - 스타일링 목록 항목 내용:
CSS 속성은 목록 항목(<li>) 내 콘텐츠의 스타일을 지정하는 데 사용할 수 있습니다. 보다 구체적인 스타일 지정을 위해 요소 선택기(li) 또는 클래스 또는 ID 선택기를 사용하여 목록 항목을 대상으로 지정할 수 있습니다.
스타일 목록 항목에 일반적으로 사용되는 CSS 속성은 다음과 같습니다.
  > color: 텍스트 색상을 설정합니다.
  > font-size: 글꼴 크기를 조정합니다.
  > font-weight: 글꼴 두께를 제어합니다(예: 굵게).
  > text-decoration: 텍스트 장식(예: 밑줄, 선)을 추가하거나 제거합니다.
  > padding: 목록 항목 내부의 간격을 설정합니다.
  > margin: 목록 항목 외부의 간격을 설정합니다.
  > background-color: 목록 항목의 배경색을 설정합니다.
스타일 목록 항목 콘텐츠에 대한 CSS 코드 예:

li {
  color: red;
  font-weight: bold;
  padding: 5px;
  background-color: lightgray;
}

    - 중첩 리스트 스타일 지정:
중첩 리스트로 작업할 때 상위 목록과 중첩 리스트에 서로 다른 스타일을 적용하여 더 잘 구분할 수 있습니다. 하위 선택기를 사용하여 중첩 리스트의 특정 수준을 대상으로 지정하고 다양한 스타일을 적용할 수 있습니다. 예를 들어 ul ul 또는 ol ol과 같은 선택기를 사용하여 특정 수준 내에서 중첩 리스트를 대상으로 지정할 수 있습니다.
중첩 리스트의 스타일을 다르게 지정하는 CSS 코드 예:

ul {
  list-style-type: circle; /* Style for the top-level unordered list */
}

ul ul {
  list-style-type: square; /* Style for nested unordered lists */
}

CSS 속성 및 선택기를 사용하여 글머리 기호 스타일, 텍스트 서식, 간격 및 배경색을 포함하여 목록 및 목록 항목의 모양을 사용자 지정할 수 있습니다.