
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로는 생각할 수 있는 모든 형태의 레이아웃을 구성할 수 있지만 뉴스 사이트라든지 블로그 같은 곳엔 제목이 있고 본문이 있습니다.

<P>HTML은 문서의 측면도 가지고 있기 때문에 제목과 본문이 있습니다. 이 제목은 <Strong>문서에서 중요한 부분을 차지</Strong>합니다. <Mark>어떠한 문서에서 중요한 내용을 콕 찝은 것이 바로 제목이죠.</Mark> HTML에도 제목을 나타내는 태그가 있습니다. 이번 글에서 알아볼 내용은 바로 제목에 대한 태그입니다. 서론은 여기까지하고 바로 본론으로 들어갑시다. 웹 개발을 위한 HTML 가이드 10편 지금 시작합니다.</P>

# 제목 태그
HTML의 제목 태그에는 **여섯가지의 단계**가 있습니다. 각 태그의 이름은 **제목**을 의미하는 영단어 **Heading**의 약자인 h와 숫자 1 ~ 6을 합친 `h1` ~ `h6`입니다. 숫자가 클수록 큰 제목입니다.

```html
<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
<h4>제목 4</h4>
<h5>제목 5</h5>
<h6>제목 6</h6>
```

<P>자 그럼 이제 코딩을 시작해봅시다. 우리가 예전에 저장해뒀던 <Name>index.html</Name>파일을 꺼낼 때가 왔습니다. 메모장으로 이 파일을 불러와서 <Code>body</Code>태그 안에 위의 코드를 작성하면 되겠죠. 복붙을 해도 좋겠지만 직접 타이핑을 하는 것이 학습에 도움이 됩니다. <Bold>현재 이 가이드는 HTML의 기본적인 구조는 알고 있다는 전제하에 진행하는 중입니다. 기본적인 구조를 모른다면 이전의 가이드를 열람하고 오셔야 합니다.</Bold></P>

<P>이렇게 적으면 아래와 같은 상황이 되었을 겁니다. 이제 저장을 하면 되는데, 그냥 <Kbd>CTRL + S</Kbd>를 누르면 됩니다. 그러면 저장이 되죠. 우리가 파일 이름을 <Name>index.html</Name><NoteTop number='1'/>이라고 한 건 이유가 있습니다. 그 이유는 나중에 다뤄보도록 하겠습니다. 각주 타고 링크 들어가서 읽어봐도 됩니다.</P>

아무튼, 저장을 했으니까 저장한 파일을 실행해봅시다. 실행을 하면, 다음과 같이 나타납니다. **제목 1이 가장 크고 제목 6이 가장 작습니다.** 이것은 어디까지나 기본 디자인일 뿐이고 우리가 CSS를 통해서 언제든지, 어떠한 모양으로든 바꿔줄 수 있습니다.

![저장한 파일을 실행한 브라우저의 모습.](https://drive.google.com/uc?export=view&id=1z-Z-ha1IfVua0Rq1eKA0y6C4pgfzXuMN)

이렇게 떠야 정상입니다. 그렇지 않다면 뭔가.. 잘못된 겁니다. 아무튼, 이렇게 제목으로만 이루어진 웹 페이지가 만들어졌습니다. 하지만 전혀 쓸모가 없는 웹 페이지죠. 우리는 앞으로 다양한 태그를 배우면서 이 웹페이지를 꾸며볼 겁니다.

## 주의사항
제목 태그에 대한 기본적인 건 마쳤습니다. 제목은 이 태그로 나타내고, 제목 아래의 중제목 소제목 같은 개념은 `h1`태그보다 작은 태그를 적절하게 잘 사용하면 되겠죠. 그런데 중요한 내용이 남아있습니다. 제목 태그를 사용하면서 주의해야 할 사항입니다.

**하나의 웹 페이지에서 가장 큰 제목 태그가 두 번 이상 사용되면 안된다**는 점입니다. 이게 무슨 말이냐면 `h1`태그를 두번 이상 사용하면 안된다는 것입니다. 가장 큰 제목인데 그게 두개가 되어버리면 검색 엔진이 혼동을 할 수 있기 때문입니다.

이러한 부분이 웹 표준으로 권장되고 있기 때문에 HTML을 배우는 우리는 **웹 표준**에 맞게 공부하는 게 중요합니다. 상세한 이유에 대해서는 자세하게 알아봐도 지금은 너무 어려울겁니다. 나중에 시간이 되면 그때 알아보도록 하고 가장 큰 제목은 한 페이지에 한 번만 사용한다. 라는 점을 기억하시기 바랍니다.

# 실전 연습
주의사항을 적용해서 **실습**을 해보도록 합시다. 우리는 웹 개발에 대한 기초를 배우는 중입니다. 그래서 그 기초를 간단하게 설명해주는 웹 페이지를 우리의 손으로 직접 만들어보면 좋을 것 같다는 생각이 들었습니다. 우리는 앞으로 우리가 만든 <Name>index.html</Name>파일을 계속해서 발전시켜 나아갈 겁니다.

우선 우리 프로젝트의 주제를 `h1`태그로 표현해봅시다. 물론 위에서 작성한 것들은 지워도 무방합니다.

```html file=index.html
<h1>웹 개발의 3요소</h1>
```

우리는 **HTML**과 **CSS**, **JS**를 전부 다루게 될 겁니다. `h2`태그로 각각의 요소를 부제목으로 표현해봅시다. `h2`태그를 사용하는 이유는 `h1`태그보다 아래에 있어야 할 내용들이기 때문이고 `h1`태그는 이미 사용했으니까 사용할 수 없기 때문입니다.

```html file=index.html
<h1>웹 개발의 3요소</h1>
<h2>HTML</h2>
<h2>CSS</h2>
<h2>JavsScript</h2>
```

내용만 적으면 이 페이지가 뭘 의미하는지 알 수가 없으니까 제목도 정해줍시다. `head`태그 안에 `title`태그가 있다는 것을 잊지 않았겠죠? 바꿔봅시다.

```html
<title>웹 개발의 3요소</title>
```

이렇게 하면 최종적으로 아래와 같은 모양이 되었을 겁니다. 주석은 다 없애도 됩니다.

```html file=index.html
<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8" />
  <title>웹 개발의 3요소</title>
</head>

<body>
  <h1>웹 개발의 3요소</h1>
  <h2>HTML</h2>
  <h2>CSS</h2>
  <h2>JavsScript</h2>
</body>

</html>
```

![프로젝트 첫번째 과정.](https://drive.google.com/uc?export=view&id=1H1Cmo7li0fzQ28qdbsUy01MaYcCCzgOS)

<P>이 코드는 <A href='https://github.com/nihil-programming-guide/web-tuto/blob/master/HTML/01-first-html/index.html' type='normal'>web-tuto</A> 깃허브에 올려두었습니다. 아직은 정말 별 거 없지만 점점 뭔가가 추가되는 것을 경험하면서 웹은 이렇게 만들어진다 라는 것을 함께 익혀가게 될 겁니다. 우리는 지금 원하는 웹 페이지를 만들었다는 것 자체에 큰 의의가 있습니다.</P>

<Line />

이제 마칠 때가 된 거 같습니다. 이번 글에서는 간단하게 제목 태그에 대해서 알아봤습니다. 나중에야 알게 되겠지만 제목 태그는 중요합니다. 잘 기억해두시고 여러번 타이핑하면서 연습해봅시다. 저번 글에서는 `div`태그와 `span`태그도 배웠었죠. 제목 태그와 함께 연습해보면 좋을 듯합니다.

다음 글에서는 **문단을 만들어내는 태그**에 대해서 알아봅시다. 이번글은 여기까지입니다. 다음 글에서 봅시다.

<NoteBottom number='1' first={true}><Strong>어떠한 폴더(경로)</Strong>의 <Strong>기본 파일</Strong>이 될 파일의 이름은 <Strong>index</Strong>라고 짓는다. <Name>index.html</Name>이라는 파일은 해당 폴더의 기본 웹 페이지가 된다. 자세한 설명은 <A type='blog' href='/post/2021-09-04-01-filename-index'>이 링크</A>를 참고하자.</NoteBottom>


문서는 어떠한 것을 설명하는 목적이 다분하기 때문에 제목이 있고 본문이 있고 그 외의 부분들로 나누어지는 것이 보통입니다. 웹에서도 마찬가지입니다. HTML로는 생각할 수 있는 모든 형태의 레이아웃을 구성할 수 있지만 뉴스 사이트라든지 블로그 같은 곳엔 제목이 있고 본문이 있습니다. HTML은 문서의 측면도 가지고 있기 때문에 제목과 본문이 있습니다. 이 제목은 문서에서 중요한 부분을 차지합니다. 어떠한 문서에서 중요한 내용을 콕 찝은 것이 바로 제목이죠. HTML에도 제목을 나타내는 태그가 있습니다. 이번 글에서 알아볼 내용은 바로 제목에 대한 태그입니다. 서론은 여기까지하고 바로 본론으로 들어갑시다. 웹 개발을 위한 HTML 가이드 10편 지금 시작합니다.

“ 제목태그 ” 태그 관련 포스트 1건

웹 개발을 위한 HTML 가이드 10편 - 제목 태그(h1~h6)