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가지 요소**로 나누어집니다.

- `<head>` : 검색 엔진과 브라우저에게 웹페이지 정보(메타데이터)를 알림

- `<body>` : 웹페이지에 표시할 내용을 정의

`<head>` 요소로 정의된 내용은 웹페이지의 제목, 설명, 키워드, 스타일과 같은 메타 정보를 포함합니다.

<br />

## head 태그 내 주요 요소들

head 태그 내에는 다양한 웹페이지 정보를 담을 수 있으나, 주로 사용되는 요소들은 아래와 같습니다.

<br />

### title 요소

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

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

<br />

### 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 />

### link 태그

웹페이지를 `외부 리소스`를 연결할 때 사용합니다.

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

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

<br />

### script 태그

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

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

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

HTML 문서의 시작을 알리는 태그는 `<!DOCTYPE html>`입니다. `<head>` 태그는 HTML 문서의 메타데이터를 포함하며, 브라우저에 표시되지 않습니다.

### `<head>` 태그는 HTML 문서의 시작을 알릴 때 사용한다.

head 태그

head 태그 내 주요 요소들

title 요소

meta 요소

link 태그

script 태그

<head> 태그는 HTML 문서의 시작을 알릴 때 사용한다.

`<head>` 태그는 HTML 문서의 시작을 알릴 때 사용한다.