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>
    
    <div>하이라이트</div>

    <br />

    
    <img src="https://picsum.photos/seed/picsum/300" alt="대체 텍스트" />
  </body>
</html>

<div class="highlight">하이라이트</div>

# HTML 속성 (Attributes)

HTML 속성은 HTML 요소에 추가 정보를 제공하는 이름과 값으로 구성되어 있습니다.

속성은 `시작 태그`에 작성하며, 하나의 HTML 요소에 여러 속성을 적용할 수 있습니다.

<br />

## 속성 기본 구조

HTML 속성은 시작 태그 내에 포함되며, `이름="값"` 형식으로 작성합니다.

```html title="HTML 속성 구조"
<요소명 속성이름="속성값"> ... </요소명>
```

<br />

### 속성 사용 예시

```html title="img 태그 src, alt 속성"
<img src="이미지경로.jpg" alt="이미지 설명" />
```

"src" 속성은 `<img>` 태그의 필수 속성으로, 표시할 이미지의 경로를 지정합니다.

src 속성이 정의되지 않은 img 태그는 이미지를 표시하지 않습니다.

<br />

## 주요 속성 예시

1. HTML 태그 공통: `class`, `id` 속성

   모든 사람들이 이름과 주민등록번호로 구분되는 것처럼, 웹페이지도 특정 요소를 구분해 스타일을 적용하기 위해 `class`와 `id` 속성을 사용합니다.

   - `class`: 같은 스타일을 여러 요소에 적용할 때 사용합니다. 여러 요소에 동일한 클래스명을 부여할 수 있습니다.
     ```html title="class 속성 예시"
     <div class="highlight">highlight 클래스 적용</div>
     ```
   - `id`: 특정 요소를 구분하거나 JavaScript에서 특정 요소를 선택할 때 사용합니다. `id` 값은 다른 HTML 요소와 중복을 허용하지 않습니다.
     ```html title="id 속성 예시"
     <div id="main-content">main-content ID를 가진 HTML 요소</div>
     ```

<br />

2. img 태그: `src`와 `alt` 속성

   `img` 요소에서 이미지의 경로(src)와 대체 텍스트(alt)를 지정하는 데 사용합니다.

   ```html title="img 태그 src 및 alt 속성"
   <img src="https://picsum.photos/id/237/300" alt="강아지" />
   ```

<br />

3. a 태그: `href` 속성

   `a` 요소에서 다른 페이지로 이동할 링크의 대상 URL을 지정하는 데 사용합니다.

   ```html title="a 태그 href 속성"
   <a href="https://www.example.com">웹사이트 방문하기</a>
   ```

<br />

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