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 코드를 해석해 사용자에게 웹 페이지를 표시합니다.

## HTML의 기본 구조:

```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. **제목 태그**: `<h1>`, `<h2>`, ..., `<h6>` - 웹 페이지의 제목이나 부제목을 나타냅니다.

2. **단락 태그**: `<p>` - 텍스트 단락을 생성합니다.

3. **링크 태그**: `<a href="URL">링크 텍스트</a>` - 다른 페이지로의 링크를 생성합니다.

4. **이미지 태그**: `<img src="이미지URL" alt="대체 텍스트">` - 웹 페이지에 이미지를 삽입합니다.

5. **목록**:
   - 순서 있는 목록: `<ol><li>항목1</li><li>항목2</li></ol>`
   - 순서 없는 목록: `<ul><li>항목1</li><li>항목2</li></ul>`

<br />

## 폼 관련 태그:

1. **폼 태그**: `<form action="URL" method="POST"> ... </form>` - 사용자 입력을 수집하는 폼을 생성합니다.

2. **입력 태그**: `<input type="text" name="이름">` - 텍스트 입력 필드를 생성합니다.

3. **버튼**: `<button type="submit">제출</button>` - 폼 제출 버튼을 생성합니다.

<br />

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

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