02_HTML 기본 구조

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My First Web Page!</title>
    </head>

    <body>
        <!--웹 페이지에 표시할 내용을 적습니다.-->
        <p>나의 첫 번째 웹 페이지</p>
    </body>
</html>

01. DTD

문서형 정의(DTD, Document Type Definition)는 웹 브라우저가 처리할 HTML 문서가 어떤 문서 형식을 따라야 하는지 알려주는 것으로, HTML 문서를 작성할 때 항상 처음에 넣어야 함

<!DOCTYPE html>

02. HTML 태그

html 태그는 HTML 문서의 시작과 끝을 의미한다. 따라서 모든 태그는 html 태그 안에서 작성

03. head 태그

head 태그는 HTML 문서의 메타데이터를 정의하는 영역임. 메타데이터는 HTML 문서에 대한 정보로 웹브라우저에는 직접 노출되지 않는다. 보통 meta, title, link, style, script 등의 태그를 사용해 HTML 문서의 여러 정보를 정의한다.

meta 태그

meta 태그는 메타데이터를 정의하는데 사용 다음은 HTML 문서에서 허용하는 문자 집합을 정의하기 위한 메타데이터 태그다. 과거에는 EUC-KR을 주로 사용했지만, 최근에는 더 많은 언어를 허용하기 위해 UTF-8만을 사용한다.

<meta charset="UTF-8">

다음은 인터넷 익스플로러의 렌더링 엔진을 강제로 최신 렌더링 엔진으로 지정하는 메타데이터를 나타낸다. 구 버전의 렌더링 엔진을 사용하는 실험적 프로젝트가 아니라면 해당 태그를 정의하는 편이 좋다.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

마지막으로 기기의 화면 너비에 맞추기 위해 사용하는 메타데이터 태그다. 뷰포트는 웹 페이지에 접속했을 때 사용자에게 보이는 화면 영역을 의미한다.

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

04. body 태그

body 태그는 웹 브라우저에 노출되는 내용을 작성하는 영역이다. 웹 브라우저에 표시되는 모든 내용은 body 태그 영역 안에서 작성된다.