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>스타일 태그 예시</title>
    <style>
      body {
        background-color: #f7f7f7;
      }

      div {
        max-width: 800px;
        margin: 50px auto;
        background-color: #fff;
        padding: 20px;
      }
    </style>
  </head>

  <body>
    <div>
      <h1>스타일 태그 예시</h1>
      <p>
        이 웹 페이지는 <code>&lt;style&gt;</code> 태그를 사용하여 스타일이
        적용된 예시입니다. 스타일 태그를 사용하면 웹 페이지의 각 요소에 대한
        디자인을 쉽게 정의할 수 있습니다.
      </p>
      <p>
        더 많은 정보는 <a href="https://example.com">여기</a>에서 확인하세요!
      </p>
    </div>
  </body>
</html>

# style 태그

`<style>` 태그는 HTML 문서 내 요소들을 꾸미기 위한 CSS 스타일을 정의합니다.

<br />

## 사용 방법

`<style>` 태그는 HTML `<head>` 섹션 내에 위치해야 합니다.

style 태그 내에 아래와 같이 CSS 규칙을 추가하여 웹 페이지의 다양한 요소에 스타일을 적용할 수 있습니다.

(참고: CSS에 대한 자세한 내용은 HTML 강의 이후에 소개됩니다)

```html title="style 태그 사용 예제"
<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: lightblue;
      }

      h1 {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>안녕하세요!</h1>
  </body>
</html>
```

위 style 태그는 웹 페이지의 배경색(background-color)을 연한 파란색(lightblue)으로 만들고, `<h1>` 태그의 텍스트를 중앙 정렬합니다.

<br />

## style 태그 장점

- 웹 페이지에 직접 스타일을 적용하기 때문에 별도의 CSS 파일을 참조할 필요가 없습니다.

- 특정 페이지에만 스타일을 적용할 때 유용합니다.

<br />

## style 태그 단점

- 복잡한 웹 사이트에서는 여러 페이지에 동일한 스타일을 반복적으로 적용해야 할 수 있기 때문에 유지 관리가 어려울 수 있습니다.

- 웹 페이지의 로딩 시간에 영향을 줄 수 있습니다. 스타일 정보가 많으면 페이지의 크기가 커지게 됩니다.

<br />

## style 태그 정리

- style 태그는 `<head>` 섹션 내에 위치합니다.

- CSS 스타일 규칙을 HTML 문서에 직접 포함하기 때문에 별도의 CSS 파일을 참조할 필요가 없지만, 복잡한 웹 사이트에서는 유지 관리가 어려울 수 있습니다.