lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

webIntroHtmlChapter1Title

webIntroHtmlChapter2Title

webIntroHtmlChapter3Title

webIntroHtmlChapter4Title

<body>
  <h1>제목을 표시하는 h 태그</h1>
  <p>단락(paragraph)을 의미하는 p 태그</p>

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

  <img src="https://picsum.photos/300" alt="이미지" />

  <br/><br/>

  <a href="https://example.com">a 태그</a>
</body>

# body 태그

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

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

`<body>` 태그 안에는 다음과 같은 요소들이 포함될 수 있습니다.

<br />

### 텍스트 요소

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

- `<h1>`, `<h2>` ... `<h6>`: h는 Heading(제목)의 약자로, 가장 큰 제목인 h1부터 가장 작은 제목인 h6까지 표현할 수 있습니다.

- `<p>`: 텍스트로 구성된 단락(Paragraph)을 나타내는 태그입니다.

```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 />

## 실습

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

`<body>` 태그는 문서으 메타데이터를 담는 `<head>` 태그와 달리, 사용자에게 보여지는 내용을 포함합니다.

### `<body>` 태그는 화면에 표시되는 내용을 포함한다.

body 태그

텍스트 요소

이미지, 비디오, 오디오

목록

링크

실습

<body> 태그는 화면에 표시되는 내용을 포함한다.

`<body>` 태그는 화면에 표시되는 내용을 포함한다.