lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

lesson14Title

lesson15Title

lesson16Title

lesson17Title

webLightBasicChapter1Title

webLightBasicChapter2Title

webLightBasicChapter3Title

<!DOCTYPE html>
<html lang="en">
  <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>
    
    <header>
      <h1>HTML 주석</h1>
    </header>

    
    <main>
      <p>
        HTML 코멘트는 웹 페이지에 표시되지 않는 메모나 설명을 작성하기 위해
        사용됩니다.
      </p>

      
      <p>이 문장은 웹 페이지에 표시됩니다.</p>

      
    </main>

    
    <footer>
      <p>웹페이지 꼬리말</p>
    </footer>
  </body>
</html>

const container = document.querySelector('.container');

container.addEventListener('click', () => {
  container.style.background = 'blue';
});

# 주석(Comment)

HTML 코멘트는 웹 페이지에 표시되지 않는 메모나 설명을 작성하기 위해 사용됩니다.

책의 여백에 필기를 하거나 중요한 부분에 메모지를 붙이는 것처럼, 개발자나 웹 디자이너가 코드의 특정 부분에 설명을 추가할 때 유용합니다.

<br />

## 기본 구조

HTML 코멘트는 ``로 마칩니다. 이 사이에 있는 모든 내용은 웹 페이지에서 보이지 않습니다.

```html title="HTML 코멘트 기본 구조"

<p>이 문장은 웹 페이지에 표시됩니다.</p>
```

<br />

## 코멘트 활용 예

1. 코드 설명: 복잡한 코드나 나중에 수정할 수 있는 부분에 대한 설명을 추가할 수 있습니다.

2. 코드 비활성화: 특정 코드 부분을 잠시 비활성화하고 싶을 때 코멘트로 감쌀 수 있습니다. 이렇게 하면 그 부분의 코드가 웹 페이지에 표시되지 않게 됩니다.

```html title="코멘트로 코드 비활성화"

```

3. 분리: 웹 페이지의 다른 섹션을 구분하기 위해 코멘트를 사용할 수도 있습니다.

예를 들어 주석으로 웹사이트의

- 헤더(header) : 웹페이지 상단의 머리말로 로고, 주요 메뉴(내비게이션), 검색창 등을 표시

- 본문(main) : 웹사이트의 핵심 콘텐츠를 표시

- 푸터(footer) : 웹페이지 하단에 사이트 정보(소셜 미디어, 저작권 표시 등) 등을 표시

등의 큰 섹션을 나누고 표시할 수 있습니다.

```html title="주석으로 섹션 구분"

<header>...</header>



<main>...</main>



<footer>...</footer>

```

이렇게 HTML 코멘트는 코드의 가독성을 높이고, 다른 개발자와의 협업을 용이하게 돕습니다.

또한 코드의 특정 부분이 왜 그렇게 작성되었는지, 또는 어떤 변경이 필요한지 등의 정보를 간편하게 전달할 수 있습니다.

<br />

## 실습

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