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" />
    <title>웹사이트 제목</title>
    <meta name="description" content="웹사이트 설명" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR"
      rel="stylesheet"
    />
    
    <link rel="stylesheet" href="sample_styles.css" />

    
    <style>
      h2 {
        color: green;
      }
      button {
        background-color: blue;
        border: none;
        color: white;
        padding: 10px 15px;
        cursor: pointer;
      }
    </style>

    <script>
      function greet() {
        alert('안녕하세요');
      }
    </script>
  </head>

  <body>
    <h2>웹 코딩 첫걸음을 환영합니다!</h2>
    <p>웹사이트 본문입니다.</p>
    <button onclick="greet();">버튼을 클릭해 보세요 😀</button>
  </body>
</html>

# head 태그

웹 페이지를 정의하는 HTML 문서는 아래와 같이 2가지 부분으로 나눠져 있습니다.

1. 검색 엔진과 브라우저에게 웹페이지 정보(메타데이터)를 알려주는 `<head>`

2. 웹페이지에 표시할 내용을 정의하는 `<body>`

`<head>` 태그로 정의된 내용은 웹브라우저 화면에 보이지 않으며, 웹 페이지의 제목, 설명, 키워드, 스타일과 같은 메타 정보를 포함합니다.

<br />

## head 태그 내 주요 요소들

### 1. title 요소

웹 페이지의 제목을 정의합니다. 이 제목은 브라우저의 탭에 표시됩니다.

```html title="웹페이지 제목 정의"
<head>
  <title>나의 첫 웹페이지</title>
</head>
```

<br />

### 2. meta 요소

검색 엔진에게 표시할 웹페이지에 대한 정보(메타데이터)를 정의합니다.

예를 들어, meta 태그로 웹 페이지 문자 인코딩 방식(문자를 컴퓨터가 사용할 수 있는 형태로 변환), 뷰포트(화면에 보여지는 영역) 설정, 페이지 설명 등을 설정할 수 있습니다.

```html title="메타데이터 정의"
<head>
  
  <meta charset="UTF-8" />

  
  <meta name="description" content="웹사이트 설명" />

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
```

<br />

### 3. link 태그

웹페이지를 외부 리소스를 연결할 때 사용합니다. 주로 글꼴(폰트)를 불러오거나, 스타일시트(웹페이지의 스타일을 규정한 CSS 파일)를 연결할 때 사용합니다.

```html title="외부 리소스 연결"
<link
  href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR"
  rel="stylesheet"
/>
```

<br />

### 4. script 태그

웹사이트의 두뇌 역할을 하는 자바스크립트 파일이나 코드를 불러옵니다.

자바스크립트는 페이지의 동작(예: 버튼 클릭 시 액션)을 제어하기 위해 사용합니다.

```html title="자바스크립트 파일 불러오기"
<head>
  <script src="script.js"></script>
</head>
```

<br />