lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

webIntroHtmlChapter2Title

webIntroHtmlChapter1Title

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"
    />
    <title><div>와 <span> 예시</title>
    <style>
      .important-word {
        color: red;
        font-weight: bold;
      }

      #math-section {
        background-color: #f2f2f2;
        margin: 10px;
        padding: 10px;
      }

      #science-section {
        background-color: #e6e6e6;
        margin: 10px;
        padding: 10px;
      }

      p > span {
        font-weight: bold;
        color: blue;
      }
    </style>
  </head>

  <body>
    
    <div>
      <p>안녕하세요!</p>
      <p>웹 페이지의 문단입니다</p>
    </div>

    
    

    
    <div id="math-section">수학 섹션</div>

    <div id="science-section">과학 섹션</div>

    
    <p>
      문장의 <span class="important-word">중요한 단어</span>를 강조해 보세요.
    </p>
  </body>
</html>

# div, span 태그

div와 span 태그는 HTML 태그를 감싸 웹페이지를 구조화합니다.

<br />

## div (division)

- 웹 페이지의 여러 부분을 구분하거나 그룹화하는 데 사용됩니다.
- 블록 레벨 요소입니다. 즉, `div`는 기본적으로 화면의 전체 너비를 차지하며, 새로운 줄에서 시작하고 종료합니다.
- 활용 예시:
  ```html title="div 요소 예시"
  <div>
    <p>div 요소 내부 단락</p>
  </div>
  ```

<br />

## span

- 텍스트나 인라인 요소 내부에서 일부분을 선택하거나 스타일을 적용하기 위해 사용됩니다.

- 인라인 레벨 요소입니다. 즉, 텍스트의 흐름에서 새 줄 없이 연속해서 나타나며, 필요한 만큼의 너비만 차지합니다.

- 활용 예시:
  ```html title="span 요소 예시"
  <p>이것은 <span>span 요소</span> 안의 문장입니다.</p>
  ```

<br />

참고로 `div`와 `span` 자체에는 시각적 스타일이나 기능이 없습니다. 대신 CSS(스타일)나 JavaScript(동작)와 함께 사용해 특정 부분을 스타일링하거나 동작을 부여할 때 활용합니다.

예를 들어 아래와 같은 CSS를 사용해 `span` 요소 내 텍스트를 빨간색으로 바꿀 수 있습니다.

```css title="span 요소에 스타일 적용"
span {
  color: red;
}
```

<br />

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