HTML 은 Hyper Text Markup Language 약어로 HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어입니다. 다시 말해, 구조를 설계할 때 사용되는 언어로 hyper link 시스템을 가지고 있으며, 흔히 말하는 웹 페이지를 위한 마크업 언어라고 할 수 있습니다.

웹 페이지를 제작하기 위해서는 가장 기본이 되는 HTML부터 공부해야 합니다.

#01. 웹 페이지 제작 개요

1) 웹 페이지 작성 방법

일반 텍스트 파일의 확장자를 *.html로 변경하여 사용.
웹 페이지를 구성하기 위한 정형화된 형식의 내용(=소스코드)을 기술 -> 코딩
하나의 웹 페이지는 HTML + CSS + Javascript가 조합된 소스코드로 구성됨.

2) 웹 페이지 작성시 준수해야 할 점.

웹 접근성을 확보하기 위해 시멘틱 웹을 작성해야 하며 이를 위해서 웹 표준을 준수해야 한다.

웹 접근성

모든 사람 (혹은 모든 기기)는 정보의 접근에 차별을 받지 않아야 한다.
장애인 차별 금지법에 명시되어 있음.

시멘틱 웹

사전적 의미: 의미있는 문서
HTML태그는 원래 특정 단어나 문장의 용도를 시각적으로 강조하기 위해 사용되는 언어임.
HTML 태그를 강조할 목적에 맞게 사용하여 기계가 이해할 수 있도록 의미를 부여한 형태.
시멘틱 웹으로 작성된 웹 페이지는 시각장애인용 웹 브라우저(스크린리더) 를 활용하여 웹 페이지 탐색이 가능하다.

즉, 시멘틱 웹이란 기계가 문장의 용도를 파악할 수 있도록 문장에 의미를 부여한 형태.

시맨틱웹의_예시

웹 표준

올바른 시멘틱 웹을 구성할 수 있도록 권장되는 HTML 제작기법
웹 표준이 준수될 경우 기기의 종류를 가리지 않고 모두 동일한 형태의 결과를 확인할 수 있기 때문에 웹 접근성이 확보된다.
HTML로 골격을 구성하고 CSS로 디자인을 적용한 후 Javascript로 동작을 구현한다.

#02. HTML

웹 페이지를 구성하는 기본 골격을 만드는 언어.
특정 단어나 문장을 태그라는 형식으로 강조하는 형태로 구성되고 각 태그는 시각적 효과를 정의하기 위해 속성과 값을 포함할 수 있다.
```
 <태그 속성="값" 속성="값">강조할 내용</태그>
```
- 모든 태그는 시작태그 <태그>와 끝태그 </태그>로 구성된다.
- 시작 태그에는 시각적 효과를 의미하는 속성들이 명시되기도 한다.
- 끝 태그는 </ ... >와 같이 /가 표시되어야 한다.
- 끝 태그가 필요 없는 경우 <태그 />와 같이 괄호를 닫을 때 /를 명시하기도 한다.
HTML 태그는 내용 강조할 목적에 따라 종류가 구분되어 있다.
```
 ex) h1->제목, p->본문 등...
```

HTML 페이지 기본 구조

<!doctype html>         ← HTML5 버전 선언(DTD선언)
<html lang="ko">        ← 전체 웹 페이지 영역 정의
    <head>
                        ← 페이지 특성 설정 부분
    </head>
    <body>
                        ← 웹 브라우저에 표시되는 부분
    </body>
</html>

`<head>`안에 기술되는 주요 내용

언어 저장 특성 명시 (다국어 지원을 위해 utf-8 사용)

<meta charset="utf-8" />

모바일 장치 별 해상도 단일화

<meta name="viewport" 
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

브라우저 타이틀

<title>제목</title>

주석문

소스코드 내에 작성되는 설명문.

코드의 용도와 기능을 설명하기 위한 용도로 작성된다.

로 감싸서 표현한다.

<!-- 이 부분은 주석입니다. 브라우저가 설명문으로 인식하여 화면에 표시하지 않습니다. -->

앞으로의 실습을 위한 HTML 파일 기본 구조

<!DOCTYPE html>
<html lang="ko">
    <!-- 페이지 설정 부분 -->
    <head>
        <!-- 저장시에 사용된 인코딩(파일의 저장 형식) 값을 웹 브라우저에게 알려준다. 
             ANSI(euc-kr), UTF-8 -->
        <meta charset="utf-8" />
        <!-- 스마트 장치에서의 해상도 균일화 처리 -->
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
        <!-- 브라우저에 표시될 문서 제목 -->
        <title>My Web Page</title>
    </head>

    <!-- 브라우저에 보여질 부분 -->
    <body>
        Hello HTML
    </body>
</html>

#03. HTML 작성에 도움을 주는 Visual Studio Code Extension

이름	설명
Auto Close Tag	시작태그를 작성하면 종료태그를 자동으로 추가해준다.
Auto Rename Tag	시작태그를 수정하면 종료태그도 자동으로 수정해준다. 단, 한글인 경우는 동작안함.
Color Highlight	색상 코드 값을 실제 그 색상으로 강조한다.
Prettier - Code formatter	코드의 줄바꿈, 들여쓰기등을 자동으로 정렬한다. 사용방법: `Ctrl+Shift+P` > `Format Document` 명령 선택
Highlight Matching Tag	선택한 태그와 함께 반대쪽 시작(혹은 종료)태그를 색상으로 강조한다.
Live Server	웹 페이지의 변경사항을 감지하여 페이지를 자동으로 새로고침 한다

호쌤코딩클럽

[HTML] 웹 페이지 기본 구조

#01. 웹 페이지 제작 개요

1) 웹 페이지 작성 방법

2) 웹 페이지 작성시 준수해야 할 점.

웹 접근성

시멘틱 웹

웹 표준

#02. HTML

HTML 페이지 기본 구조

`<head>`안에 기술되는 주요 내용

언어 저장 특성 명시 (다국어 지원을 위해 utf-8 사용)

모바일 장치 별 해상도 단일화

브라우저 타이틀

주석문

앞으로의 실습을 위한 HTML 파일 기본 구조

#03. HTML 작성에 도움을 주는 Visual Studio Code Extension

About 호쌤(이광호)

#01. 웹 페이지 제작 개요

1) 웹 페이지 작성 방법

2) 웹 페이지 작성시 준수해야 할 점.

웹 접근성

시멘틱 웹

웹 표준

#02. HTML

HTML 페이지 기본 구조

<head>안에 기술되는 주요 내용

언어 저장 특성 명시 (다국어 지원을 위해 utf-8 사용)

모바일 장치 별 해상도 단일화

브라우저 타이틀

주석문

앞으로의 실습을 위한 HTML 파일 기본 구조

#03. HTML 작성에 도움을 주는 Visual Studio Code Extension

About 호쌤(이광호)

`<head>`안에 기술되는 주요 내용