lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

webIntroHtmlChapter2Title

webIntroHtmlChapter1Title

webIntroHtmlChapter3Title

webIntroHtmlChapter4Title

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR"
      rel="stylesheet"
    />
    <title>리스트 태그 예시</title>
  </head>

  <body>
    
    <h2>동물 이름</h2>
    <ul>
      
      <li>원숭이</li>
    </ul>

    
    <h2>과자 먹는 순서</h2>
    <ol>
      <li>감자칩</li>
      <li>초코파이</li>
    </ol>

    
    <h2>도시락 메뉴</h2>
    <ul>
      <li>돈까스</li>
      <li>김치</li>
    </ul>
  </body>
</html>

# ul, ol, li 태그

`<ul>`, `<ol>`, `<li>` 태그는 웹 페이지에서 목록(List)을 만들 때 사용합니다.

ul 태그는 순서가 없는 목록을, ol 태그는 순서가 있는 목록을 의미하며, li 태그는 목록 내 항목을 의미합니다.

li 태그는 ul 태그나 ol 태그의 자식 요소로만 사용됩니다.

<br />

## `<ul>` 태그

`<ul>`은 "Unordered List"의 줄임말로, 순서에 특별한 의미가 없는 목록을 나타낼 때 사용합니다. 냉장고에 무작위로 넣은 과일들처럼 순서가 중요하지 않은 목록을 정의합니다.

```html title="순서가 없는 목록"
<ul>
  <li>사과</li>
  <li>바나나</li>
  <li>체리</li>
</ul>
```

<br />

## `<ol>` 태그

`<ol>`은 "Ordered List"의 줄임말로, 할 일 목록과 같이 목록의 순서에 의미가 있는 경우에 사용합니다.

```html title="순서가 있는 목록"
<ol>
  <li>기상: 7시</li>
  <li>등교: 8시</li>
  <li>취침: 10시</li>
</ol>
```

<br />

## `<li>` 태그

`<li>`는 "List Item"의 줄임말로, `<ul>` 및 `<ol>` 요소 안의 개별 항목을 정의합니다.

```html title="목록의 항목"
<ul>
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ul>
```

<br />

코드의 별표로 강조된 부분을 따라 입력해 보세요.

ul, ol, li 태그

<ul> 태그

<ol> 태그

<li> 태그

`<ul>` 태그

`<ol>` 태그

`<li>` 태그