lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

webIntroHtmlChapter1Title

webIntroHtmlChapter2Title

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"
    />
  </head>
  <body>
    <h1>제목을 표시하는 h 태그</h1>
    <p>단락(paragraph)을 의미하는 p 태그</p>

    <ul>
      <li></li>
      <li>바나나</li>
      <li>딸기</li>
    </ul>

    <img src="https://picsum.photos/300" alt="이미지를 표시하는 img 태그" />

    <br/><br/>

    <a href="https://example.com">하이퍼링크</a>를 사용하는 a 태그
  </body>
</html>

# body 태그

`<body>` 태그는 웹 페이지에 실제로 표시되는 내용을 담습니다.

사용자와 상호작용하는 모든 웹 콘텐츠는 body 태그 안에 위치해야 합니다.

<br />

## Body 주요 요소

body 태그 안에 다양한 요소들을 포함해 웹페이지를 풍성하게 구성할 수 있습니다.

<br />

### 텍스트 요소

웹페이지에서 텍스트 내용을 표시할 때 사용하는 태그들입니다.

- `<h1>`, `<h2>` ... `<h6>`: 제목 또는 부제목을 나타내는 태그입니다.

- `<p>`: 단락을 나타내는 태그입니다.

```html title="제목과 단락 표시"
<body>
  <h1>환영합니다!</h1>
  <p>이곳은 나의 첫 웹페이지입니다.</p>
</body>
```

<br />

### 이미지, 비디오, 오디오

- `<img>`: 이미지를 표시하는 태그

- `<video>`: 비디오를 표시하는 태그

- `<audio>`: 오디오를 표시하는 태그

```html title="img, video, audio 태그"
<body>
  <img src="myimage.jpg" alt="나의 사진" />
  <video src="myvideo.mp4" controls></video>
  <audio src="mysong.mp3" controls></audio>
</body>
```

<br />

### 목록

정렬된 목록이나 순서가 없는 목록을 만드는데 사용합니다.

- `<ul>`: 순서 없는 목록 (Unordered List)

- `<ol>`: 번호가 매겨지는 순서 있는 목록 (Ordered List)

- `<li>`: 목록 내의 항목 (List Item)

```html title="ul, li 태그"
<body>
  
  <ul>
    <li>사과</li>
    <li>바나나</li>
  </ul>
</body>
```

<br />

### 링크

- `<a>`: 다른 페이지나 웹사이트로 이동할 수 있는 하이퍼 링크를 생성합니다.

```html title="a 태그"
<body>
  <a href="https://www.example.com">example.com로 이동</a>
</body>
```

<br />

## 실습

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