lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

webIntroHtmlChapter3Title

lesson11Title

lesson12Title

webIntroHtmlChapter1Title

webIntroHtmlChapter2Title

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>HTML id 예시</title>
    <style>
      #intro {
        font-size: 24px;
        font-weight: bold;
        color: green;
      }

      #description {
        margin-top: 20px;
        font-size: 16px;
        color: blue;
      }

      #footer {
        margin-top: 30px;
        text-align: center;
        font-style: italic;
      }
    </style>
  </head>

  <body>
    <p id="intro">반갑습니다</p>
    <p id="description">웹페이지 단락</p>
    <p id="footer">© 저작권, 전화번호</p>
  </body>
</html>

# ID 식별자(Selector)

HTML id는 특정 HTML 요소를 고유하게 식별하기 위한 **식별자**(Selector)입니다.

id는 주로 특정 요소에 `고유한 id`를 부여해, CSS나 JavaScript에서 해당 요소를 선택하고 조작하기 위해 사용됩니다.

이러한 고유성 때문에 여러 HTML 요소가 동일한 id를 가질 수 없습니다.

`id` 식별자는 아래와 같이 `#`을 붙여 정의합니다.

```html title="HTML id 사용 예시"
<style>
  #intro {
    font-size: 24px;
    font-weight: bold;
    color: green;
  }
</style>

<p id="intro">반갑습니다</p>
```

위 코드는 intro라는 id를 가진 HTML 요소를 `#intro`로 선택해, 이 HTML 요소에만 적용되는 스타일을 적용합니다.

참고로 id는 대소문자를 구분합니다. 즉, `Intro`와 `intro`는 다른 id입니다.

하지만 id는 관례적으로 `소문자`를 사용합니다.