lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

webIntroHtmlChapter4Title

lesson12Title

webIntroHtmlChapter1Title

webIntroHtmlChapter2Title

webIntroHtmlChapter3Title

<!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>
    <meta
      name="description"
      content="회사명에서 제공하는 최고의 제품을 소개합니다."
    />
    <meta name="keywords" content="제품, 회사명, 특징" />
    <meta name="author" content="회사명" />
    <link rel="canonical" href="https://yourwebsite.com/product-introduction" />

    
    <meta property="og:title" content="제품 소개 - 회사명" />
    <meta
      property="og:description"
      content="회사명에서 제공하는 최고의 제품을 소개합니다."
    />
    <meta
      property="og:image"
      content="https://yourwebsite.com/images/product-thumbnail.jpg"
    />
    <meta
      property="og:url"
      content="https://yourwebsite.com/product-introduction"
    />
    <meta property="og:type" content="website" />

    
    
  </head>

  <body>
    <header>
      <h1>회사명 제품 소개</h1>
      <nav>
        
      </nav>
    </header>

    <main>
      <article>
        <h2>제품의 주요 특징</h2>
        <p>여기에 제품의 주요 특징과 정보를 설명합니다.</p>
        
      </article>

      <aside>
        
      </aside>
    </main>

    <footer>
      <p>회사명 © 저작권, 전화번호</p>
    </footer>
  </body>
</html>

# HTML 총정리

HTML은 "HyperText Markup Language"의 약자로 웹 페이지의 구조와 내용을 정의하는데 사용되는 **마크업 언어**입니다.

웹 브라우저는 HTML 코드를 해석해 사용자에게 웹페이지를 표시합니다.

<br/>

## 웹페이지 기본 구조

```html title="HTML"
<!DOCTYPE html>
<html>
  <head>
    
    <title>문서의 제목</title>
  </head>
  <body>
    웹 페이지의 주요 내용
  </body>
</html>
```

1. `<!DOCTYPE html>`: 문서 타입 선언. 현재 문서가 HTML5로 작성되었음을 나타냅니다.

2. `<html>`: HTML 문서의 시작과 끝을 나타냅니다.

3. `<head>`: 문서의 메타 정보, 스타일, 스크립트 등의 정보를 포함합니다.

4. `<title>`: 브라우저 탭에 표시되는 문서의 제목을 설정합니다.

5. `<body>`: 실제 웹 페이지의 내용을 포함합니다.

<br />

## 몇 가지 주요 HTML 태그:

1. *제목 태그* : 웹 페이지의 제목이나 부제목을 나타냅니다.

```html title="코드 예시"
<h1>제목1</h1>
<h2>제목2</h2>
...
<h6>제목6</h6>
```

2. *단락 태그* : 텍스트 단락을 생성합니다.

```html title="코드 예시"
<p>텍스트 단락</p>
```

3. *링크 태그* : 다른 페이지로의 링크를 생성합니다.

```html title="코드 예시"
<a href="URL">링크 텍스트</a>
```

4. *이미지 태그* : 웹 페이지에 이미지를 삽입합니다.

```html title="코드 예시"
<img src="이미지URL" alt="대체 텍스트">
```

5. *목록 태그* : 순서 있는 목록과 순서 없는 목록을 생성합니다.

```html title="코드 예시"

<ol>
  <li>항목1</li>
  <li>항목2</li>
</ol>


<ul>
  <li>항목1</li>
  <li>항목2</li>
</ul>
```

<br />

지금까지 웹사이트의 골격, HTML 강의를 수강하느라 정말 고생 많으셨습니다 🙌

다음 강의는 웹사이트의 옷, `CSS`가 무엇이고 어떻게 사용하는지 배워보겠습니다!

HTML 문서에서 `<body>` 태그는 실제 웹페이지의 내용을 포함합니다. `<head>` 태그는 메타 정보와 스타일, 스크립트를 포함하며, `<title>` 태그는 문서의 제목을 설정합니다.

HTML 총정리

웹페이지 기본 구조

몇 가지 주요 HTML 태그:

HTML 문서에서 웹페이지의 내용을 포함하는 태그는 무엇인가요?