import {
 A, Bold, Details, Dl, H, Message, NoteBottom, NoteTop, P,
 Quote, Score, Youtube, Ul, Ol, Em, Gray, Code, Kbd, Image,
 Q, Strong, Spoiler, Strike, Line, Mark, HtmlGuideMessage, Name,
 Dt, Dd
} from '@/components/Post';

<HtmlGuideMessage />

이전 글들을 통해서 HTML의 기본적인 사전 지식에 대해 알아봤습니다. 우리는 **HTML이 무엇인가**에 대해서 알았고 어떻게 생긴 것인지 알았고 **문법**을 알아봤습니다. **무엇을 할 수 있는지** 알았으며 **태그의 특성**에 대해서도 알아봤습니다. **개발환경**도 갖췄으니 이제는 정말로 **본격적인 코딩**을 시작할 순간입니다.

이번 글에서 아주 간단한 페이지를 하나 만들어보는 것으로 우리는 웹을 이루는 가장 기본적인 구조에 대해서 알아보는 용기 있는 발걸음을 해보려고 합니다. 혹 아직 기초적인 지식이 없다면 이 가이드의 첫 글부터 보고 오시면 좋겠습니다. 그럼 웹 개발을 위한 HTML 가이드 6편 시작합니다.

# 기본적인 구조
```html
<!DOCTYPE html>

<html lang="ko">

<head>
 
 
 <meta charset="UTF-8" />
 
 
 <title>Document</title>
 
</head>
<body>
 
</body>
</html>
```

![위의 코드대로 작성한 웹 페이지의 모습이다. 컨텐츠가 없기 때문에 아무것도 안보이지만 제목은 보인다.](https://drive.google.com/uc?export=view&id=1RBRhpLn6GYk27el-M4DHzzTSIrKyPcFU)

웹 페이지들은 **HTML의 태그**로 이루어져 있습니다. 그리고 하나의 페이지에는 아주 기본적인 태그들이 **반드시** 들어갑니다. 위의 코드에 없는 태그들은 반드시 필요한 태그는 아니기 때문에 없어도 됩니다. 어디까지나 필수 조건에 대한 것입니다. 모든 페이지를 이렇게만 만들면 아무것도 없겠죠. 따라서 어차피 다양한 태그를 사용하게 됩니다.

이번 글에서는 기본적인 구조를 알아보는 것이니 다른 소리는 잘라내고, 다시 본론으로 돌아와서 위의 태그들에 주석으로 작성해둔 내용을 보면 대강 어떤 기능을 하는지 알 수 있습니다. 이렇게만 보면 이해하기가 어렵죠. 그러니 차근 차근 하나 하나 살펴보도록 합시다.

메모장을 켜고 순서대로 작성해보도록 합시다.

## DOCTYPE
```html
<!DOCTYPE html>

```

이 코드는 이 문서가 **HTML 5**로 만들어졌다는 것을 선언하는 코드입니다. **독타입**이라고 부릅니다. 즉, 이 코드가 있으면 브라우저는 이 문서가 HTML 문서이고 어떤 버전인지를 알 수 있습니다. 우리가 배우려는 것은 HTML 중에서도 5버전에 해당합니다. 5버전의 선언문은 위와 같습니다.

**가장 중요한 것은 이 코드는 항상 문서의 가장 첫줄에 있어야한다는 것입니다. 절대적으로 지켜져야 합니다.**

## html 태그
```html
<html lang="ko">
 
</html>
```

`html`태그는 최상위의 부모 태그가 됩니다. 모든 태그들은 이 태그로 감싸야 합니다. `html`태그에는 `lang`이라는 속성이 있고, 속성 값으로는 국가코드를 적어주면 되겠습니다. `ko`는 한국을 의미하죠. 실제로 해외 사이트에 들어가보면 저 부분에 `en`이나 `ja` 같은 코드들이 들어가 있는 것을 볼 수 있을 겁니다.

<Message color='g'>
 크롬이나 웨일 브라우저 같은 최신식 브라우저들을 통해서 웹 페이지의 구성요소를 검사할 수 있는 기능을 사용하면 어떤 웹 페이지가 어떤 코드로 이루어져 있는지 알 수 있습니다. 크롬이나 웨일 브라우저를 기준으로 F12를 누르면 개발자 콘솔이 뜹니다.
</Message>

이 국가 코드들은 **ISO 639-1**에 해당하는 약속된 문자열입니다. 우리는 한국인이고 한국어로 된 웹 페이지들을 만들 가능성이 높기 때문에 그냥 `ko`를 적어주면 되겠습니다.

HTML 문서에 반드시 필요한 네가지의 태그 중 하나로 이 문서가 HTML 문서라는 것을 알려주는 태그가 바로 `html`태그 입니다.

## head 태그
```html
<head>
 
 
</head>
```

`head`태그에는 웹 페이지의 **메타데이터**들이 들어갑니다. 메타데이터라는 것은 웹 페이지의 정보들을 말합니다. 눈에는 보이지 않지만 **브라우저**나 **검색 엔진**들은 이 메타데이터를 읽어서 적용합니다.

쉽게 말하면 웹 페이지의 컨텐츠에 **직접적인 영향을 주지 않는** 것들이 들어가는 태그라고 이해하면 되겠습니다.

## title 태그
```html
<title>Document</title>

```

페이지의 제목을 설정할 때에 사용하는 태그입니다. `head`태그의 안에 들어가고 `title`태그를 작성하지 않으면 **제목이 없는 페이지가 되어버립니다.** 검색이 잘 되지 않을 뿐더러 구분도 어렵겠죠. 때문에 중요한 태그 중의 하나라고 할 수 있습니다.

## meta 태그(charset="UTF-8")
```html
<meta charset="UTF-8" />


```

`head`태그의 안에는 다양한 메타 데이터들이 들어갑니다. `title`태그도 그러한 메타 데이터 중의 하나입니다. `meta`태그는 종류가 많지만 그 중에서도 **가장 중요하다고 할 수 있는 녀석**에 대해 먼저 소개해야겠습니다. 이 녀석은 페이지의 문자와 관련이 되어있습니다. `charset="UTF-8"`라는 속성을 가지게 되면 이 태그가 있는 페이지는 **거의 모든 유니코드를 표현**할 수 있게 됩니다.

![한글이 깨질 수도 있다.](https://drive.google.com/uc?export=view&id=1eMWzyOIVjAfv6R0T34IiMZG7BJfrV8oE)

만일 이 태그가 없다면 **경우에 따라서 한글이 깨질 수**가 있습니다. 그래서 넣어주는 것이 좋습니다. 다음 메타 태그들은 나중에 알아보도록 합시다.

## body 태그
```html
<body>
 
</body>
```

실질적인 컨텐츠가 들어가는 부분입니다. `body`태그의 안에 우리가 작성할 거의 모든 태그들이 들어갑니다. 화면에 보여야 하는 정보들은 전부 이 안에 들어간다고 보면 됩니다. 앞으로 배울 태그들은 거의 다 이 안에 들어갈겁니다.

# 파일 저장하기
여기까지가 기본적인 구조에 해당되는 부분입니다. 여기까지 작성했으면 저장을 합시다. 다른 이름으로 저장을 이용해서 파일 형식은 모든 파일로 설정하고, 파일 이름은 <Name>index.html</Name> 이라고 하겠습니다. 사실 아무거나 해도 됩니다. 인코딩은 UTF-8로 설정해두고 저장을 합시다.

![저장은 이렇게 하면 된다.](https://drive.google.com/uc?export=view&id=1MSmz4cGQC5UtnFB6h-x2yA8p_BtKo6pg)

위의 설명과 이미지를 참고해서 저장을 하시면 되겠습니다. 저장을 하고나면, 실행을 해보세요!

![빈 창이 뜨면 정상이다.](https://drive.google.com/uc?export=view&id=1f83UAD9QoBOZvCWXO8HatZZSbQCDt3t2)

축하합니다! 이제 여러분은 웹 페이지를 만들 수 있습니다! 이것들이 웹 페이지의 가장 기본적인 정수입니다. 이 세상의 모든 웹 사이트들도 전부 이렇게 **HTML로 구성**되어있습니다.

**웹 표준**이나 **SEO**를 충족하기 위해선 더 많은 내용들이 들어가지만 지금은 몰라도 됩니다. 추후에 알게 될 내용들이기 때문이죠. 그런데도 지금 언급하는 이유는 이름이라도 언급해두면 그런게 있다 정도는 알 수 있기 때문입니다.

<Line />

자, 그렇다면 이제 다음 글로 넘어가도록 합시다. 물론, 이 부분이 잘 이해되지 않는다면 **여러 번 읽어보고 이해하고 넘어가는 게** 좋습니다. 이번 글에서 배운 내용은 앞으로 다시는 언급되지 않고 기본적으로 알고 있는 것으로 간주합니다. 웹 페이지를 만든다고 하면 이 기본적인 구조를 적용한 상태로 시작하는 겁니다.

앞으로 배우는 거의 모든 태그들은 <Code>body</Code>태그의 안에 들어간다는 점 다시 한 번 기억하시면 되겠습니다. 그리고 오늘 만든 <Name>index.html</Name>파일은 우리의 프로젝트 폴더에 그대로 남겨두시면 됩니다. 앞으로 이 파일을 메인 프로젝트의 대문처럼 사용할 겁니다.

그럼 이번 글은 여기서 마치도록 하겠습니다. 다음 글에서 봅시다.

이전 글들을 통해서 HTML의 기본적인 사전 지식에 대해 알아봤습니다. 우리는 HTML이 무엇인가에 대해서 알았고 어떻게 생긴 것인지 알았고 문법을 알아봤습니다. 무엇을 할 수 있는지 알았으며 태그의 특성에 대해서도 알아봤습니다. 개발환경도 갖췄으니 이제는 정말로 본격적인 코딩을 시작할 순간입니다. 이번 글에서 아주 간단한 페이지를 하나 만들어보는 것으로 우리는 웹을 이루는 가장 기본적인 구조에 대해서 알아보는 용기 있는 발걸음을 해보려고 합니다. 혹 아직 기초적인 지식이 없다면 이 가이드의 첫 글부터 보고 오시면 좋겠습니다. 그럼 웹 개발을 위한 HTML 가이드 6편 시작합니다.

“ HTML의 기본구조 ” 태그 관련 포스트 1건

웹 개발을 위한 HTML 가이드 6편 - HTML의 기본적인 구조