
import {
  HTMLTextPosts, 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/>

<HTMLTextPosts/>

# 개요
저번 글 [웹 개발을 위한 HTML 가이드 23편 - code, pre 태그](/post/2022-03-29-39-code-and-pre-tag)에서 예고했던대로 이번 글에서는 HTML에서 사용할 수 있는 탈출 문자에 대해서 알아보려고 합니다.

HTML은 웹 페이지의 골격을 만들기 위해 존재합니다. 여기까지는 이제는 다들 아실 것 같아요. 그런데, 이 페이지에 사용되는 문자 중에는 태그 요소에 사용되는 꺽쇠가 쓰일 때가 있습니다. 이 문서처럼 HTML 문법에 관련된 컨텐츠일 경우엔 더더욱 그렇겠죠. 그럴 때 HTML 파일에 꺽쇠를 생각 없이 적으면 **웹 페이지가 깨져버릴 수가 있습니다.**

왜냐하면 HTML을 실행하면 브라우저가 검사하면서 렌더링을 해주는데 이 과정에서 꺽쇠를 만나면 태그 요소라고 인식을 해버리기 때문입니다. 웹 페이지가 깨져버리면 우리가 원하는 모양이 나오지 않기 때문에 일종의 버그라고 할 수 있겠죠. 이러한 현상을 방지 하기 위해 우리는 **탈출 문자**를 사용합니다.

# 탈출 문자
탈출 문자는 프로그래밍을 하면서 특수문자를 사용할 때 혹은 프로그램적인 제한에서 탈출하기 위해 사용하는 문자들입니다. 이러한 행위들을 **Escape**라고 합니다. 다른 프로그래밍 언어들에도 탈출 문자는 존재합니다. 아무튼 이 글에서는 HTML에 한정된 것들을 다루려고 합니다. 전부를 다루는 것은 어려우니까 자주 다루는 것만 추려서 보여드리도록 하겠습니다.

<Message color='g'>
  <p>HTML에서 사용하는 탈출문자의 올바른 표현은 <Strong>엔티티 코드(Entity Code)</Strong>입니다.</p>
</Message>

## 자주 사용하는 특수문자
이 아래는 자주 사용하는 특수문자들을 HTML 문법과 충돌하지 않게 사용하는 방법들입니다.

<Dl>
  <Dt>\&lt;</Dt>
  <Dd>&lt;(여는 꺽쇠)를 나타냅니다.</Dd>
  <Dt>\&gt;</Dt>
  <Dd>&gt;(닫는 꺽쇠)를 나타냅니다.</Dd>
  <Dt>\&nbsp;</Dt>
  <Dd>공백을 나타냅니다.</Dd>
  <Dt>\&amp;</Dt>
  <Dd>&amp;를 나타냅니다.</Dd>
  <Dt>\&quot;</Dt>
  <Dd>&quot;(큰따옴표)를 나타냅니다.</Dd>
</Dl>

```html
<p>태그는 보통 &lt;이름&gt;과 &lt;/이름&gt;으로 감쌉니다.</p>
```

![엔티티 코드를 사용한 모습이다.](https://drive.google.com/uc?export=view&id=1RfF1tkQVpIANn_1Zjb6KYa-RHTpOwj-3)

이런 느낌으로 사용하시면 되겠습니다.

## 그 외의 문자들
<P>위의 내용들은 알아두면 좋은 내용들이지만 사실 반드시 알아야 하지는 않습니다. 어차피 필요하면 찾아보면 되니까요. 그럴 때 <A type='normal' href='https://dev.w3.org/html5/html-author/charref'>이 사이트</A>에서 찾아보시면 되겠습니다. 되게 상당한 개수의 특수문자들이 존재합니다.</P>

<Line />

<P>이번 글에서는 HTML 상에서 특수문자를 제한없이 사용하는 방법인 <Strong>탈출(Escape)</Strong>에 대해서 알아봤습니다. 사실 탈출문자는 다른 프로그래밍 언어들에서 더 많이 찾게 될 겁니다. 그 때가 언젠가는 오시기 바라면서 이번 글 마치도록 하겠습니다. 다음 글에서는 <Strong>나머지 텍스트 관련 태그들</Strong>에 대해서 다뤄보도록 하겠습니다. 다음 글에서 봅시다.</P>


저번 글 웹 개발을 위한 HTML 가이드 23편 - code, pre 태그에서 예고했던대로 이번 글에서는 HTML에서 사용할 수 있는 탈출 문자에 대해서 알아보려고 합니다. HTML은 웹 페이지의 골격을 만들기 위해 존재합니다. 여기까지는 이제는 다들 아실 것 같아요. 그런데, 이 페이지에 사용되는 문자 중에는 태그 요소에 사용되는 꺽쇠가 쓰일 때가 있습니다. 이 문서처럼 HTML 문법에 관련된 컨텐츠일 경우엔 더더욱 그렇겠죠. 그럴 때 HTML 파일에 꺽쇠를 생각 없이 적으면 웹 페이지가 깨져버릴 수가 있습니다. 왜냐하면 HTML을 실행하면 브라우저가 검사하면서 렌더링을 해주는데 이 과정에서 꺽쇠를 만나면 태그 요소라고 인식을 해버리기 때문입니다. 웹 페이지가 깨져버리면 우리가 원하는 모양이 나오지 않기 때문에 일종의 버그라고 할 수 있겠죠. 이러한 현상을 방지 하기 위해 우리는 탈출 문자를 사용합니다.

웹 개발을 위한 HTML 가이드 번외 3편 - 탈출문자 사용하기


import { HTMLTextPosts, 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/>

<HTMLTextPosts/>

# 개요
이번 글은 웹 개발을 위한 HTML 가이드 23편입니다. 이번 글에서는 두가지의 태그를 알아보려고 합니다. `code`태그와 `pre`태그입니다. 이 **두 태그는 웹 상에서 코드를 문자 그대로 보여주는 역할을 합니다.** 보통은 코드 예시를 보여줄 때에 사용하는 편입니다. 이 블로그에서 찍어온 아래의 두 이미지처럼 말이죠.

![code, pre 태그 예시 1](https://drive.google.com/uc?export=view&id=1yaidFV9h49vtiyPxK7ZTo4NspDsRbPOA)
![code, pre 태그 예시 2](https://drive.google.com/uc?export=view&id=17N_SBitbT7znsyQic7fmrKMFP0vOs7iD)

어떤 태그에 대해서 살펴볼 것인지는 알았으니 이제 본론으로 들어가도록 합시다.

# code 태그
`code`태그는 코드의 이름이나 내용을 언급하고 싶을 때에 사용합니다. 인라인 태그이며 기본적으로는 줄바꿈이 되지 않습니다. 사실 이 글에서도 많이 쓰이고 있습니다.

```html
<p>자바스크립트로 콘솔에 아이유 좋아! 라는 내용을 띄우고 싶으면 <code>console.log('아이유 좋아!')</code>을 사용한다.</p>
```

![code 태그를 사용한 모습이다.](https://drive.google.com/uc?export=view&id=1a3s30cfh_1GrHDHr4s4O9iVDgnZ3hwya)

위 이미지는 `code`태그를 사용한 페이지입니다. `code`태그는 내용물을 기본 텍스트와 다른 모양으로 보여줍니다. 잘 보면 글꼴이 다른 것을 볼 수 있죠. 이런 문제는 나중에 스타일을 입혀서 디자인을 하면 되는 부분이기 때문에 중요한 것은 아닙니다.

`code`태그는 인라인 태그라고 했습니다. 이 말은 문단 내에 사용한다는 이야기죠. 그렇다면 여러줄의 코드를 보여주고 싶다면 어떻게 해야할까요? 바로 그 때! `pre`태그를 이용하면 됩니다.

# pre 태그
사실 `pre`태그는 코드를 있는 그대로 보여주는 태그는 아닙니다. 하지만 `br`태그를 사용하지 않아도 줄바꿈을 가능하게 만들어주기 때문에 `code`태그와 함께 사용되는 것이 보통입니다. 일단 `pre`태그만 사용된 경우를 보여드리겠습니다.

```html
<pre>
  <span>아이유</span>
  <span>만세</span>
</pre>
```

![pre 태그를 사용한 모습이다.](https://drive.google.com/uc?export=view&id=1zCeEAVEfQWyQbmn6RVuGRKDKjjpXSe9Z)

`pre`태그는 안에 있는 태그들의 효과를 무효화하지 않지만 이렇게 줄바꿈이 되고 공백마저도 그대로 나타내는 것을 볼 수 있습니다.

# 함께 사용하기
이번에는 `pre`태그를 `code`태그와 함께 사용한 경우를 보여드리겠습니다. 보통은 아래처럼 동시에 사용하여 코드를 보여줄 때에 사용합니다. 현재 이 블로그에도 이런식으로 구성이 되어있습니다.

```html
<p>아래는 자바스크립트에서 클래스를 만드는 방법입니다.</p>

<pre>
  <code>
    class Person {
      constructor(name, age) {
        this.name = name;
        this.age = age;
      }
    }

    const nihil = new Person('NIHILncunia', 30);
  </code>
</pre>
```

![pre 태그와 code 태그를 함께 사용한 모습이다.](https://drive.google.com/uc?export=view&id=1Tgv0MT6rU6_bewOMQ3NiFG9VPvIJyedg)

하지만 착각하면 안되는 점은 `pre`태그나 `code`태그의 안에 들어간 내용이 태그일 때에 **태그 자체를 무효화하지는 않는다는 점**입니다. `pre`태그와 `code`태그를 함께 사용해서 HTML 코드를 보여주고 싶을 때에는 꺽쇄를 사용하면 안됩니다. 꺽쇄를 사용하면 HTML 문법을 적용하는 게 되기 때문입니다.

그럼 어떻게 해야할까요? 지금 다루기는 좀 어렵고... 이에 대한 해결책을 바로 다음 글에서 다룹니다. 다음 글은 **HTML에서 특수문자를 사용할 수 있는 탈출문자에 대해**서 다루도록 하겠습니다.

<Line />

이번 가이드에서 준비된 내용은 여기까지입니다. 이번 글에서는 `pre`태그와 `code`태그에 대해서 알아봤습니다. 이 두 태그는 웹 상에서 코드를 보여주고 싶을 때에 사용한다. 라는 점을 잘 이해하시면 되겠습니다. 다음 글에서는 위에서 예고했던대로 탈출문자에 대해서 알아볼 예정입니다. 그럼 이번 글은 여기서 마치도록 하겠습니다. 다음 글에서 봅시다.


이번 글은 웹 개발을 위한 HTML 가이드 23편입니다. 이번 글에서는 두가지의 태그를 알아보려고 합니다. code태그와 pre태그입니다. 이 두 태그는 웹 상에서 코드를 문자 그대로 보여주는 역할을 합니다. 보통은 코드 예시를 보여줄 때에 사용하는 편입니다. 이 블로그에서 찍어온 아래의 두 이미지처럼 말이죠. 어떤 태그에 대해서 살펴볼 것인지는 알았으니 이제 본론으로 들어가도록 합시다. code태그는 코드의 이름이나 내용을 언급하고 싶을 때에 사용합니다. 인라인 태그이며 기본적으로는 줄바꿈이 되지 않습니다. 사실 이 글에서도 많이 쓰이고 있습니다.

웹 개발을 위한 HTML 가이드 23편 - code, pre 태그


import { HTMLTextPosts, 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 />

<HTMLTextPosts />

# 제목
이번 글은 **웹 개발을 위한 HTML 가이드** 22편입니다. 이번 글에서 다룰 내용은 저번 글에서 예고했던대로 `small`태그입니다. 텍스트 관련 태그도 어느정도 진행이 된 것 같습니다. 이제 정말 얼마 안남았거든요. 사실 이번 글에서 다룰 내용도 그다지 중요한 내용은 아닙니다. 그래도 일단은 다루고 넘어가려고 합니다. 그럼 바로 본론으로 들어가봅시다.

# small 태그
<P><Code>small</Code>태그는 작은 텍스트를 표현할 때에 사용합니다. <Strong>기존의 텍스트보다 약간 작아지는 효과</Strong>를 가지고 있습니다. 특별한 의미나 기능을 가지는 태그는 아니기 때문에 몰라도 좋<Bold>았으나</Bold> 지금은 특별한 의미가 생겼습니다.</P>

```html file=small.html
<p>small 태그는 이렇게 <small>작은 텍스트를 표현할 때에 사용합니다.</small></p>
```

vscode를 열고 대충 따라서 입력을 해보고 라이브 서버를 열어보세요. 그럼 아래와 같은 결과물이 나타나게 됩니다.

![small 태그를 사용한 모습이다.](https://drive.google.com/uc?export=view&id=1GYLGBvF4ZU0xWwQkaqbsNejfXbgcqrtk)

정말 텍스트가 작아졌습니다. **HTML 5**가 나타나면서 `small`태그에 변화가 생겼습니다. 현재는 페이지의 본문에 비해 비교적 중요도가 떨어지는 작은 영역에 쓰는 것을 권장하고 있습니다. 이를테면 저작권을 표기하는 부분을 예로 들 수 있겠습니다.

![small 태그의 기본 스타일.](https://drive.google.com/uc?export=view&id=1dy5i3KktKWJ1Z-LDFdbl39s3_Jrtn5hM)

`small`태그를 사용하지 않고도 똑같은 효과를 만드는 방법이 있는데, 바로 **CSS를 활용**하는 것입니다. 우리는 아직 CSS를 배우지 않았기 때문에 아래의 코드를 봐도 아 이런 게 있구나라는 시선으로 바라보면 되겠습니다.

보면 알겠지만 `small`태그에는 `font-size: smaller;`라는 CSS가 적용되어 있습니다. `small`태그의 기본 스타일 입니다. 그렇기 때문에 위의 코드와 아래의 코드는 동일한 셈입니다. 이렇게 CSS를 활용해도 되고 `small`태그를 활용해도 됩니다. 물론 외관상으로는 동일하지만 그 의미는 전혀 다르다는 점을 인지하고 있어야합니다.

```html file=small.html
<p>small 태그는 이렇게 <span>작은 텍스트를 표현할 때에 사용합니다.</span></p>
```

```css
span {
  font-size: smaller;
}
```

<Line />

이번 글에서는 간단하게 `small`태그에 대해서 알아봤습니다. 저작권이나 연락처 같은 비교적 중요도가 떨어지는 부분에 사용하는 태그였습니다. 이번 글에서 준비한 내용은 여기까지입니다. 다음 글에서는 코드 블럭을 다루는 `code`태그와 `pre`태그에 대해서 알아보도록 하겠습니다. 이번 글은 여기서 마치도록 하고 다음 글에서 봅시다.


이번 글은 웹 개발을 위한 HTML 가이드 22편입니다. 이번 글에서 다룰 내용은 저번 글에서 예고했던대로 small태그입니다. 텍스트 관련 태그도 어느정도 진행이 된 것 같습니다. 이제 정말 얼마 안남았거든요. 사실 이번 글에서 다룰 내용도 그다지 중요한 내용은 아닙니다. 그래도 일단은 다루고 넘어가려고 합니다. 그럼 바로 본론으로 들어가봅시다. small태그는 작은 텍스트를 표현할 때에 사용합니다. 기존의 텍스트보다 약간 작아지는 효과를 가지고 있습니다. 특별한 의미나 기능을 가지는 태그는 아니기 때문에 몰라도 좋았으나 지금은 특별한 의미가 생겼습니다.

웹 개발을 위한 HTML 가이드 22편 - small 태그


import { HTMLTextPosts, 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 />

<HTMLTextPosts />

# 제목
<P>이번 글은 웹 개발을 위한 HTML 가이드 21편입니다. 이번 글의 주제는 하이라이트 태그입니다. 우리는 <Mark>간혹 어떤 페이지 내에서 그 페이지와 연관이 있는 단어나 내용을 강조하고 싶을 때가 있습니다.</Mark> 이 연관성에 초점을 두고 사용하는 태그가 바로 <Strong>하이라이트</Strong>를 위한 태그입니다. 이번에 알아볼 태그는 바로 <Code>mark</Code>태그입니다.</P>

# mark 태그
```html file=mark.html
<h1>아이유 생일</h1>
<p>
  아이유의 생일은 <mark>5월 16일</mark>입니다.
</p>
```

![mark 태그는 연관성을 강조한다.](https://drive.google.com/uc?export=view&id=1GDn2C51M0o6zNn7nNwR0OX97h9pwkiDm)

`mark`태그의 기본적인 디자인은 노란색 배경입니다. 마치 형광펜으로 그은 것처럼 표시가 되어있죠. 그래서 **하이라이트**라고 하는 겁니다. `mark`태그는 HTML 5에서 처음 등장했습니다. 사용자들에게 원하는 부분을 찾는 수고를 덜하게끔 하기 위해서 하이라이트를 통해 표시를 할 때 사용합니다.

<P>단어나 문장을 강조한다는 점에서 <Code>em</Code>태그나 <Code>strong</Code>태그와 비슷하죠. 하지만 이 두가지는 <Strong>중요성</Strong>을 강조하는 것이고 <Code>mark</Code>태그는 <Strong>연관성</Strong>을 강조한다는 것이 다릅니다. <Mark>따라서 중요하지 않더라도 주제와 연관이 있는 문구, 단어를 강조</Mark>할 수 있습니다. 현재 이 글의 붉은색 배경의 텍스트가 바로 <Code>mark</Code>태그가 사용된 부분입니다.</P>

<Line />

이번 글에서는 하이라이트를 담당하는 태그인 `mark`태그에 대해서 알아봤습니다. `mark`태그는 `em`태그나 `strong`태그처럼 단어나 문장을 강조하지만 **중요성이 아닌 연관성을 초점으로 두고 강조하는 점**이 다릅니다. 이번 글에서 준비된 내용은 여기까지입니다.

이번 글은 여기서 마치도록 하겠습니다. 다음 글에서는 `small`태그에 대해서 알아봅시다.


이번 글은 웹 개발을 위한 HTML 가이드 21편입니다. 이번 글의 주제는 하이라이트 태그입니다. 우리는 간혹 어떤 페이지 내에서 그 페이지와 연관이 있는 단어나 내용을 강조하고 싶을 때가 있습니다. 이 연관성에 초점을 두고 사용하는 태그가 바로 하이라이트를 위한 태그입니다. 이번에 알아볼 태그는 바로 mark태그입니다. mark태그의 기본적인 디자인은 노란색 배경입니다. 마치 형광펜으로 그은 것처럼 표시가 되어있죠. 그래서 하이라이트라고 하는 겁니다. mark태그는 HTML 5에서 처음 등장했습니다. 사용자들에게 원하는 부분을 찾는 수고를 덜하게끔 하기 위해서 하이라이트를 통해 표시를 할 때 사용합니다.

웹 개발을 위한 HTML 가이드 21편 - 하이라이트 태그


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, HTMLTextPosts
} from '@/components/Post';

<HtmlGuideMessage />

<HTMLTextPosts />

# 개요
2021년도 막바지에 이르렀습니다. 사실 올해도 그닥 대단한 일은 한 게 없고 공부만 주야장천 한 것 같습니다. 다가오는 2022년에는 좀 더 새로운 변화를 주고 좀 더 나은 사람이 되려고 노력해보려고 합니다. 그래서 새로운 마음으로 밤낮도 바꿔보고 있습니다. 잘 안된다는 게 함정이지만.

그래서 상쾌한 마음으로 오랜만에 글을 하나 남겨봅니다. 이번 글은 **웹 개발을 위한 HTML 가이드** 20편입니다. 텍스트 관련 태그의 6번째 글이고 이번 글에서 다룰 내용은 **인용 태그**입니다. 인용이라는 것은 우리가 일상 생활을 하면서도 볼 수 있고 다양한 글에서도 발견할 수 있죠. 인용은 다른 사람의 말을 가져와서 비유하는데에 쓰거나 설명하는데에 쓰는 것을 말합니다. 자신이 하고 싶은 말이 있을 때 인용을 통해서 대신할 수도 있고 말입니다.

**CSS**를 함께 다뤄야 좀 더 의미가 있는 태그지만 일단은 그냥 알아보도록 합시다.

# 인용 태그
암튼 그래서 이번에 알아볼 인용 태그에는 **두 가지의 태그**가 존재합니다. 하나는 **블럭 형식의 태그**고 나머지 하나는 **인라인 형식의 태그**입니다. 이 두가지의 태그를 경우에 따라서 사용하면 되겠습니다.

## q 태그
문단 내에 **인용문을 넣고 싶을 때**에 사용하는 `q`태그는 인라인 형식의 태그입니다. 긴 인용문이 아닌 **짧은 인용문을 표현**할 때에 사용합니다.

```html file=q.html
<p>
  아이유가 맡은 장만월이라는 캐릭터는 <q cite="url">넌 0순위야. 너 아니면 안 되는 거 맞아. 내 마음에 쏙 들었으니까.</q> 라는 말을 한 적이 있다.
</p>
```

![q 태그는 따옴표가 붙는다.](https://drive.google.com/uc?export=view&id=1U-Cps5tBoWcDnftiyjx3VC8aNkUp2BfQ)

`q`태그는 이렇게 열고 닫는 태그입니다. 안에 내용을 넣어주면 됩니다. 브라우저에서는 보이는 것처럼 따옴표가 둘러쌓이게 됩니다. 인라인 형식의 태그이기 때문에 `p`태그 안에서 사용하는 게 보통입니다.

사용 가능한 속성으로는 `cite`속성이 있습니다. 여기에는 **출처가 되는 url**를 넣으면 됩니다.

## blockquote 태그
이번에는 블럭 형식의 인용 태그를 알아봅시다. 블럭 형식이기 때문에 줄바꿈을 함께 사용할 수 있습니다. **짧은 인용이 아닌 긴 인용문을 넣을 때**에 이 `blockquote`태그를 사용합니다.

```html file=blockquote.html
<p>아이유는 호텔 델루나라는 드라마에서 장만월이라는 역할을 맡았다. 그 캐릭터는 아래와 같은 대사를 한 적이 있다.</p>
<blockquote cite="url">
  넌 0순위야. 너 아니면 안 되는 거 맞아.
  내 마음에 쏙 들었으니까.
</blockquote>
```

![blockquote 태그는 문단과 구분된다.](https://drive.google.com/uc?export=view&id=1aZtSZNoX3xeKIvPhvOC1sQNAeg0Co5RG)

이 태그도 여는 태그와 닫는 태그가 있어서 이런식으로 사용하면 됩니다. `blockquote`태그는 따옴표가 생기지 않는 대신 자동으로 **들여쓰기가 되고 일반 문단이랑 구분된 모습**을 갖게 됩니다.

`blockquote`태그에도 `cite`속성이 사용됩니다. **url**을 넣어주시면 됩니다. `blockquote`태그는 이렇게만 사용하면 당연히 밋밋하고 심심한 디자인이죠. 그래서 CSS를 통해 바꾸는 편입니다. 가 아니라 그냥 바꿔야 합니다. HTML은 CSS와 떼려야 뗄 수 없는 관계입니다. 언젠가는 알게 되실겁니다.

<Line />

이번 글에서는 간단하게 인용 태그들에 대해서 알아봤습니다. **인용 태그는 두가지**가 있고 **인라인 형식인 `q`태그**와 **블럭 형식인 `blockquote`태그**가 있습니다. 이 두 태그는 상황에 맞게 사용하면 되겠습니다. 이번 글에서 준비된 내용은 여기까지입니다. 다음 글에서는 **하이라이트 태그**에 대해서 알아보도록 합시다.

이번 글은 여기서 마치도록 하겠습니다. 다음 글에서 봅시다.


2021년도 막바지에 이르렀습니다. 사실 올해도 그닥 대단한 일은 한 게 없고 공부만 주야장천 한 것 같습니다. 다가오는 2022년에는 좀 더 새로운 변화를 주고 좀 더 나은 사람이 되려고 노력해보려고 합니다. 그래서 새로운 마음으로 밤낮도 바꿔보고 있습니다. 잘 안된다는 게 함정이지만. 그래서 상쾌한 마음으로 오랜만에 글을 하나 남겨봅니다. 이번 글은 웹 개발을 위한 HTML 가이드 20편입니다. 텍스트 관련 태그의 6번째 글이고 이번 글에서 다룰 내용은 인용 태그입니다. 인용이라는 것은 우리가 일상 생활을 하면서도 볼 수 있고 다양한 글에서도 발견할 수 있죠. 인용은 다른 사람의 말을 가져와서 비유하는데에 쓰거나 설명하는데에 쓰는 것을 말합니다. 자신이 하고 싶은 말이 있을 때 인용을 통해서 대신할 수도 있고 말입니다.

웹 개발을 위한 HTML 가이드 20편 - 인용 태그


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, HTMLTextPosts
} from '@/components/Post';

<HtmlGuideMessage />

<HTMLTextPosts />

# 개요
MS 오피스의 워드나 한컴 오피스의 한글 같은 경우 그리고 웹상에서 볼 수 있는 수많은 밑줄과 취소선들 또한 태그로 간단하게 처리할 수 있습니다. 이번 글 **웹 개발을 위한 HTML 가이드 19편**에서는 취소선과 밑줄을 나타내는 태그에 대해서 알아봅시다. 여러분이 웹 페이지를 구성하면서 텍스트에 밑줄이나 취소선을 넣고 싶다면 이번 글에서 알게 된 내용을 적용하면 됩니다.

이번 글의 내용은 가이드라고 하기 민망할 정도로 아주 간단하고 짧습니다. 가볍게 보고 넘어가시면 되겠습니다. 그럼 **웹 개발을 위한 HTML 가이드 19편**을 시작하도록 합시다.

# 취소선 태그(s)
<P>취소선이라고 하면 가운데에 줄이 그어지는 것을 말합니다. <Strike>이렇게 줄이 그어지죠.</Strike> 물론 색깔이 바뀌지는 않습니다. 이 글은 스타일이 입혀져 있어서 그렇다는 것을 이해하고 지나가주세요. 아무튼, 너무 간단하니까 간단하게 코드만 보고 넘어가도록 합시다. 취소선은 <Code>s</Code>태그로 구현합니다. 여는 태그가 있고 닫는 태그가 있습니다.</P>

```html
<p>아이유 <s>바보!</s>좋아!</p>
```

![s태그를 사용한 모습.](https://drive.google.com/uc?export=view&id=1DHo52iia4wcXqI8lyOnrIM8pRygTNqL3)

이 취소선이 의미하는 바는 **더 이상 정확하지 않은 내용임을 나타내는 것**입니다. 그저 취소선을 그어주는 것이 아니라 이 취소선이 그어진 내용은 현재에 이르러서는 정확하지 않고 확실하지 않다. 라는 의미로 사용됩니다. `s`태그는 사라졌다가 **HTML 5버전**이 되면서 다시 나타난 태그입니다. 이정도까지는 사실.. 몰라도 됩니다. 중요한 것은 이 태그의 의미입니다.

# 밑줄 태그???
밑줄을 만들어주는 태그는 `u`태그 입니다. 아니 정확히는 **밑줄을 만들어주는 태그는 `u태그`**였습니다. 하지만 HTML 5버전이 되면서 `u`태그는 새로운 의미를 얻었습니다. 더 이상 밑줄을 의미하지 않고 **맞춤법이 틀렸을 때** 이를 표시하는 것을 목적으로 주로 사용합니다. `u`태그는 `s`태그와 마찬가지로 재활용된 태그입니다.

그러니까 밑줄을 나타내는 태그는 없습니다. 밑줄을 만들려면 우리는 **CSS**를 배우지 않았지만, 밑줄은 **CSS**를 사용해야 합니다. 자 , 지금부터의 내용은 잠깐동안 머리가 아플 수 있습니다. 지금은 그냥 이런 게 있다. 라는 것만 보고 넘어가시면 됩니다.

```html
<p>아이유가 <span class="underline">오마이걸</span>을 언급한 뒤로 오마이걸 영상을 자주 찾아보게 되었다.</p>
```

밑줄이 필요한 부분을 `span`태그로 감싸주는 게 먼저입니다. 그리고 **클래스**를 지정하세요. 여러번 사용될 수 있기 때문에 클래스를 지정하는 겁니다. 그 다음에 CSS를 지정해주면 됩니다. 보기만 하시면 됩니다.

```css
.underline {
  text-decoration: underline;
}
```

이런식으로 지정하면 아래의 이미지와 같은 효과가 나타납니다. 다만 이 경우에는 CSS를 사용하면 큰 의미는 가지지 않는 밑줄을 만들어냅니다. 중요한 내용이라면 밑줄을 넣을 게 아니라 `strong`태그나 `em`태그를 사용하면 되겠죠.

![밑줄이 나타난 것을 볼 수 있다.](https://drive.google.com/uc?export=view&id=1iIwA65znzyUAiaZthExCuvxBnhIRGIEP)

<Line />

분명히 짧은 내용인데 어떻게 간단하게 설명할 수 있을까를 고민해봤습니다. 제가 다시 공부하면서 남들에게 설명하고자 하는 취지로 만드는 가이드이다보니 쉽지가 않긴 하네요. 더 쉽게 설명할 수 있도록 트레이닝을 해봐야겠습니다. HTML 가이드인데 CSS가 간간히 튀어나오는 것은 어쩔 수가 없는 것 같긴 하지만요.

아무튼, 이번 글에서는 **취소선과 밑줄**에 대해서 알아봤습니다. 취소선은 태그를 이용하면 되지만 무작정 남발해서는 안됩니다. 밑줄의 경우에는 **현재 HTML 상에서는 밑줄을 의미하는 태그는 존재하지 않는다**는 것을 다시 한 번 이해하고 넘어가시면 되겠습니다.

이번 글의 내용은 여기까지 입니다. 다음 글에서는 **인용 태그**에 대해서 알아보도록 합시다.


MS 오피스의 워드나 한컴 오피스의 한글 같은 경우 그리고 웹상에서 볼 수 있는 수많은 밑줄과 취소선들 또한 태그로 간단하게 처리할 수 있습니다. 이번 글 웹 개발을 위한 HTML 가이드 19편에서는 취소선과 밑줄을 나타내는 태그에 대해서 알아봅시다. 여러분이 웹 페이지를 구성하면서 텍스트에 밑줄이나 취소선을 넣고 싶다면 이번 글에서 알게 된 내용을 적용하면 됩니다. 이번 글의 내용은 가이드라고 하기 민망할 정도로 아주 간단하고 짧습니다. 가볍게 보고 넘어가시면 되겠습니다. 그럼 웹 개발을 위한 HTML 가이드 19편을 시작하도록 합시다. 취소선이라고 하면 가운데에 줄이 그어지는 것을 말합니다. 이렇게 줄이 그어지죠. 물론 색깔이 바뀌지는 않습니다. 이 글은 스타일이 입혀져 있어서 그렇다는 것을 이해하고 지나가주세요. 아무튼, 너무 간단하니까 간단하게 코드만 보고 넘어가도록 합시다. 취소선은 s태그로 구현합니다. 여는 태그가 있고 닫는 태그가 있습니다.

웹 개발을 위한 HTML 가이드 19편 - 취소선과 밑줄 표현


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, HTMLTextPosts
} from '@/components/Post';

<HtmlGuideMessage />

<HTMLTextPosts />

# 개요
어떤 누군가는 문서가 버전이 올라갈 때마다 어떤 부분이 추가되었고 어떤 부분이 삭제되었는지 표시하고 싶을 수 있습니다. 이럴 때에는 텍스트의 추가와 삭제를 나타내는 태그를 이용하면 됩니다. **웹 개발을 위한 HTML 가이드** 18편의 주제는 바로 텍스트의 추가와 삭제입니다. 그럼 바로 본론으로 들어가도록 합시다.

# 텍스트의 추가와 삭제
텍스트의 추가를 의미하는 태그는 `ins`태그입니다. 반대로 삭제를 의미하는 태그는 `del`태그입니다. 이름에서 볼 수 있듯이 `ins`태그는 **insert**의 약자이고 `del`태그는 **delete**의 약자입니다. 이 태그들은 텍스트의 변동사항을 표현할 때에 사용합니다.

## 텍스트 추가(ins)
```html file=ins.html
<p><ins>추가된 내용</ins></p>
```

![ins 태그의 모습이다.](https://drive.google.com/uc?export=view&id=1-14plB-_c5-mMLHuvRQKaIm1FQs4bwh_)

`ins`태그는 어떠한 텍스트에서 추가된 내용을 강조하고 싶을 때에 사용합니다. 브라우저에서의 기본적인 스타일은 위 이미지에 보이는 것처럼 밑줄이 그어진 상태로 나타나게 됩니다.

## 텍스트 삭제(del)
```html file=del.html
<p><del>삭제된 내용</del></p>
```

![del 태그의 모습이다.](https://drive.google.com/uc?export=view&id=1-BcSTq90s2r_vTD6nqVsEjiessyuGEf6)

`del`태그는 그 반대로 삭제된 내용을 강조하고 싶을 때에 사용합니다. 브라우저의 기본적인 스타일은 취소선이 그어진 상태로 나타나게 됩니다.

<Message color='y'>
  <p>이 태그들은 단순히 밑줄을 그어주거나 취소선을 그려주는 태그가 아닙니다. 용도가 명확하기 때문에 용도에 걸맞게 사용해주어야 한다는 것을 기억하시면 됩니다.</p>
</Message>

## 두 태그 동시에 사용하기
이 두 태그는 동시에 사용할 수도 있습니다. 그냥 아래처럼 사용하면 됩니다.

![위의 태그는 두개 다 사용할 수도 있다.](https://drive.google.com/uc?export=view&id=1dXKMvJ--GmyK277pNbVp6iVIRjzeRSJp)

위 이미지를 보면 **추가된 부분**과 **삭제된 부분**이 동시에 나타나 있어서 현재는 **1993년 5월 16일로 수정 되었다**라는 것을 의미하는 것이죠. 직업 사용할 일은 아마도 별로 없거나 아예 없을 수도 있지만 이런식으로 쓰는구나 라는 것만 이해하고 넘어가시면 됩니다.

## 공통으로 사용되는 속성
이 두 태그는 사용할 수 있는 속성이 있습니다. 속성은 문법을 설명한 이래로 세번째? 설명하는 것 같은데 태그의 기능을 추가하는 것들이라고 생각하면 됩니다.

사용할 수 있는 속성은 아래와 같습니다.

<Dl>
  <Dt>cite</Dt>
  <Dd>속성값으로는 <Strong>URL</Strong>이 들어갑니다. 텍스트의 내용이 추가되었거나, 변경된 이유를 알 수 있는 출처를 적습니다.</Dd>
  <Dt>datetime</Dt>
  <Dd>속성값으로는 <Strong>날짜포맷(YYYY-MM-DDThh:mm:ssTZD)</Strong>이 들어갑니다. 텍스트의 내용이 추가되었거나, 변경되었을 때의 시간을 적습니다.</Dd>
</Dl>

<P><Code>datetime</Code>속성의 경우는 속성의 값이 어려울 수 있는데, <Strong>YYYY-MM-DD</Strong>는 <Bold>2021-04-02</Bold>를 적으면 되고, <Strong>T</Strong>는 시간을 의미합니다. <Strong>hh:mm:ss</Strong>에는 시간을 적으면 됩니다. <Bold>20:30:00</Bold>처럼 말이죠.</P>

<P>마지막의 <Strong>TZD</Strong>는 <Strong>Time Zone Designator</Strong>의 약자입니다. 웹은 전세계 사람들이 다 볼 수 있고, 지역마다 시간이 다르기 때문에 그리니치 표준시로 시간을 확정해야한다는 것입니다. 그리니치 표준시는 <Bold>+09:00</Bold>이나 <Bold>-01:00</Bold>과 같은 시간의 격차를 표현한 것을 말합니다. 한국 같은 경우엔 세계표준시에서 9시간이 더해진 시간을 사용합니다.</P>

<P>위의 설명에서 다 필요 없이 <Bold>2021-04-02</Bold> 부분만 적어도 상관없습니다. 하지만 위의 내용을 알아둬서 나쁠 것은 없기 때문에 기억해두면 좋을지도 모르겠습니다.</P>

<Line />

이번 글에서는 **텍스트의 추가와 삭제**를 다루는 태그에 대해서 알아봤습니다. 이번에 알아본 두가지의 태그는 사실 그렇게 많이 쓰는 것 같지는 않습니다. 저는 잘 안씁니다. 그러나 알아두는 것은 나쁜 게 아니기에 다뤄봤습니다. 이번 글의 내용은 여기까지입니다. 다음 글에서는 **취소선과 밑줄 태그**에 대해서 알아봅시다.

그럼 이번 글은 여기서 마치도록 하겠습니다. 다음 글에서 봅시다.


어떤 누군가는 문서가 버전이 올라갈 때마다 어떤 부분이 추가되었고 어떤 부분이 삭제되었는지 표시하고 싶을 수 있습니다. 이럴 때에는 텍스트의 추가와 삭제를 나타내는 태그를 이용하면 됩니다. 웹 개발을 위한 HTML 가이드 18편의 주제는 바로 텍스트의 추가와 삭제입니다. 그럼 바로 본론으로 들어가도록 합시다. 텍스트의 추가를 의미하는 태그는 ins태그입니다. 반대로 삭제를 의미하는 태그는 del태그입니다. 이름에서 볼 수 있듯이 ins태그는 insert의 약자이고 del태그는 delete의 약자입니다. 이 태그들은 텍스트의 변동사항을 표현할 때에 사용합니다.

웹 개발을 위한 HTML 가이드 18편 - 텍스트의 추가, 제외 태그


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, HTMLTextPosts
} from '@/components/Post';

<HtmlGuideMessage />

<HTMLTextPosts />

# 개요
웹을 돌아다니다 보면 일반 텍스트보다는 작은 텍스트인데 아래로 내려가 있거나 위로 올라가 있는 텍스트들이 보일 때가 있습니다. 이걸 **아랫첨자**와 **윗첨자**라고 합니다. 문서를 만드는 다양한 에디터에는 이런 기능들이 포함되어 있습니다. HTML에서도 가능합니다. 이번 글은 **웹 개발을 위한 HTML 가이드 17편**입니다. 이번 글에서 다룰 내용은 윗첨자와 아랫첨자입니다.

이번 글의 내용은 아주 중요한 것은 아닙니다. 이런 태그도 있구나 하면서 나중에 생각이 나거나 사용하고 싶을 때에 사용할 수 있으면 이번 글의 학습은 아주 성공적인 것이 됩니다. 그러니까 외울 필요는 없고 이해하고 넘어가는 게 중요합니다.

# 윗첨자와 아랫첨자
말로는 설명을 했지만 윗첨자나 아랫첨자에 대해서 전혀 모르는 분도 있습니다. 그런 분들을 위해 이미지를 준비했습니다.

![윗첨자와 아랫첨자는 이런 것이다.](https://drive.google.com/uc?export=view&id=1zHDF_Ksmu7l16IiGBk9mz_AWbLHzAGB9)

이렇게 텍스트의 특정 부분이 위에 있거나 아래에 있으면 윗첨자, 아랫첨자라고 합니다. 윗첨자와 아랫첨자를 만드는 방법을 배워봅니다. 윗첨자와 아랫첨자는 **타이포그래픽한 것을 연출할 때**에 사용이 됩니다. 과학에서 사용되는 분자식에서 아랫첨자를 사용하는 게 그런 예시라고 보시면 됩니다. 그럼 윗첨자부터 살펴보도록 합시다.

## 윗첨자 태그(sup)
윗첨자를 나타내는 태그인 `sup`태그는 **Superscript**의 약자입니다. 윗첨자는 보통 나무위키 같은 곳에서 볼 수 있습니다. 이 블로그에서도 각주를 표현할 때에 윗첨자를 이용해서 달아두고 있습니다. 여는 태그와 닫는 태그가 존재하고 아래처럼 사용하면 됩니다.

```html
<p>아이유는 2021년 올해 29세가 되었다.<sup><a href="#">[1]</a></sup></p>
```

![윗첨자가 적용된 모습이다.](https://drive.google.com/uc?export=view&id=1VxIbGs0WGIsaBTCHjEAO1c738aTWY3Ll)

위의 코드를 실행한 결과가 위의 이미지입니다. 이미지를 보면 \[1\] 이라는 링크에 해당하는 부분은 윗첨자로 처리를 했는데 잘 표현이 된 것을 볼 수 있습니다. 어려울 것이 없죠?

## 아랫첨자 태그(sub)
이번에는 아랫첨자에 대해서 알아봅시다. 아랫첨자를 나타내는 태그인 `sub`태그는 **Subscript**의 약자입니다. 아랫첨자는 **분자식**에서 엿볼 수 있습니다. 마찬가지로 여는 태그와 닫는 태그가 있고 그 사이에 내용물을 넣으면 됩니다. 연습하는 느낌으로 분자식을 한 번 만들어봅시다.

```html
<p>물의 분자식은 <strong>H<sub>2</sub>O</strong>입니다.</p>
```

![아랫첨자는 분자식 같은 것을 표현할 수 있다.](https://drive.google.com/uc?export=view&id=1rGdK607fBu8JgCrKfXf3HDHim88LkZoq)

이런식으로 사용하면 되는 태그입니다. HTML은 처음 보기에는 복잡해보일지라도 정작 규칙이 일관적이고 직관적이기 때문에 이해하는 것은 어렵지 않습니다.

<Line />

이번 글의 내용은 여기까지입니다. 이번 글에서는 **윗첨자와 아랫첨자**에 대해서 알아봤습니다. 사실 쓸 곳이 그렇게 많지는 않은데 저는 가끔씩 사용합니다. 각주를 달아야 할 때 말이죠. 여러분들도 한쯤은 연습을 해보고 다음 파트로 넘어가는 게 좋을 것 같습니다. 우리 프로젝트에는 적용할 일이 없으니까 실전 연습 파트는 넘어가도록 하겠습니다.

이번 글은 여기서 마치도록 하겠습니다. 다음 글에서는 **텍스트의 추가, 제외 태그**에 대해서 알아보도록 합시다. 그럼 다음 글에서 봅시다.


웹을 돌아다니다 보면 일반 텍스트보다는 작은 텍스트인데 아래로 내려가 있거나 위로 올라가 있는 텍스트들이 보일 때가 있습니다. 이걸 아랫첨자와 윗첨자라고 합니다. 문서를 만드는 다양한 에디터에는 이런 기능들이 포함되어 있습니다. HTML에서도 가능합니다. 이번 글은 웹 개발을 위한 HTML 가이드 17편입니다. 이번 글에서 다룰 내용은 윗첨자와 아랫첨자입니다. 이번 글의 내용은 아주 중요한 것은 아닙니다. 이런 태그도 있구나 하면서 나중에 생각이 나거나 사용하고 싶을 때에 사용할 수 있으면 이번 글의 학습은 아주 성공적인 것이 됩니다. 그러니까 외울 필요는 없고 이해하고 넘어가는 게 중요합니다.

웹 개발을 위한 HTML 가이드 17편 - 윗첨자와 아랫첨자 태그


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, HTMLTextPosts
} from '@/components/Post';

<HtmlGuideMessage />

<HTMLTextPosts />

# 개요
이번 글은 **웹 개발을 위한 HTML 가이드 16편**입니다. 텍스트 관련 태그 그 두번째 파트이고, 개행과 가로줄 태그에 대해서 알아보려고 합니다. 말했듯이 이번 글에서 알아볼 태그는 총 두가지입니다. 하나는 이미 다뤘던 적이 있는 **줄바꿈**을 만들어주는 개행 태그. 즉 `br`태그입니다. 다른 하나는 페이지에 **가로줄**을 만들어주는 `hr`태그가 준비되어 있습니다. 이번 글도 그렇게 길지 않고 어려운 내용은 없을 겁니다. 천천히 함께 알아보도록 합시다.

<P>이번 글을 포함한 앞으로의 가이드에서는 새로운 태그를 연습하기 위해서 우리의 프로젝트 폴더에 <Strong>연습 파일</Strong>을 하나 만들고, 그 안에서 연습을 진행한 다음에 우리 프로젝트 폴더에서 메인이 되는 <Name>index.html</Name> 파일에서 본격적인 실습을 진행하고 각 가이드를 마칠 생각입니다.</P>

# 개행 태그(br)
HTML 상에서 아무리 엔터를 많이 치고 스페이스를 많이 넣더라도 실제 웹 상에서 보여지는 공백은 **오직 한 칸**에 불과합니다. 하지만 가끔은 줄바꿈을 통해서 레이아웃을 조정하고 싶을 때라던지 문단의 안에서 엔터를 친 것처럼 줄바꿈을 반영하고 싶을 때가 있죠. 그럴 때에 `br`태그를 사용합니다.

<P>자, 우리의 프로젝트 폴더에 파일을 하나 만들어봅니다. 저는 <Name>br.html</Name>이라고 이름을 지었습니다. 이제 html의 기본적인 구조는 다들 아실 겁니다. 따라서 그 부분은 생략토록 하고 작성을 해주시면 됩니다.</P>

이제 `body`태그 안에 아래와 같은 코드를 작성해보세요. 아 물론, 글자는 아무렇게나 해도 상관 없습니다.

```html file=br.html
<p>
  엔터를 치면
  어떻게 될까?
</p>
```

작성을 한 다음에 여러분이 직접 실행해서 확인해보세요. 결과는 어땠나요?

![HTML에서 엔터는 아무런 의미가 없다.](https://drive.google.com/uc?export=view&id=11Sep5PmZvsKiLCGvjGYQFgZyFo7HZFph)

엔터를 몇 번을 치건 스페이스를 몇 번을 누르건 위의 이미지처럼 **아무런 의미가 없습니다.** 반영이 안되기 때문이죠. 그래서 `br`태그를 사용하는 겁니다.

```html file=br.html
<p>
  엔터를 치면<br />
  어떻게 될까?
</p>
```

`br`태그는 홀로 닫는 태그입니다. 반드시 `<이름 />` 이렇게 적을 필요는 없습니다. 하지만 이렇게 표기하는 것을 추천합니다. 직관적이니까요. 아무튼, 이렇게 수정을 하고 실행해봅시다.

![줄바꿈이 적용된 것을 볼 수 있다.](https://drive.google.com/uc?export=view&id=11aS0k6Z82gZ4_k5soXe1yQKErAA-BTPh)

줄바꿈이 되었습니다. **줄바꿈이 필요할 때**에는 `br`태그를 사용한다는 것을 인지하시면 되겠습니다. 그럼 다음으로 넘어갑시다.

# 가로줄 태그(hr)
가로줄을 만들어주는 태그는 사실 그렇게 많이 쓰이지는 않는 것 같은데 저는 가끔 사용합니다. 그래서 다뤄보도록 하겠습니다. 가로줄을 만들어주는 태그는 `hr`태그입니다. 홀로 닫는 태그이고 사용하는 방법은 아주 간단합니다.

```html file=hr.trml
<hr />
```

<P>이번에는 예제 파일을 만들 필요 없이 그냥 보기만 하셔도 됩니다. 저는 만들어두겠습니다. 웬만하면 구분을 해서 예제 파일을 만드는 것을 좋아합니다. 위의 코드를 입력한 <Name>hr.html</Name> 파일을 실행해보겠습니다.</P>

![그냥 가로줄을 만들어준다.](https://drive.google.com/uc?export=view&id=1NKr876xR42YXblrVmC8olj6W40PsHfqU)

그냥 이렇게 가로줄을 만들어줍니다. 별 건 없죠.

# 실전 연습
이번 글에서는 딱히 실습을 할 필요는 없어서 넘어가도록 하겠습니다. 우리가 만든 프로젝트에는 가로줄이나 줄바꿈은 필요가.. 없을 것 같습니다. 앞으로도 우리의 프로젝트에 필요한 것 같다면 실습을 반드시 진행하는 것으로 가닥을 잡으면 될 듯합니다. 그러니 이번 글은 그냥 넘어가도록 합시다.

<Line />

이번 글에서는 **개행**과 **가로줄**을 만들어주는 `br`태그와 `hr`태그에 대해서 알아봤습니다. 많이 사용되지는 않더라도 언젠가는 사용할 일이 있을지도 모릅니다. 기억을 해두는 것을 추천드립니다. 그럼 이번 글은 여기서 이렇게 마치도록 하겠습니다. 다음 글은 **윗첨자와 아랫첨자**를 만드는 태그에 대해서 알아보도록 합시다. 다음 글에서 봅시다.


이번 글은 웹 개발을 위한 HTML 가이드 16편입니다. 텍스트 관련 태그 그 두번째 파트이고, 개행과 가로줄 태그에 대해서 알아보려고 합니다. 말했듯이 이번 글에서 알아볼 태그는 총 두가지입니다. 하나는 이미 다뤘던 적이 있는 줄바꿈을 만들어주는 개행 태그. 즉 br태그입니다. 다른 하나는 페이지에 가로줄을 만들어주는 hr태그가 준비되어 있습니다. 이번 글도 그렇게 길지 않고 어려운 내용은 없을 겁니다. 천천히 함께 알아보도록 합시다. 이번 글을 포함한 앞으로의 가이드에서는 새로운 태그를 연습하기 위해서 우리의 프로젝트 폴더에 연습 파일을 하나 만들고, 그 안에서 연습을 진행한 다음에 우리 프로젝트 폴더에서 메인이 되는 index.html 파일에서 본격적인 실습을 진행하고 각 가이드를 마칠 생각입니다.

웹 개발을 위한 HTML 가이드 16편 - 개행과 가로줄 태그

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, HTMLTextPosts
} from '@/components/Post';

<HtmlGuideMessage />

<HTMLTextPosts />

# 개요
이번 글은 웹 개발을 위한 HTML 가이드 15편입니다. 저번 글에서는 **하이퍼 링크**를 만들어주는 링크 태그인 `a`태그에 대해서 알아봤습니다. 이번 글부터는 **텍스트**에 관련된 태그들을 알아볼 알아보려고 합니다. 태그의 개수가 많아서 여러 파트로 나눠서 진행할 생각입니다. 이 글은 그 첫번째입니다. 이번 글에서 알아볼 태그는 총 네가지로, 굵기 태그 두개와 기울기 태그 두개입니다.

텍스트 관련 태그들은 보통 `p`태그와 함께 이용하는 편입니다. `p`태그가 문단을 나타내는 가장 텍스트스러운 태그이기 때문입니다.

네가지의 태그지만 어렵지는 않기 때문에 간단하게 이해할 수 있을 것이라고 생각됩니다. 자, 그럼 함께 알아보도록 합시다.

# 텍스트의 굵기와 기울기
**텍스트를 강조**하는 다양한 방법 중에서 가장 기본적인 두가지의 방법은 **텍스트를 굵게 만들거나 기울이는 것**입니다. 각각 두가지의 방법이 있는데 어떻게 다르고 어떻게 사용하면 좋은지 간단하게 살피고 다음 파트로 넘어가도록 합시다.

## 굵기 태그
**굵기 태그**에는 두가지가 있다고 했습니다. `b`태그와 `strong`태그입니다. `b`태그의 **b**는 **bold**의 약자입니다. **strong**태그는 말 그대로 강렬한, 강한. 뭐 이런 의미죠. 아래와 같이 사용하면 됩니다.

```html
<p><b>아이유</b> 좋아</p>
<p><strong>아이유</strong> 좋아</p>
```

![굵기 태그는 이렇게 보인다.](https://drive.google.com/uc?export=view&id=1-BHeRgS5fglHDlctL4gJQEYmtRS3CpsA)

위의 코드는 위의 이미지처럼 나타나게 됩니다. 그냥 이렇게만 보면 이 두가지는 별 차이가 없습니다. 둘 다 굵게 만들어주는 태그이기 때문이죠.

그럼 이 두가지의 태그는 어떻게 다를까요? 중요한 것이 다릅니다. 전자는 그냥 **굵게 만들어주는** 태그일 뿐이고 후자는 **검색 엔진에게 이 텍스트가 중요한 텍스트다 라는 정보를 알려주는 시맨틱한** 태그라는 것이 다른 점입니다. 그렇기 때문에 중요한 정보일 때에는 `strong`태그를 쓰는 것이 웹 페이지의 검색 노출에 도움이 됩니다.

그저 굵은 텍스트를 만들고 싶은 경우에는 `span`태그를 이용해서 스타일을 조정하는 방법이 있고 이를 권장하고 있습니다. `b`태그는 사실상 더 이상은 잘 쓰이지 않는 태그입니다. 하지만 우리는 아직 **CSS**를 모르니까 이런 게 있다라는 것만 알아두시면 됩니다.

## 기울기 태그
이번에는 기울기 태그를 알아봅시다. **기울기 태그**에도 두가지가 있습니다. `i`태그와 `em`태그입니다. `i`태그는 **이탤릭체**의 약자라고 보면 됩니다. `em`태그는 **emphasize**의 약자입니다. 중요하다 라는 의미를 지닌 영단어입니다.

여기서도 감이 오죠. 이 두 태그는 마찬가지로 **시맨틱한 태그냐 아니냐**로 나뉩니다.

```html
<p><i>아이유</i> 좋아</p>
<p><em>아이유</em> 좋아</p>
```

![기울기 태그는 이렇게 보인다.](https://drive.google.com/uc?export=view&id=1kwKqLCNGX5KnCorW9-gxU1bUWL7iatvS)

`b`태그와 마찬가지로 `i`태그도 잘 쓰이지 않습니다. `em`태그를 더 많이 사용합니다. 그냥 기울기를 표현하고 싶다면 `span`태그를 이용해 **CSS**를 조정하는 방법을 사용합니다. 이 역시도 이렇게 하는것을 추천하고 있습니다.

## 둘 다 사용하기
굵기 태그와 기울기 태그는 **둘 다 사용할 수** 있습니다. 순서와 상관 없이 둘 다 적용하면 아래와 같은 모양이 됩니다. 정말로 중요하다고 강조를 하는거죠.

```html
<p>아이유는 2021년 10월 19일 자정에 <strong><em>Strawberry Moon</em></strong>을 공개했다.</p>
```

![굵기와 기울기를 둘 다 사용할 수 있다.](https://drive.google.com/uc?export=view&id=12iwyDXQx2YSgkGQCmFRpqYlQoKOAnNp8)

# 실전 연습
그럼 이제 우리의 프로젝트에 한 번 적용해보도록 합시다. 우리가 만들었던 <Name>index.html</Name>파일을 기억하실겁니다. **vscode**를 켜고 이 파일을 열어봅시다.

```html file=index.html
<body>
  <h1>웹 개발의 3요소</h1>
  <h2><a href="https://bit.ly/3lXTSYW" target="_blank" rel="noopener noreferrer">HTML</a></h2>
  <p>HTML은 웹의 뼈대를 만들어주는 기능을 하는 마크업 언어입니다.</p>
  <h2><a href="https://bit.ly/3u9M22j" target="_blank" rel="noopener noreferrer">CSS</a></h2>
  <p>CSS는 HTML로 만든 뼈대에 피부를 만들어주고 화장을 시켜주는 스타일 시트 언어입니다.</p>
  <h2><a href="https://bit.ly/39BnSnM" target="_blank" rel="noopener noreferrer">JavsScript</a></h2>
  <p>자바스크립트는 HTML과 CSS를 동적으로 제어할 수 있는 웹의 뇌와 같은 언어입니다.</p>
</body>
```

위와 같은 상태로 저장되어 있을겁니다. 이제 여기에 `strong`태그와 `em`태그를 적용해보려고 합니다. HTML, CSS 자바스크립트라는 텍스트에 적용해보도록 합시다.

![지금까지의 우리 프로젝트 모습이다.](https://drive.google.com/uc?export=view&id=1mRWGfvGJTB_zw2L2V2tEXjYj0RNcNcY6)

수정하기 전은 이런 모습이죠. 그럼 이제 수정해봅시다.

```html file=index.html

<p><strong><em>HTML</em></strong>은 웹의 뼈대를 만들어주는 기능을 하는 마크업 언어입니다.</p>


<p><strong><em>CSS</em></strong>는 HTML로 만든 뼈대에 피부를 만들어주고 화장을 시켜주는 스타일 시트 언어입니다.</p>


<p><strong><em>자바스크립트</em></strong>는 HTML과 CSS를 동적으로 제어할 수 있는 웹의 뇌와 같은 언어입니다.</p>
```

주석처리된 부분이 이전 코드이고 주석이 아닌 부분이 새로운 코드입니다. `strong`태그의 안에 `em`태그를 넣고 그 안에 내용물을 넣었습니다. 이렇게 하고 저장하고 라이브 서버를 켜보면 아래와 같은 모습이 됩니다.

![프로젝트 네번째 과정.](https://drive.google.com/uc?export=view&id=1nvhhET-ieZFNGu0CiDHj6sJz6lKjaHMV)

<P>오늘의 코드는 깃허브 <A href='https://github.com/nihil-programming-guide/web-tuto/tree/master/HTML' type='normal'>web-tuto</A>에 기록되어 있습니다. 4번을 보시면 됩니다.</P>

<Line />

이렇게 우리는 오늘 굵기와 기울기를 적용해봤습니다. 아주 간단하죠? **시맨틱한 태그를 더 많이 사용한다는 것**을 잊지 마시고 공부해봅시다. 앞으로 우리가 알아볼 텍스트 관련 태그가 많습니다. 오늘 함께 배운 내용은 여러번 연습해서 여러분의 것으로 만들어보세요. 이번 글은 여기까지입니다. 다음 글에서는 **개행 태그와 가로줄 태그**를 알아봅시다.

개행 태그는 이미 다룬 적이 있지만 그래도 다시 다뤄보도록 하겠습니다. 그럼 더 잘 기억이 되겠죠. 그럼 다음 글에서 봅시다.

이번 글은 웹 개발을 위한 HTML 가이드 15편입니다. 저번 글에서는 하이퍼 링크를 만들어주는 링크 태그인 a태그에 대해서 알아봤습니다. 이번 글부터는 텍스트에 관련된 태그들을 알아볼 알아보려고 합니다. 태그의 개수가 많아서 여러 파트로 나눠서 진행할 생각입니다. 이 글은 그 첫번째입니다. 이번 글에서 알아볼 태그는 총 네가지로, 굵기 태그 두개와 기울기 태그 두개입니다. 네가지의 태그지만 어렵지는 않기 때문에 간단하게 이해할 수 있을 것이라고 생각됩니다. 자, 그럼 함께 알아보도록 합시다. 텍스트를 강조하는 다양한 방법 중에서 가장 기본적인 두가지의 방법은 텍스트를 굵게 만들거나 기울이는 것입니다. 각각 두가지의 방법이 있는데 어떻게 다르고 어떻게 사용하면 좋은지 간단하게 살피고 다음 파트로 넘어가도록 합시다.

웹 개발을 위한 HTML 가이드 15편 - 굵기와 기울기 태그


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';

이 블로그를 만든지도 5개월이 되었습니다. 이 블로그를 만들자마자 구글 서치 콘솔로 가서 검색 등록을 하고 사이트맵도 등록을 해둔 상태입니다. 이제 블로그에 글만 잘 채워 넣으면 되겠구나 싶어서 천천히 글을 작성해왔습니다. 누군가 보면 좋고 아니면 말고라는 식이긴 했어도 블로그가 검색이 되는건 상당히 중요했는데 어련히 알아서 되겠구나 라는 생각으로 글을 작성했죠. 문제가 있었는지도 모르고 말입니다.

그 문제라는 것은 몇개월 전에야 알았습니다. 한 3개월 전에 말이죠. 사이트맵을 등록했고 구글 서치 콘솔에 나와 있는 말로는 알아서 자동으로 갱신을 한다고 했는데 어째서인지 갱신이 하나도 안되는겁니다.

![현재 구글 서치 콘솔에서의 사이트맵의 상태.](https://drive.google.com/uc?export=view&id=1gGTt4-9UVOFmQLoy57wjXkZq_PURELKd)
![사이트맵이 처리되었다고 나와있다.](https://drive.google.com/uc?export=view&id=1atb1qzEEZS0jv2HHAveIMqBtETofbZln)

심지어는 제가 가만히 있으면 크롤링을 하지 않아서 구글에 제 글이 검색되지도 않았고 말이죠. 제가 지금까지 구글 서치 콘솔을 이용하면서 단 한 번도 이랬던 적이 없는데 다른 사이트들은 잘만 돌아가거든요. 그런데 이 블로그만은 그대로여서 뭔가 싶어가지고 여러 차례 원인을 찾아보려고 했습니다.

<P>하지만 지금까지는 원인을 찾을 수가 없었습니다. 그래서 하는 수 없이 검색에 등록되어야 하는 페이지를 하나 하나 색인에 넣는 작업을 진행했습니다. 그저께도 그런식으로 글을 등록했습니다. 참 웃긴 점은 이 블로그는 <Strong><A type='normal' href='https://nextjs.org/'>Next.js</A></Strong>로 만들었고 사이트맵도 제가 글을 쓰고 빌드를 할 때마다 자동으로 생성이 됩니다. 그렇게 세팅을 해놨거든요.</P>

그런데도 구글 서치 콘솔에서는 그걸 읽지를 않는겁니다. 위에는 분명히 사이트맵이 처리가 되었다고 나와있죠. 그런데 22개의 링크만이 확인이 되었답니다. 지금은 35개인데 말이죠! 하지만 확실히 문제는 있는지 색인 생성 범위 보기 버튼은 활성화가 되어있지 않습니다. 이유가 뭔지 하나도 모르겠습니다.

![실제 내 블로그의 사이트맵의 상태.](https://drive.google.com/uc?export=view&id=1Be5xs3teTm0h-muO46emcwwjgwS-5KrU)

이놈의 사이트맵은 지금도 갱신이 안되고 있습니다. 중간에 한 번 갱신이 되긴 했는데 왜 그런 것인지는 모르겠지만 사이트맵이 갱신은 안되더라도 블로그의 글들이 검색은 되더군요. 전부 되는지는 확인 안해봤지만요. 아무튼간에 지금은 검색도 되고 있고 불편한 건 없지만 거슬리는 건 색인은 되었지만 사이트맵에 처리는 안되어 있다는 겁니다.

![내 블로그의 색인 상태.](https://drive.google.com/uc?export=view&id=1j-XBrCDBvp_NV3NjeJrMtXt1mEh0V2LM)

구글에 검색을 해봐도 뭐 어떻게 비슷한 증상이 있는 사람들이 있는건지 없는건지 잘 보이지도 않고 답답한 마음에 이 글을 남겨봅니다. 사실 문제 자체는 없긴한데 뭔가 위와 같은 상태가 계속되면 심리적으로 불-편해서 계속 신경이 쓰입니다.

이것이 언제 어떻게 해결이 될지는 모르겠지만 좀 해결이 됐으면 좋겠습니다. 검색도 잘 되고 하니까 당장에는 검색이 잘 되는 글들을 써서 블로그를 키우는 게 급선무인 것 같긴 합니다. HTML 복습한답시고 HTML 가이드만 작성할 게 아니라 지금 공부하고 있는 것들도 남겨두는 게 좋을 듯 합니다.

이번 글은 그냥 주저리 주저리 떠드는 글이었습니다. 이 글을 작성한 후에는 사이트맵을 좀 손보기도 하고 좀 더 시도를 해봐야겠습니다. 이번 글은 여기서 마치도록 하고 다음 글에서 봅시다.


이 블로그를 만든지도 5개월이 되었습니다. 이 블로그를 만들자마자 구글 서치 콘솔로 가서 검색 등록을 하고 사이트맵도 등록을 해둔 상태입니다. 이제 블로그에 글만 잘 채워 넣으면 되겠구나 싶어서 천천히 글을 작성해왔습니다. 그런데 문제가 있었습니다. 사이트맵을 등록했고 얘들 말로는 알아서 자동으로 갱신을 한다고 했는데 갱신이 하나도 안되는겁니다. 가만히 있으면 크롤링을 하지 않아서 구글에 제 글이 검색되지도 않았고 말이죠. 그래서 하는 수 없이 검색에 등록되어야 하는 페이지를 하나 하나 색인에 넣는 작업을 진행했습니다. 그저께도 그런식으로 글을 등록했습니다.

요즘 구글 서치 콘솔은 바쁜 것 같다


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 />

# 개요
벌써 10월입니다. 나는 아무것도 안했는데! 정말 부지런하게 살아야겠다는 생각이 팍 들었습니다. 아무튼간에 이번 글은 웹 개발을 위한 HTML 가이드 번외 2편입니다.

저번 글에서 우리는 **하이퍼 링크**를 구현해주는 태그인 **링크 태그** 즉 `a`태그에 대해서 알아봤습니다. 이번 글은 링크 태그와 같은 파일의 경로를 필요로 하는 다른 태그나 훗날 다루게 될 다양한 것들을 대비해서 **컴퓨터와 웹의 경로**에 대해서 간단하게 짚고 넘어가려고 합니다. 이번 글에서는 **로컬 주소와 웹 주소**의 차이점을 알아보고 **절대경로와 상대경로**에 대해서 알아봅니다.

# 디렉토리
웹이나 컴퓨터에서는 특정한 주소를 **디렉토리**라고 부릅니다. 주소, 경로, 패스 다 같은 말이죠. 웹에서 페이지들이 사용하는 주소와 컴퓨터에서 폴더와 파일이 사용하는 주소는 다르지만 유사합니다. 웹의 페이지들도 결국에는 어떤 컴퓨터의 폴더에 존재하는 파일들이기에 아주 큰 차이는 없지만 그래도 알아보도록 합시다.

## 로컬 디렉토리
<P>로컬 주소는 윈도우의 경우 드라이브부터 접근을 하죠. C 드라이브나 D 드라이브 같은 것들 말입니다. 컴퓨터 상에서의 경로로써 표기할 때에는 <Strong>C:&#8361;</Strong>로 표기를 합니다. 그리고 이 의미는 <Strong>C 드라이브의 내부</Strong>를 가리킵니다. 맥이나 리눅스 같은 유닉스 계열의 OS의 경우에는 <Strong>/</Strong> 로 시작을 합니다. 루트 디렉토리죠.</P>

<P>가령 파일의 위치는 드라이브나 루트 디렉토리를 시작으로 내부 폴더들을 표기하고 폴더 내로 들어가면 <Strong>/</Strong>나 <Strong>\(&#8361;)</Strong>로 구분을 하고 가장 마지막에 파일을 표기합니다.</P>

```text
F:\니힐 폴더\아이유 델루나2.png
/home/nihilncunia/web-coding/Blog/nihilog/code/package.json
```

이런식으로 말이죠.

## 웹 디렉토리
<P>웹 디렉토리의 경우엔 드라이브로 시작하지 않습니다. <Strong>http</Strong> 혹은 <Strong>https</Strong>라는 프로토콜로 시작합니다. 웹 페이지들은 서버상에서 http 혹은 https 프로토콜로 통신을 하기 때문입니다. 근데 지금은 이 원리 자체는 중요하지 않고 웹 주소는 <Strong>https://</Strong>로 시작을 합니다. 과거에는 <Strong>https://</Strong>로 시작하는 주소가 많았는데 요즘은 인증된 페이지가 많아서 <Strong>https://</Strong>로 시작하는 주소가 더 많습니다.</P>

프로토콜의 다음에는 **아이피 주소**가 옵니다. 아이피는 **0.0.0.0**과 같은 구조의 숫자들이고 이는 컴퓨터가 가진 일종의 주민등록번호 같은 것이라고 이야기 했던 적이 있습니다. 아이피의 다음에는 포트가 옵니다. 0.0.0.0:**8080** 8080이 바로 포트에 해당하는 숫자죠.

<P><Strong>http://0.0.0.0:8080</Strong> 이게 세트입니다. 웹 주소는 이렇게 시작을 합니다. 하지만 이렇게 보면 되게 지저분해보이고 어렵죠. 외우기가 어려울 겁니다. 그래서 사람들은 <Strong>도메인</Strong>이라는 것을 만들어냈습니다. 도메인을 통해서 아이피를 대신하게 하고 아이피로 접근한 것과 같은 효과를 낼 수 있게 만들었죠. 그게 오늘날의 웹 사이트들의 주소입니다. <Strong>naver.com</Strong>이나 <Strong>google.com</Strong> 같은 것들이 도메인입니다.</P>

<P>네이버에 들어가서 주소를 복사하면 <Strong>https://www.naver.com/</Strong> 이렇게 나옵니다. 원래는 저 자리에 아이피가 들어가는 것이죠. 아무튼 주소의 끝에 슬래시가 있습니다. 이는 루트 디렉토리를 의미합니다. 웹 사이트마다 루트 디렉토리가 있습니다.</P>

<P><Strong>/</Strong>는 뒤에 <Strong>index.html</Strong>이 생략되어 있습니다. 이 부분은 예전에 다룬 적이 있습니다. 그렇다면 루트 디렉토리는 웹 사이트의 홈 페이지를 의미하겠죠. 루트 디렉토리 내에 다른 폴더에 접근하면 <Strong>https://주소/폴더/파일</Strong> 혹은 <Strong>https://주소/폴더</Strong> 와 같은 모양이 됩니다.</P>

로컬 디렉토리나 웹 디렉토리나 폴더로 접근할 때 슬래시 혹은 역슬래시를 사용하는 건 마찬가지인 것이죠.

웹에 존재하는 웹 사이트들은 호스트 컴퓨터가 공유하고 있는 폴더 내부에 존재하는 파일들로 구성이 되어있습니다. 어떠한 프로젝트를 개발하고 이를 배포하기 위해서는 서버 상에 존재하게끔 만들어야 하기 때문입니다. 다양한 방법으로 서버를 구축하고 실행하고 배포를 하게 되면 그때 여러분의 컴퓨터는 **호스트 컴퓨터**가 되는겁니다.

```text
F:\nihil\project1
```

```text
http://0.0.0.0:7556/
```

첫번째와 같은 디렉토리를 서버를 통해 7556 포트로 공유를 하게 되면 두번째와 같은 주소가 됩니다. 포트는 자유입니다. 7556을 좋아해서 예시를 든 것입니다! 아무튼 project1 폴더는 프로젝트 폴더고 이 안에 있는 파일들을 호스팅하는 겁니다. 0.0.0.0은 여러분의 컴퓨터의 아이피가 오게 됩니다.

# 절대경로와 상대경로
이번 파트는 로컬 디렉토리와 웹 디렉토리가 둘 다 해당되는 부분입니다. 절대경로와 상대경로를 알게 되면 프로그래밍하는데에 있어서 약간의 편리함이 생길겁니다. 파일 같은 것을 다룰 때에 말이죠. 절대경로와 상대경로는 파일을 다루는데에 사용되는 방법입니다. 간단하게 알아보도록 합시다.

```text
C:\WINDOWS\system32
```

<P>위와 같은 디렉토리가 있습니다. cmd 켜면 처음 보이는 디렉토리죠. 저 디렉토리를 절대경로로 표현하면 무엇일까요? 그냥 <Strong>C:\\WINDOWS\\system32</Strong> 이겁니다. 같은 주소죠. <Strong>절대경로는 최상위 디렉토리부터 접근</Strong>하게 됩니다. 디렉토리를 깊게 들어가게 되면 절대경로도 길어지겠죠.</P>

<P>위의 디렉토리를 <Strong>상대경로</Strong>로 표현하면 <Strong>./</Strong> 입니다. 아주 간단하죠. 이 표기에서 <Strong>.</Strong>은 현재 디렉토리를 의미합니다. <Strong>/</Strong>는 내부를 의미하는거죠. 그래서 합치면 현재 디렉토리의 내부라는 의미입니다. 상대경로로 상위 폴더를 가리키는 방법도 간단합니다. <Strong>../</Strong>라고 하면 됩니다. <Strong>C:\\WINDOWS</Strong>와 같습니다.</P>

이 상대경로를 잘 기억해두세요. 앞으로 링크를 할 때 같은 파일을 링크 할 때도 있을 건데 그때 계속 사용하게 될 겁니다.

<Line />

이번 글의 내용은 여기까지입니다. 이번 글에서는 네가지를 알아봤습니다. 로컬 디렉토리와 웹 디렉토리에 대해서 알아봤고 절대경로와 상대경로에 대해서 알아봤습니다. 특히나 상대경로는 앞으로 많이 사용하게 될 디렉토리 접근 방법이라서 기억해두는 게 정신 건강에 이롭습니다.

이번 글은 여기서 마치도록 하겠습니다. 다음 글부터는 다시 새로운 태그들을 알아볼 겁니다. 텍스트와 관련된 태그들을 차례대로 알아볼 것인데 수가 많기 때문에 많은 파트로 나뉠 것 같습니다. 그럼 다음 글에서 봅시다.


벌써 10월입니다. 나는 아무것도 안했는데! 정말 부지런하게 살아야겠다는 생각이 팍 들었습니다. 아무튼간에 이번 글은 웹 개발을 위한 HTML 가이드 번외 2편입니다. 저번 글에서 우리는 하이퍼 링크를 구현해주는 태그인 링크 태그 즉 a태그에 대해서 알아봤습니다. 이번 글은 링크 태그와 같은 파일의 경로를 필요로 하는 다른 태그나 훗날 다루게 될 다양한 것들을 대비해서 컴퓨터와 웹의 경로에 대해서 간단하게 짚고 넘어가려고 합니다. 이번 글에서는 로컬 주소와 웹 주소의 차이점을 알아보고 절대경로와 상대경로에 대해서 알아봅니다. 웹이나 컴퓨터에서는 특정한 주소를 디렉토리라고 부릅니다. 주소, 경로, 패스 다 같은 말이죠. 웹에서 페이지들이 사용하는 주소와 컴퓨터에서 폴더와 파일이 사용하는 주소는 다르지만 유사합니다. 웹의 페이지들도 결국에는 어떤 컴퓨터의 폴더에 존재하는 파일들이기에 아주 큰 차이는 없지만 그래도 알아보도록 합시다.

웹 개발을 위한 HTML 가이드 번외 2편 - 웹과 컴퓨터의 경로(주소)

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 가이드 14편입니다. 시간이 참 오래 흘렀는데 제가 게을러서 14편 밖에 작성하질 못했네요. 아무튼간에 이제는 조금 더 자주 가이드를 작성하도록 하고, 저번 두 글 [Visual Studio Code 사용하기](/post/2021-09-13-01-vscode-install) [VSCode 추천 확장 프로그램](/post/2021-09-23-01-vscode-extension)를 통해서 우리는 편집기를 메모장에서 vscode로 교체했습니다. 간단한 기능들과 확장 프로그램을 알려드렸으니 요령껏 잘 사용하시면 되겠습니다.

이번 글에서는 저번 글에 예고했던대로 웹 페이지끼리 서로 연결해주는 **하이퍼 링크**를 만들 수 있는 **링크 태그**에 대해서 알아볼 겁니다. 링크는 `a`태그로 만들 수 있습니다. 웹은 하이퍼링크로 연결되어 있는 웹 페이지들의 세상이라고 했었죠. 그렇기 때문에 링크는 그야말로 **웹의 꽃이자 모든 것**이라고 해도 과언이 아닙니다.

그럼 이제 이 링크 태그에 대해서 제대로 알아보도록 합시다.

# 링크 태그
<P>위에서 언급했듯이 <Strong>링크 태그</Strong>(이하 <Code>a</Code>태그)는 <Strong>웹에서 중요한 위치</Strong>를 차지하고 있습니다. <Strong>링크가 없으면 웹은 의미가 없어지기 때문입니다.</Strong> 그만큼 중요한 역할을 합니다. 그래서 최대한 빨리 <Code>a</Code>태그에 대해서 다루고 싶었습니다. 어떻게 해야 처음 HTML을 접하는 분들이 이해하기 쉽게 설명할 수 있을지를 고민했는데 그게 잘 될는지는 모르겠습니다. <Bold>이 글이 잘 이해가 안된다면 설명을 못한 저의 문제입니다. 저의 공부가 덜 된 것이지.. 여러분의 문제는 아닙니다.</Bold></P>

`a`태그는 일반적으로 **html 페이지과 html 페이지를 연결**해주는 역할을 합니다. 웹 상에 존재하는 그 어떤 html 파일과도 연결이 가능하기 때문에 이론상 유튜브에서 네이버로도 점프가 가능합니다. <Bold>물론 유튜브에는 네이버로 이동하는 링크가 없습니다!</Bold>

`a`태그는 여는 태그와 닫는 태그로 구성이 되어있습니다.

## 하이퍼 링크
`a`태그의 유일하면서도 강력한 기능은 바로 **하이퍼 링크를 구현하는 것**에 있습니다. 하이퍼 링크는 위에서 계속 설명했던 것처럼 **html 페이지와 html 페이지를 연결하는 기능**입니다. 중요한 점은 하이퍼 링크는 기본적으로는 쌍방향이 아니라 단방향이라는 것입니다. A지점에서 B지점으로 이동을 한다고 치면 B지점으로 이동하고 싶은 A지점이 일방적으로 접근하는 것입니다.

하지만 B지점에도 A지점으로 통하는 하이퍼 링크가 있다면 이 경우엔 단방향이 아니라 쌍방향이 되겠죠. 왔다가 갔다가를 반복할 수 있으니까요. 이런 쌍방향 링크들은 웹 사이트 하위에 있는 웹 페이지들에서 나타납니다. 하이퍼 링크는 없는 곳이 없습니다. 웹이라면 어디에나 하이퍼 링크가 존재합니다.

`a`태그를 이용하면 내 페이지(사이트)에서 다른 웹 사이트로 넘어가거나 내 페이지끼리 왔다 갔다 할 수 있습니다. 그럼 이제 본격적으로 어떻게 사용하는 것인지 알아보도록 합시다.

## 내 페이지에서 다른 웹 사이트 연결하기
<P>여러분의 프로젝트 폴더에서 연습할 파일을 아무거나 만들어봅시다. 저는 작업 폴더 안에 training 이라는 폴더를 하나 만들어 그 안에 <Name>link.html</Name> 이라고 이름을 지었습니다. 전에 만들었던 <Name>index.html</Name>은 실전 연습을 할 때에 건드려볼 겁니다. 아무튼 이 안에다가 <Code>a</Code>태그를 연습해봅시다.</P>

```html file=link.html
<div>
  <h1>아이유</h1>
  <p>대한민국의 가수이자 배우. 본명은 이지은이며, 예명 아이유(IU)는 "음악으로 너와 내가 하나가 된다"라는 뜻을 가지고 있다.</p>
</div>
```

`div`태그를 하나 만들고 그 안에 `h1`태그와 `p`태그를 넣었습니다. 저는 아이유라는 제목에 **링크**를 달고 싶어졌습니다. 저는 어쩔 수 없는 아이유 신자이기 때문에 아이유에 대한 신앙을 더 널리 퍼뜨리고 싶거든요. 이럴 때 사용하는 게 바로 `a`태그인 겁니다. 넣어봅시다.

구글에서 아이유를 검색했을 때 나오는 검색 결과 페이지를 제목에 링크해볼겁니다. 여러분은 아무 제목을 적어도 상관 없고 그냥 아무 사이트를 연결해도 상관 없습니다. 저는 그냥 이게 하고 싶었습니다.(?)

```html file=link.html
<div>
  <h1><a href="https://www.google.com/search?q=%EC%95%84%EC%9D%B4%EC%9C%A0&oq=%EC%95%84%EC%9D%B4%EC%9C%A0&aqs=chrome..69i57j69i64l2j69i60j69i61l2j0i433i512l2&sourceid=chrome&ie=UTF-8">아이유</a></h1>
  <p>대한민국의 가수이자 배우. 본명은 이지은이며, 예명 아이유(IU)는 "음악으로 너와 내가 하나가 된다"라는 뜻을 가지고 있다.</p>
</div>
```

![아이유를 검색한 결과 페이지를 링크했다.](https://drive.google.com/uc?export=view&id=1ZsWk03JHV1n4nC8ReDfPdc-pHEZQJj0h)

`a`태그에는 기본적으로 들어가야 하는 속성이 있습니다. 바로 `href` 입니다. 이 속성의 값으로는 **웹 상의 주소**가 들어갑니다. 웹 페이지와 웹 페이지를 연결하는거니까 아주 당연한 것이겠죠. 아무튼 구글 검색 결과를 넣어봤습니다.

<P>링크가 적용되면 기본적으로 텍스트의 색이 파랗게 변하고 밑줄이 생깁니다. 이 디자인은 언제든지 바꿀 수 있습니다.<Gray>(CSS를 강조하는 이유는 익숙해지라는 차원에서 입니다.)</Gray> 그런데 저는 이미 방문을 했던 페이지라서 보라색으로 뜨네요. 그럼 이제 저장을 하고 라이브 서버를 켜봅시다. 제목에 건 링크를 클릭하면 그 페이지로 넘어가는걸 볼 수 있습니다.</P>

축하합니다! 여러분은 최초로 링크를 구현했습니다!

## 내 페이지에서 다른 내 페이지와 연결하기
링크는 다른 웹 사이트의 페이지 뿐만 아니라 **우리가 만든 페이지와도 연결이 가능**합니다. 단 현재상으로는 **라이브서버를 켰을 때에만 가능**한 방법입니다. 그 이유는 아직 우리는 서버에 파일을 올리지도 않았고 그런 방법도 모르기 때문이죠. 웹 상의 모든 페이지들은 전부가 서버 컴퓨터에 올라간 파일들이라는 걸 잊으면 안됩니다.

<P>아무튼 라이브서버를 통해서 우리의 프로젝트 폴더가 웹 상에 일시적으로나마 존재하게끔 만들어서 링크를 테스트해볼 수 있습니다. 저는 <Name>link.html</Name> 파일이 있는 폴더의 안에 또 다른 파일을 만들었습니다. 파일 이름은 <Name>link2.html</Name> 이라고 지었습니다.</P>

```html file=link.html
<div>
  <h1><a href="https://www.google.com/search?q=%EC%95%84%EC%9D%B4%EC%9C%A0&oq=%EC%95%84%EC%9D%B4%EC%9C%A0&aqs=chrome..69i57j69i64l2j69i60j69i61l2j0i433i512l2&sourceid=chrome&ie=UTF-8">아이유</a></h1>
  <p>대한민국의 가수이자 배우. 본명은 이지은이며, 예명 아이유(IU)는 "음악으로 너와 내가 하나가 된다"라는 뜻을 가지고 있다.</p>
</div>
```

<P>위와 같았던 코드를 아래처럼 바꿨습니다. 일단 <Code>href</Code>속성의 값을 비워뒀고 <Code>p</Code>태그를 없앴습니다. <Code>p</Code>태그는 <Name>link2.html</Name>로 옮겼습니다.</P>

```html file=link.html
<div>
  <h1><a href="">아이유</a></h1>
</div>
```

```html file=link2.html
<div>
  <p>대한민국의 가수이자 배우. 본명은 이지은이며, 예명 아이유(IU)는 "음악으로 너와 내가 하나가 된다"라는 뜻을 가지고 있다.</p>
</div>
```

파일을 두개로 쪼갠 이유는 제목을 클릭하면 설명이 나오게끔 하기 위함입니다. 제 파일에서 제 파일로 연결을 하는거죠. 제 파일에서 다른 파일로 연결을 할 때에도 주소를 적어야 합니다. 이때 나오는 개념이 **절대경로**과 **상대경로**입니다.

하지만 이건 지금 다루기엔 너무 복잡하니까 다음 글에서 제대로 다뤄보도록 하고 아주 간단하게만 다뤄보자면, 예전에 작성했던 [index.html에 대해](/post/2021-09-04-01-filename-index) 글을 보면 프로젝트 폴더의 최상위 폴더는 웹 상에서 **/**로 표현한다고 했었습니다. 이 슬래시로 시작하는 주소는 **절대경로**입니다. 절대경로는 루트폴더에서부터 접근합니다.

<Message color='b'>
  <p>루트 폴더는 프로젝트 폴더의 <Strong>최상위 폴더</Strong>를 의미합니다!</p>
</Message>

상대경로는 루트폴더에서부터 접근하는 게 아니라 특정 파일을 기점으로 접근합니다. <Name>link.html</Name>과 <Name>link2.html</Name>은 둘 다 training 폴더 안에 있습니다. 같은 폴더 안에 있는 파일에 접근하려면 **./**로 시작합니다. 상위 폴더에 있는 파일에 접근하려면 **../**로 시작합니다. 상위 폴더의 상위 폴더라면 **../../**로 접근하겠죠.

제 프로젝트 폴더의 기준으로 절대경로와 상대경로를 적용한 주소는 아래와 같습니다.

* **절대경로:** /training/link2.html
* **상대경로:** ./link2.html

이걸 a태그에 적용하면 아래와 같겠죠.

```html file=link.html
<div>
  <h1><a href="./link2.html">아이유</a></h1>
  
</div>
```

이렇게 하고 저장한 후에 라이브서버에서 실행해보면 설명 페이지로 잘 넘어가게 됩니다. 하지만 뭔가 아쉬운 점이 있죠. 어떤 웹 사이트를 보면 링크를 클릭했을 때 **새 창**에서 띄우던데 우리도 그렇게 할 수 없을까요? 그래서 존재하는 게 바로 아래와 같은 속성들입니다.

## 링크 태그의 다른 속성
`a`태그에는 아주 많은 속성들이 있지만 기본적으로 알면 좋은 두개의 속성을 다뤄보도록 하겠습니다.

### target 속성
`target`속성은 쉽게 말해 **현재 페이지에서 링크를 띄우느냐 새로운 창이나 탭에서 링크를 띄우느냐**를 결정하는 속성입니다. 값은 총 4개가 있지만 우리는 그냥 두개만 알면 됩니다. **_self**과 **_blank**입니다. **_self**는 현재 페이지에서 띄우게 합니다. 기본값입니다. `target`속성을 명시하지 않아도 기본적으로 실행된다는 것입니다. 그래서 새 창으로 띄우려면 **_blank**를 값으로 넣으면 됩니다.

```html
<a href="#" target="_blank">블라블라</a>
```

### rel 속성
`rel`속성은 **relationship**의 약자입니다. 현재 페이지와 링크될 페이지간의 관계를 설정하는 것인데, `target`속성을 사용할 때에 혹 있을지 모르는 해커의 **외부적인 접근을 방지**해야 하는데 이를 수행하기 위한 속성이기도 합니다. `target="_blank"`를 사용할 때에는 `rel="noreferrer noopener"`를 함께 작성해주면 됩니다.

이외 에도 다양한 값들이 있는데, 나중에 여러분의 지식이 더 커지면 그때 공부해도 될 겁니다.

```html
<a href="#" target="_blank" rel="noreferrer noopener">블라블라</a>
```

# 실전 연습
<P>그럼 이제 계속해서 수정해왔던 <Name>index.html</Name> 파일을 준비해봅시다. 지금까지 알아본 것을 바탕으로 우리의 프로젝트를 발전 시켜 보는겁니다.</P>

우리의 프로젝트는 아래처럼 생겼죠.

```html file=index.html
<h1>웹 개발의 3요소</h1>
<h2>HTML</h2>
<p>HTML은 웹의 뼈대를 만들어주는 기능을 하는 마크업 언어입니다.</p>
<h2>CSS</h2>
<p>CSS는 HTML로 만든 뼈대에 피부를 만들어주고 화장을 시켜주는 스타일 시트 언어입니다.</p>
<h2>JavsScript</h2>
<p>자바스크립트는 HTML과 CSS를 동적으로 제어할 수 있는 웹의 뇌와 같은 언어입니다.</p>
```

`h2`태그들에 링크를 넣고 싶습니다. 각각의 키워드를 구글에 검색한 결과를 링크하려고 합니다. 아래처럼 하면 되겠죠.

```html file=index.html
<h1>웹 개발의 3요소</h1>
<h2><a href="https://bit.ly/3lXTSYW" target="_blank" rel="noopener noreferrer">HTML</a></h2>
<p>HTML은 웹의 뼈대를 만들어주는 기능을 하는 마크업 언어입니다.</p>
<h2><a href="https://bit.ly/3u9M22j" target="_blank" rel="noopener noreferrer">CSS</a></h2>
<p>CSS는 HTML로 만든 뼈대에 피부를 만들어주고 화장을 시켜주는 스타일 시트 언어입니다.</p>
<h2><a href="https://bit.ly/39BnSnM" target="_blank" rel="noopener noreferrer">JavsScript</a></h2>
<p>자바스크립트는 HTML과 CSS를 동적으로 제어할 수 있는 웹의 뇌와 같은 언어입니다.</p>
```

`href`속성에는 링크할 페이지의 주소를 넣는 거였죠. 구글 검색결과 페이지의 주소가 너무 길어서 줄였습니다. 새 창에서 뜨게 하기 위해서 `target="_blank"`속성을 넣었고 같이 따라오는 `rel="noopener noreferrer"`속성은 외부의 악의적인 접근을 방지하기 위해 넣었습니다.

![프로젝트 세번째 과정.](https://drive.google.com/uc?export=view&id=1mRWGfvGJTB_zw2L2V2tEXjYj0RNcNcY6)

<P>이렇게 하면 우리의 프로젝트는 좀 더 발전했습니다! 이번 글의 실전 연습에 대한 부분은 깃허브 <A href='https://github.com/nihil-programming-guide/web-tuto/tree/master/HTML' type='normal'>web-tuto</A>에 기록해놨습니다. 3번 보시면 됩니다.</P>

<Line />

가이드를 작성하다보니 글이 아주 길어졌습니다. 하지만 내용은 그다지 어려운 부분은 없을겁니다. 절대경로나 상대경로 부분은 좀 살짝 머리가 아플 수 있는데 다음 글에서 제대로 다뤄볼 예정입니다. 이번 글은 여기까지입니다. 이번 글에서는 `a`태그에 대해서 알아봤고 우리의 기술은 조금 더 늘었습니다.

그럼 이번 글은 여기서 마치도록 하고 다음 글에서 봅시다.

이번 글은 웹 개발을 위한 HTML 가이드 14편입니다. 시간이 참 오래 흘렀는데 제가 게을러서 14편 밖에 작성하질 못했네요. 아무튼간에 이제는 조금 더 자주 가이드를 작성하도록 하고, 저번 두 글 Visual Studio Code 사용하기 VSCode 추천 확장 프로그램를 통해서 우리는 편집기를 메모장에서 vscode로 교체했습니다. 간단한 기능들과 확장 프로그램을 알려드렸으니 요령껏 잘 사용하시면 되겠습니다. 이번 글에서는 저번 글에 예고했던대로 웹 페이지끼리 서로 연결해주는 하이퍼 링크를 만들 수 있는 링크 태그에 대해서 알아볼 겁니다. 링크는 a태그로 만들 수 있습니다. 웹은 하이퍼링크로 연결되어 있는 웹 페이지들의 세상이라고 했었죠. 그렇기 때문에 링크는 그야말로 웹의 꽃이자 모든 것이라고 해도 과언이 아닙니다. 그럼 이제 이 링크 태그에 대해서 제대로 알아보도록 합시다.

웹 개발을 위한 HTML 가이드 14편 - 링크 태그(a)


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 />

# 개요
저번 글에서는 **vscode의 설치와 사용**에 대해서 다뤘습니다. 이번 글에서는 **vscode에서 사용할 수 있는 확장 프로그램**에 대해서 알아보려고 합니다. 정확히는 확장 프로그램 추천입니다. vscode는 가볍지만 확장 프로그램을 통해서 **얼마든지 원하는 기능과 환경을 구축할 수 있다는 특징**을 갖고 있습니다.

이러한 특징 덕에 **WebStorm**처럼은 아니지만 **IDE에 버금가는 강력한 기능**을 갖게 만들 수 있습니다. 코딩, 프로그래밍을 처음 하시는 분들에게 vscode를 추천한 것은 사람들이 많이 쓰기 때문도 있지만 이런 특징 때문도 있다는 점을 알고 계시면 좋겠습니다.

자, 그럼 웹 개발을 위한 HTML 가이드 13편을 시작하도록 합시다.

# HTML 개발을 위한 확장 프로그램
vscode에는 정말 많은 확장 프로그램이 존재합니다. 그리고 이러한 것은 많은 사람들이 사용하고 있는 vscode라서 가능한 결과입니다. **HTML과 관련된 확장 프로그램**도 정말 다양하게 존재합니다. 그 중에서 **가장 필요한 것들을 골라서 소개**할 생각입니다. 저번 글에서 이미 확장 프로그램을 설치하는 방법에 대해서 다뤘기 때문에 다시 설명하지는 않을 겁니다.

확장 프로그램을 설치하는 방법이 잘 기억이 나지 않으신다면 [Visual Studio Code 사용하기](/post/2021-09-13-01-vscode-install) 글을 참고하시기 바랍니다.

## Auto Complete Tag
![Auto Complete Tag 확장 프로그램](https://drive.google.com/uc?export=view&id=19swUqhmw3Vfb618i63TyZ7ZHARlSrIVN)

첫번째로 소개할 확장 프로그램은 **Auto Complete Tag**입니다. 이 확장 프로그램은 **태그를 직접 입력할 때에 태그를 자동으로 닫아**주는 **Auto Close Tag** 확장 프로그램과 여는 태그와 닫는 태그 중에서 한가지를 수정할 때에 **다른 쪽도 수정되게끔 만들어**주는 **Auto Rename Tag** 확장 프로그램을 동시에 설치해주는 확장 프로그램입니다.

이게 설치되어 있으면 HTML 코딩을 할 때 정말 편해집니다.

## htmltagwrap
![htmltagwrap 확장 프로그램](https://drive.google.com/uc?export=view&id=1fBEZ-vJv39AcK8JIWomsxq9ZLISzf5Ac)

<P>두번째는 <Strong>특정 텍스트를 선택(범위 지정)</Strong>한 상태나 <Strong>특정 태그를 선택한 상태</Strong>에서 <Kbd>ALT + W</Kbd>를 누르면 새로운 태그로 감싸주는 기능을 제공하는 확장 프로그램입니다. 코딩을 하다가 태그들을 감싸줄 부모 태그가 필요할 때에 자식 태그가 될 태그를 선택하고 단축키를 누르면 부모 태그가 만들어지는 편리한 기능을 제공합니다.</P>

부모 태그가 만들어지면 `p`태그인데 이름은 바꿔주면 됩니다. 여러번 사용해보면 감이 오실 겁니다.

## CSS 관련 확장 프로그램
### HTML CSS Support
![HTML CSS Support 확장 프로그램](https://drive.google.com/uc?export=view&id=11LJjRw2XESjgj5Sc8ZG4XGl0JxPXM3JT)

세번째는 HTML과 CSS를 사용하기 편하게 **자동완성 기능을 제공**해주는 확장 프로그램입니다. **html 파일에 css 파일이 연결되어 있을 경우**에 id 값이나 class 값이 이미 정의되어 있다면 html 코딩을 할 때에 **id나 class가 필요할 때** 미리 정의된 녀석들을 **추천**해주는 기능을 합니다. 지금 당장은 쓰지 않겠지만 미리 설치해둔다면 좋을 것 같습니다.

### IntelliSense for CSS class names in HTML
![IntelliSense for CSS class names in HTML 확장 프로그램](https://drive.google.com/uc?export=view&id=1F94Pn3idrn0YwP05nkNXvlDqGtZqNvrH)

네번째로 소개할 확장 프로그램은 **IntelliSense for CSS class names in HTML**입니다. html 파일에 연결된 css 파일에 정의된 **클래스들을 미리 읽어**들여서 **클래스를 지정해줄 때에 편리한 기능을 제공**해줍니다. 위에 있는 확장 프로그램과는 또 다른 강력한 기능입니다.

앞으로 HTML과 CSS를 자주 사용하게 되는데 CSS에서는 **클래스를 자주 사용**하게 됩니다. 디자인을 입힐 때에는 클래스를 주로 사용하거든요. 아무튼 이것도 설치해두면 앞으로 도움이 될 겁니다. 지금 당장 쓰지는 않더라도 말이죠.

### CSS Peek
![CSS Peek 확장 프로그램](https://drive.google.com/uc?export=view&id=10AecQ-lRpJTLLxiOtnzLwx5bPuiFOfrv)

다섯번째 확장 프로그램은 HTML과 CSS를 함께 사용할 때에 html 파일에서 지정한 **클래스나 아이디**의 스타일을 **확인할 때**에 편리한 기능을 제공해줍니다. **CSS Peek**이라는 확장 프로그램입니다. 아무 태그에 클래스나 아이디를 지정하고 지정한 클래스나 아이디를 우클릭하면 **정의로 이동**, **참조로 이동**과 같은 메뉴가 나타납니다. 정의로 이동을 누르면 **연결된 css 파일의 해당 클래스로 넘어갈 수** 있습니다.

심지어는 html 파일 내에서 **css 파일의 일부분을 팝업해서 스타일을 편집할 수도** 있습니다. 이건 나중에 CSS 가이드를 할 때에 자세하게 다뤄보도록 하겠습니다. 결론적으로 귀찮게 파일을 뒤적거리지 않아도 된다는 의미죠. 하지만 가끔 먹통이 될 때도 있어서 이 점은 참고하시면 되겠습니다.

## Live Server
![Live Server 확장 프로그램](https://drive.google.com/uc?export=view&id=19666Tcf1u4lltaYbdN1HIfFlV4-XqkOb)

우리는 앞으로 공부를 하면서 html 파일을 작성할 때에 **결과물을 미리 보고 싶을 때**가 있을 겁니다. 그럴 때에 사용하는 확장 프로그램 기능이 바로 **Live Server**입니다. **서버를 띄워서 라이브로 결과물을 확인하면서 코딩**을 할 수 있습니다. **자동으로 새로고침**이 되기 때문에 개발자는 번거롭게 새로고침을 할 필요가 없습니다.

이 확장 프로그램을 설치하면 vscode의 하단에 **Go Live라는 버튼**이 생깁니다. 버튼이 없다면 html 파일에서 우클릭을 하고 **Open with Live Server**를 클릭하면 됩니다. 로컬호스트 **5500 포트**로 서버가 열립니다.

<Line />

지금까지 간단하게 HTML에 필요한 확장 프로그램을 소개해봤습니다. 위에서 소개한 확장 프로그램 이외에도 **다양한 확장 프로그램이 있습니다.** 여러분의 입맛에 맞게 살펴보시면 될 것 같습니다. 이 가이드는 HTML 가이드인데 CSS 관련된 확장 프로그램도 같이 추천한 이유는 어차피 나중에 써야하기 때문입니다. 소개한 확장 프로그램이 많지는 않지만 이정도면 HTML을 개발하는데에 있어서 불편함은 없을 것 같습니다.

이번 글은 여기까지입니다. 다음 글은 **링크 태그**에 대해서 알아보도록 합시다.


저번 글에서는 vscode의 설치와 사용에 대해서 다뤘습니다. 이번 글에서는 vscode에서 사용할 수 있는 확장 프로그램에 대해서 알아보려고 합니다. 정확히는 확장 프로그램 추천입니다. vscode는 가볍지만 확장 프로그램을 통해서 얼마든지 원하는 기능과 환경을 구축할 수 있다는 특징을 갖고 있습니다. 이러한 특징 덕에 WebStorm처럼은 아니지만 IDE에 버금가는 강력한 기능을 갖게 만들 수 있습니다. 코딩, 프로그래밍을 처음 하시는 분들에게 vscode를 추천한 것은 사람들이 많이 쓰기 때문도 있지만 이런 특징 때문도 있다는 점을 알고 계시면 좋겠습니다. 자, 그럼 웹 개발을 위한 HTML 가이드 13편을 시작하도록 합시다. vscode에는 정말 많은 확장 프로그램이 존재합니다. 그리고 이러한 것은 많은 사람들이 사용하고 있는 vscode라서 가능한 결과입니다. HTML과 관련된 확장 프로그램도 정말 다양하게 존재합니다. 그 중에서 가장 필요한 것들을 골라서 소개할 생각입니다. 저번 글에서 이미 확장 프로그램을 설치하는 방법에 대해서 다뤘기 때문에 다시 설명하지는 않을 겁니다.

웹 개발을 위한 HTML 가이드 13편 - VSCode 추천 확장 프로그램


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 />

# 개요
우리는 지금까지 알게 된 태그는 별로 없지만 연습을 하기 위해 메모장으로 코딩을 했습니다. 물론 계속 메모장으로 코딩을 해도 상관 없지만 상당히 불편하다는 것을 느꼈을 겁니다. 이 부분은 취향에 따라 차이가 있지만 보통의 경우 편리한 기능을 제공해주는 텍스트 에디터를 사용합니다.

텍스트 에디터의 종류는 다양합니다. 프로그래밍 언어에 따라서 인기가 있는 에디터가 있기도 합니다. 다양한 에디터들 중에서 오늘 우리가 알아볼 텍스트 에디터는 **비주얼 스튜디오 코드(Visual Studio Code)**라는 녀석입니다. 마이크로소프트에서 만든 텍스트 에디터인데 사용자가 많아서 많은 확장 프로그램들이 만들어지고 있습니다. 이제 이 녀석에 대해서 알아봅시다.

시작하기 전에 메모장을 사용하면서 굳이 불편함을 느끼지 않았다면 메모장을 계속 써도 상관은 없습니다. 본인의 선택입니다.

# 비주얼 스튜디오 코드
비주얼 스튜디오 코드(Visual Studio Code)는 줄여서 **vscode**라고도 많이 부릅니다. 사용하는 사람이 많기 때문에 정보를 찾는데에 있어서 어려움이 없습니다. 당연하게도 vscode보다 뛰어난 에디터도 있습니다. 가장 먼저 떠오르는 것은 **WebStorm**이라는 녀석입니다. 근데 이 녀석은 **유료**입니다. 그 대신에 진짜 어마어마한 기능을 갖고 있습니다.

<P>이제 막 프로그래밍에 입문한 사람들에게 에디터를 유료로 사용해라! 라고는 할 수가 없기 때문에 vscode를 사용하는 겁니다. <Strong>물론 vscode 자체만으로도 어렵지 않게 프로그래밍이 가능</Strong>합니다. 아무튼, 이제부터 vscode에 대해서 알아볼 겁니다. <Mark>설치부터 시작해서 기본적인 사용 방법을 함께 알아보도록 합시다.</Mark></P>

**제가 윈도우이기 때문에 윈도우를 기준으로 설명합니다!**

## 설치하기
프로그램을 사용하기 위해서는 가장 먼저 설치를 해야합니다. 설치를 위해서 검색을 해봅시다. 구글에다가 **vscode**라고 검색합니다. 그러면 가장 위에 보이는 사이트가 있습니다. 이 사이트로 들어가줍시다.

![구글에 vscode를 검색하고 보이는 사이트로 들어간다.](https://drive.google.com/uc?export=view&id=1SssmgxNgRyx4vY0HUfMLbdrTsmKHsmRh)

사이트에 들어간 다음에 할 것은 간단합니다. 바로 눈 앞에 보이는 **파란색 다운로드 버튼을 클릭**하는 겁니다. 아마도 **운영체제에 맞게끔 다운로드 파일이 다운로드** 될 겁니다. 아무튼 다운로드를 하고난 다음에는 설치 프로그램을 실행하면 됩니다.

![사이트에 들어가면 여러분의 눈 앞에 다운로드 버튼이 보인다. 클릭하자.](https://drive.google.com/uc?export=view&id=1V42E-S2hqw3UQlB-VY2L_wS8BwKSUI4o)

대충 아무 곳에다가 파일을 다운로드하고, 실행합니다. 설치 자체는 다음 버튼을 계속 누르면 됩니다. 그래도 혹시 모르니까 아래의 이미지들과 같이 체크가 되어있는지 확인하시면 되겠습니다.

![동의합니다를 눌러준다.](https://drive.google.com/uc?export=view&id=19cu6-jOMOdRu6lykNdxNliK7aJp55SQe)
![이 네가지가 체크되어있는지 확인하자.](https://drive.google.com/uc?export=view&id=1eGAZu_q1lccMyb-QcJc6_-xIk_jrGyO_)
![설치 버튼을 눌러준다.](https://drive.google.com/uc?export=view&id=1uCl9rRFSDRiAQ97_QpLnVsy2UI75HwvO)
![설치가 되는 모습이다.](https://drive.google.com/uc?export=view&id=1GX0tpVlAbSOehgf24aQ9JV_yAcXS3wy-)

설치를 다 하고 실행하면 아래와 같은 모양의 프로그램이 실행됩니다.

![비주얼 스튜디오 코드의 모습이다.](https://drive.google.com/uc?export=view&id=1TzLeW76Rd6uyQsmIC0U4fTUmow0aHGvK)

제가 쓰던 환경에서 설정을 잠시 없앤 상태에서 찍은 이미지지만 방금 막 프로그램을 설치하고 실행한 여러분들과는 조금 다를 겁니다. 달라도 상관 없습니다. 설정이야 알아서 꾸며서 쓰면 되거든요. 이제 설치는 완료되었습니다. 기본적인 설정을 해보도록 합시다.

## 한글 설정
**vscode는 한글을 지원**하지만 처음에 설치하면 한글이 아닙니다. 그래서 **한글 설정을 해줘야** 합니다. 아주 간단하게 한글 설정을 할 수 있습니다. 좌측의 아이콘들 중에서 사각형 네개가 그려져 있는 아이콘을 클릭하시면 **확장 프로그램**을 검색할 수 있습니다.

지금 다루는 확장 프로그램에 대한 내용은 다음 글에서 계속 다룰 것이기 때문에 기억해둡시다. **vscode를 강화시키는 아주 중요한 기능**입니다.

![확장 프로그램 아이콘을 클릭해보자.](https://drive.google.com/uc?export=view&id=1leIC_ns_EKINHKcKC6xpLS6bt7xe2ul9)

생긴게 갑자기 달라졌는데 개의치마세요! 저는 사용하던 테마가 있을 뿐입니다.

아무튼 확장 프로그램 아이콘을 클릭했으면 **검색**을 합시다. **korean**이라고 검색만 해도 아래와 같은 아이콘을 갖고 있는 확장 프로그램을 발견할 수 있습니다. 저는 이미 설치되어있어서 제거라는 버튼이 있지만 여러분은 되어있지 않을 겁니다. 설치 버튼을 눌러서 과감하게 설치하고나면 한글 설정이 완료됩니다.

![한글 설정을 할 수 있는 확장 프로그램이다.](https://drive.google.com/uc?export=view&id=13NkfcEaui6tTI582W-mcl54C8yCWiz37)

## 기본적인 사용법
한글 설정도 마쳤으니 이제는 **vscode의 간단한 사용법**에 대해서 알아봅시다. 우리가 당장 프로그래밍을 하기 위해 필요한 것들을 우선 살펴보는 게 좋겠습니다. 간단하게 설정에 들어가서 설정을 하는 방법이나 쉽게 HTML 코딩을 하는 방법에 대해서 알아봅시다.

### 작업 폴더 설정하기
![폴더 작업을 하지 않은 상태의 모습.](https://drive.google.com/uc?export=view&id=14qKIZeE3JoHREbtDhZ4qclHh3Gt1ML1E)

여러분이 vscode를 설치하고 사용하려고 보면 파일을 건드릴 수가 없습니다. 정확히는 건드릴 파일이 없죠. 왜냐면 **작업 폴더 설정**을 하지 않았기 때문입니다. 그래서 우리가 사용하던 작업 폴더를 지정해줄 필요가 있습니다.

폴더 설정 방법에는 여러가지가 있습니다. 첫번째 방법은 아래의 이미지처럼 **작업 폴더를 vscode의 파일 탐색기에 드래그**해서 vscode에서 사용할 수 있게 여는 겁니다.

![폴더를 드래그해서 폴더 설정하기.](https://drive.google.com/uc?export=view&id=1jbSeig8jOhpMlox_D2ZeBKX8HzoO51XU)

두번째는 **폴더 열기** 버튼을 눌러서 직접 작업 폴더를 찾아 적용시키는 겁니다.

<P>세번째 방법은 작업 폴더에서 터미널<Gray>(cmd나 파워쉘 같은)</Gray>을 열고 <Code>code .</Code>를 쳐서 vscode를 작업 폴더에서 여는겁니다. 아래의 이미지 처럼요. <Strong>code</Strong> 는 vscode를 의미하는 것이고 그 뒤의 <Strong>.</Strong>은 현재 폴더를 의미합니다. 즉 작업 폴더에서 vscode를 열겠다. 라는 의미인 것이죠.</P>

![터미널을 이용해서 열기.](https://drive.google.com/uc?export=view&id=1RipMDzJJTWPwbz8uBi-GAXRZNaUGsSaV)

저는 세번째 방법을 더 좋아하고 자주 이용합니다. 굳이 설정이랄 것도 없고 항상 저렇게 열기 때문에 따로 설정해줄 필요가 없거든요. 아무튼 이렇게 설정을 마치고나면 본격적인 코딩이 가능해집니다.

![폴더 설정을 마친 모습이다.](https://drive.google.com/uc?export=view&id=1WjzUIAH-SNsOW5070fLPlA8BaHoCAHj8)

### 파일 탐색기 다루기
![vscode의 파일 탐색기의 모습이다.](https://drive.google.com/uc?export=view&id=1vqy6tSdU9D1qochvDOUjkmuVMvrDHppc)

vscode를 켜면 왼쪽에 보이는 아이콘 메뉴들 중에서 파일 모양처럼 생긴게 **파일 탐색기** 부분입니다. 여러분의 프로젝트 폴더의 내부 파일들이 보이고 이를 직접적으로 조작할 수 있는 부분이죠. 파일 탐색기에서 파일을 만들면 실제로 디스크에도 파일이 생기는 겁니다.

파일을 어떻게 만들고, 폴더를 어떻게 만드는지 알아봅시다. 아주 간단합니다.

<P>프로젝트 폴더 내에 파일이나 폴더가 아무것도 없을 때에는 <Bold>탐색기에 커서를 대고 있거나 탐색기의 부분이 활성화되어 있을 때에 생기는 아이콘들을 이용</Bold>해서 파일을 만들 수 있고 <Bold>그냥 허공에 우클릭을 하면 나타나는 메뉴를 통해서</Bold> 파일이나 폴더를 만들 수 있습니다.</P>

![탐색기가 활성화되면 상단에 아이콘이 뜬다.](https://drive.google.com/uc?export=view&id=1DmvEClbdnP4u6mDlHVePjbTR-2PFrbAy)
![탐색기를 우클릭하면 메뉴가 뜬다.](https://drive.google.com/uc?export=view&id=191Hzu8b3x0jdFrC83hI0z6P1SCki31n2)

<P>이렇게 아이콘을 누르거나 메뉴를 이용해서 폴더나 파일을 만든 후에는 <Bold>이름을 입력</Bold>해주면 됩니다. 파일 이름을 입력하지 않으면 파일의 생성은 취소됩니다. 파일 이름을 입력해줍시다.</P>

<P>특정 폴더의 안에서 파일이나 또 다른 폴더를 만들기 위해서는 <Bold>탐색기에서 해당 폴더를 클릭한 상태</Bold>에서 탐색기 상단의 아이콘을 누르거나 폴더를 우클릭해서 새 폴더 혹은 새 파일 메뉴를 클릭하면 되겠습니다.</P>

<P>파일의 이름을 바꾸려면 파일을 클릭한 상태에서 <Kbd>F2</Kbd>를 누르면 됩니다. 윈도우에서 파일 이름 바꿀 때에 사용하는 단축키와 같습니다. 여기까지가 아주 기본적인 파일 탐색기 이용 방법입니다. 하다보면 적응 될 겁니다. 사용해봅시다!</P>

### 설정 이용하기
<P>vscode는 가볍지만 어떤 설정을 하느냐에 따라서 천차만별의 기능을 갖게 됩니다. 설정을 통해서 여러분의 개성을 표현할 수도 있습니다. 설정창으로 들어가는 방법에는 <Strong>좌측 하단의 톱니모양 아이콘을 클릭</Strong>하고 설정을 누르는 방법과 <Kbd>CTRL + ,</Kbd>을 누르는 방법 등등이 있는데 단축키를 이용해서 들어가는 게 가장 빠릅니다.</P>

![설정창에 들어간 모습이다.](https://drive.google.com/uc?export=view&id=1B1HUOwzG1GmjWFjIKlpaO-klpvV9GK4K)

이 설정창에서 많은 것들을 바꿀 수가 있습니다. 확장 프로그램에 대한 설정도 여기서 바꿀 수 있습니다. 만일 여러분이 코딩에 좀 익숙하다면 직접 **JSON파일**을 건드려서 설정을 할 수도 있습니다.

![json파일을 직접 건드리는 방법도 있다.](https://drive.google.com/uc?export=view&id=1CXez0KjgaB0MsD4fkiAtrQABZzu6c-9L)

설정에서 폰트 정도는 바꿔주는 게 여러분의 정신건강에 좋을 수 있습니다. 폰트 중에서도 모든 글자의 폭이 같은 폰트를 사용하면 더 좋습니다. 현재 제가 사용하는 폰트는 **Cascadia Code**라는 폰트 입니다.

### Emmet 사용하기
HTML 코딩을 할 때에는 **Emmet**의 기능을 이용하는 게 정말 편리합니다. 하나 하나 태그를 치는 것보다는 태그의 이름을 치고 **탭을 눌러 자동으로 완성**하는 게 상당한 편의성을 제공해줍니다. Emmet에 대한 디테일한 사용법은 나중에 따로 올려보겠습니다. 이번 글에서는 간단하게만 알아봅시다.

```text
!
```

비어있는 html 파일에서 **느낌표**만 치고 **탭**을 누르면 아래와 같은 기본 골격이 만들어집니다. 여기서 조금만 수정하면 되겠죠.

```html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>

</body>
</html>
```

```text
div
```

```html
<div></div>
```

**div**를 치고 **탭**을 누르면 `div`태그가 완성됩니다. 홀로 닫는 태그의 경우에는 닫는 태그가 없어도 되기 때문에 홀로 닫는 태그가 만들어집니다.

```text
div>p
```

```html
<div>
  <p></p>
</div>
```

이런식으로 하면 **부모태그와 자식태그** 관계의 태그를 완성할 수 있습니다. **>**를 이용해서 상위, 하위 구조를 만들어낼 수 있는 겁니다. 중요한건 **탭**을 누르는 겁니다.

```text
h2{제목}+p{문단}
```

```html
<h2>제목</h2>
<p>문단</p>
```

태그 이름뒤에 **중괄호**를 붙이고 중괄호의 **안에 내용**을 입력하고 **탭**을 누르면 여는 태그와 닫는 태그의 안에 내용이 들어가게 됩니다. **+**를 이용하면 **형제 관계**에 있는 태그를 완성할 수 있습니다.

이렇게 간단하게만 알아봐도 Emmet의 기능은 짱짱하다는 것을 알 수 있습니다. 이처럼 Emmet을 사용하면 아주 편하게 HTML 코딩이 가능합니다.

<Line />

이번 글에서는 vscode에 대해서 알아보는 시간을 가져봤습니다. vscode를 설치하고, 실행하고 설정을 건드리는 방법이나 Emmet을 사용하는 방법에 대해서 살펴봤죠. vscode도 지금은 낯설겠지만 계속 만져보다보면 익숙해질 것이라고 생각합니다.

다음 글에서는 **설치하면 좋은 확장 프로그램**에 대해서 다뤄보도록 하겠습니다. 이번 글은 여기까지입니다. 다음 글에서 봅시다.


우리는 지금까지 알게 된 태그는 별로 없지만 연습을 하기 위해 메모장으로 코딩을 했습니다. 물론 계속 메모장으로 코딩을 해도 상관 없지만 상당히 불편하다는 것을 느꼈을 겁니다. 이 부분은 취향에 따라 차이가 있지만 보통의 경우 편리한 기능을 제공해주는 텍스트 에디터를 사용합니다. 텍스트 에디터의 종류는 다양합니다. 프로그래밍 언어에 따라서 인기가 있는 에디터가 있기도 합니다. 다양한 에디터들 중에서 오늘 우리가 알아볼 텍스트 에디터는 비주얼 스튜디오 코드라는 녀석입니다. 마이크로소프트에서 만든 텍스트 에디터인데 사용자가 많아서 많은 확장 프로그램들이 만들어지고 있습니다. 이제 이 녀석에 대해서 알아봅시다. 시작하기 전에 메모장을 사용하면서 굳이 불편함을 느끼지 않았다면 메모장을 계속 써도 상관은 없습니다. 본인의 선택입니다.

웹 개발을 위한 HTML 가이드 12편 - Visual Studio Code 사용하기


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파일 뿐만 아니라 **모든 파일**을 이렇게 공유할 수가 있습니다. 웹 페이지에 존재하는 이미지 또한 호스트 컴퓨터에 존재하는 어떤 폴더 안에 위치한 이미지 파일입니다. 그냥 쉽게 생각하면 모든 페이지와 모든 영상, 이미지, 음원들은 **전부가 호스트 컴퓨터가 호스팅하고 있는 파일**이라고 생각하면 됩니다.

이 이야기를 왜 하느냐! 바로 **index.html**이라는 파일 이름과 관련이 있기 때문입니다.

# 컴퓨터와 아이피(IP)
모든 컴퓨터는 **아이피**라는 것을 가집니다. 아이피는 고유한 식별 번호같은 겁니다. **사람으로 생각해보면 주민등록번호**라고 생각하시면 됩니다. 아이피는 **Internet Protocol**의 약자로 컴퓨터와 컴퓨터가 **네트워크에서 소통할 때에 필요한 번호**입니다. 호스트 컴퓨터들도 아이피를 당연히 갖고 있습니다.

<P>모든 웹 사이트의 웹 페이지들은 웹 서버에 존재하는 파일이기 때문에 호스트 컴퓨터에 접근해야만 합니다. 그러기 위해 모든 웹 페이지의 주소, 즉 <Strong>URL</Strong>에는 아이피가 포함되어있습니다. 그런데 우리가 보는 것은 <Strong>www.naver.com</Strong>과 같은 형태죠. 이런 주소들은 아이피의 별명이라고 생각하면 됩니다. <Strong>도메인</Strong>이라고 부릅니다. 우선 네이버를 예시로 들어볼까 합니다.</P>

```text
https://www.naver.com
https://0.0.0.0:0
```

호스트 컴퓨터로 접근하는 아이피의 구조는 보통 아랫줄과 같습니다. 아이피는 **0부터 255**까지 총 네가지의 숫자로 이루어져 있습니다. 숫자와 숫자는 점으로 구분합니다. 아이피의 마지막 숫자의 바로 뒤에는 **콜론(:)**이 오고 그 뒤에 **포트(Port)**에 해당하는 숫자가 오게 됩니다. 호스트 컴퓨터는 이렇게 아이피와 포트가 존재합니다.

네이버의 경우도 원래는 아랫줄과 같은 모양인데 윗줄처럼 **도메인으로 숨겨둔 상태**입니다. 왜냐면 영어를 입력하는 게 더 기억에도 남고 쉽기 때문이죠. 모든 사이트들은 이렇게 도메인으로 숨겨둔 겁니다.

일반적으로 웹에서 암묵적으로 쓰는 포트는 **80**입니다. 80 포트는 표기를 생략할 수 있습니다. 호스트 컴퓨터가 돌리고 있는 서버가 **https**를 사용하는 서버라면 포트는 **443**입니다. 443도 생략이 가능합니다. 하지만 다른 포트들은 생략이 불가능합니다. 아무튼간에 중요한건 아이피와 포트를 도메인이라는 것으로 숨겨두었다는 겁니다.

# 호스트 컴퓨터와 파일
호스트 컴퓨터가 모든 종류의 파일을 공유할 수 있다는 말은 컴퓨터 안의 모든 파일을 공유한다는 것은 아닙니다. 물론 그런 경우도 있지만 **서버가 호스팅하고 있는 폴더와 그 아래의** 하위 폴더, 하위 파일들을 공유할 수 있습니다. 이 때, 서버가 호스팅하고 있는 폴더는 우리처럼 개발환경이 갖춰진 **프로젝트 폴더**입니다.

<P><Strong>https://www.naver.com</Strong>라는 주소는 네이버의 프로젝트 폴더를 가리키고 있는 것과 같죠. 아까는 아이피의 별명이라고 했는데 하나의 컴퓨터에서 <Strong>여러개의 서버를 만들고 배포할 수 있기 때문</Strong>에 정확히는 <Strong>하나의 서버가 여러개의 도메인을 가질 수</Strong> 있는 겁니다.</P>

# index라는 이름의 의미
지금까지 이 이야기들을 한 이유는 **index**라는 이름을 설명하기 위해서는 여기까지의 설명이 필요했기 때문입니다. 대부분의 경우 index라는 이름은 **각 폴더의 기본 파일**을 의미합니다. **index.html**이라면 그 폴더의 **기본 페이지**를 의미하는 것이고 **index.js**라면 그 폴더의 **기본 스크립트 파일**을 의미하는 겁니다.

<P>이 내용은 나중에 다룰 절대경로와 상대경로에 대한 것과도 관련이 있는데, 웹상에서 프로젝트의 루트 폴더 즉 프로젝트의 최상위 폴더의 경로는 <Strong>/</Strong>로 표현합니다. <Strong>https://www.naver.com</Strong>라는 주소는 사실 <Strong>/</Strong>가 빠져 있는 것이고, <Strong>/</Strong>는 <Strong>/index.html</Strong>로 표현할 수 있습니다. <Strong>index.html</Strong>이라는 이름은 생략이 가능합니다. 다른 이름은 생략이 불가능하고 확장자만 생략이 가능한데, <Strong>index.html</Strong>이라는 파일 이름 만큼은 생략이 가능합니다.</P>

<P>즉 우리가 항상 들어가는 네이버 홈페이지의 주소는 이렇게도 쓸 수 있습니다. <Strong>https://www.naver.com/index.html</Strong>로 말이죠. 이건 모든 폴더에 해당될 수 있는 것이라서 모든 주소는 아래의 두가지 경우 중 하나입니다.</P>

```text
https://주소/폴더이름/index.html
https://주소/폴더이름.html
```

위의 두 주소는 완전히 똑같은 기능을 합니다. 이건 여러분이 웹 개발을 할 것이라면 **언젠가는 알아야 하는 내용**입니다. 좀 빨리 알아본 것이라고 생각하고 이해가 잘 안되면 나중에 다시 읽어보시면 됩니다. 이번 글은 간단하게 **index.html**이라는 이름에 대해서 알아봤습니다. 이건 나중에 **자바스크립트를 건드릴 때에도 똑같이 적용**됩니다!

이번 글은 여기까지 입니다. 나중에는 더 심화적인 내용으로 **로컬 주소와 웹 주소**, 그리고 **상대경로와 절대경로**를 다룰 때가 올텐데 그건 나중일이니 일단은 접어두도록 하겠습니다. 다음 글은 정말로 **비주얼 스튜디오 코드**에 대해 알아보도록 합시다.


이번 글에서는 알아둬서 나쁠 것 없는 주제를 다뤄보려고 합니다. 원래는 비주얼 스튜디오 코드에 대해서 글을 작성하려고 했는데 기존에 작성한 글에서 분리하는 게 나을 것 같은 내용이 있어서 이렇게 작성해보려고 합니다. 이번 글의 주제는 웹의 주소와 파일 이름에 대한 것입니다. 다소 어려운 이야기가 될 수 있습니다. 지금 당장 이해가 안간다면 그냥 다음글로 넘어가셔도 전혀 문제가 없는 내용입니다. 최대한 이해가 되게끔 글을 작성할 것인데 혹시라도 이해가 안된다면 전혀 문제가 안되기 때문에 정말로 다음글로 넘어가시면 됩니다. 그럼 웹 개발을 위한 HTML 가이드 번외편 시작하도록 합시다.

웹 개발을 위한 HTML 가이드 번외 - index.html에 대해


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 />

# 개요
[저번 글](/post/2021-07-19-01-heading-tags)에서는 제목 태그에 대해 알아봤습니다. 이번 글에서 알아볼 내용은 문단 태그입니다. 제목이 있다면 문단이 있다고 저번 글에서 이야기를 했었죠. 하지 않았어도 이건 당연합니다! 제목 태그를 알아봤으니 이제는 문단 태그에 대해서 알아볼 시간입니다.

웹 개발을 위한 HTML 가이드 11편 시작합니다.

# 문단을 나타내는 p태그
HTML에서 **문단을 나타내는 태그**는 바로 `p태그`입니다. **Pragraph**의 약자로 말 그대로 문단을 만들어줍니다. `p태그`는 블럭 태그의 특징을 띄고 대부분의 경우에는 제목 태그와 함께 쓰이는 편입니다.

자, 그럼 메모장을 열고 HTML의 기본 구조를 작성한 뒤에 다음과 같은 코드를 넣어보고 **html파일로 저장**한 뒤에 실행해봅시다.

```html
<p>이것은 문단 태그입니다.</p>
```

![문단 태그의 모습.](https://drive.google.com/uc?export=view&id=10Zlv6hDTbnt--eI1nb5NZfJq7HcEJ_Ph)

그러면 아래의 이미지처럼 글자가 나타난 것을 볼 수 있죠. 제목과는 다르게 굵지도 않고 크기가 크지도 않습니다. 이게 바로 본문에 해당하는 태그입니다. 이런 블로그 같은 곳에는 `p태그`가 특히나 많이 사용됩니다. 가령 뉴스기사 페이지 같은 곳에서 많이 쓰는 셈이죠. `p태그`에 대한 사용 방법은 이게 전부입니다.

그런데 이렇게 끝나면 참 아쉽죠. 몇가지를 더 알아보도록 합시다.

```html
<p>
  태그 안에서 아무리
  엔터를 쳐서 여러줄을 적더라도
  줄바꿈은 일어나지 않습니다.
</p>
```

위처럼 적으면 어떻게 될까요? 적힌 내용처럼 **줄바꿈이 되지 않습니다.** 한 번 확인해볼까요?

![HTML에서 줄바꿈을 하기 위해서는 개행 태그가 필요하다.](https://drive.google.com/uc?export=view&id=1CLay0oXiLdURobpRqFQBkJv041g3Z-ET)

이렇게 아무 일도 일어나지 않았습니다. **HTML에서 줄바꿈을 하기 위해**서는 새로운 태그를 알아야 합니다. 바로 **개행 태그**입니다.

## 개행을 나타내는 br태그
개행 태그는 `p태그`와 함께 사용되기도 하고 따로 사용되기도 합니다. 줄바꿈이 필요할 때에 혹은 빈 줄이 필요할 때에 사용하는 태그입니다. 바로 `br태그`라고 하는 태그인데 이는 **Line break**를 의미합니다. 그래서 개행 태그인 것이죠.

아래와 같이 사용합니다.

```html
<p>
  아이유 - 라일락<br />
  아이유 - 코인
</p>
<br />
<br />
<br />
<p>아이유 - 에필로그</p>
```

![br태그를 함께 이용할 때가 많다.](https://drive.google.com/uc?export=view&id=1u0HkwHrok_Dw6Na1zMl247zWvXN569Ag)

여러번 사용하면 빈줄 여러개가 생깁니다. HTML은 이렇게 직관적인 기능을 갖고 있기 때문에 연습만 잘 한다면 익히는데에 별 문제는 없을 것이라고 생각합니다. `br태그`는 닫는 태그가 없습니다. 홀로 닫는 태그이기 때문에 혼자서 닫아주시면 됩니다.

# 실전 연습
<P>그럼 이제 마지막으로 실습을 한 번 해보고 글을 마치도록 합시다. 바로 <Strong>제목 태그</Strong>와 함께 사용해서 간단한 문서 페이지를 만들어 보는겁니다. 우리가 저번 글에서 <Name>index.html</Name>에 추가했던 내용이 제목들이었죠. 이번 글에서는 여기에 본문을 추가해보는 것을 목적으로 코딩을 해보도록 합시다.</P>

```html file=index.html
<h1>웹 개발의 3요소</h1>
<h2>HTML</h2>
<h2>CSS</h2>
<h2>JavsScript</h2>
```

이런 모양일텐데, 각 `h2`태그의 아래에 설명을 적어보도록 합시다. 아래처럼 간단하게 입력하면 됩니다.

```html file=index.html
<h1>웹 개발의 3요소</h1>
<h2>HTML</h2>
<p>HTML은 웹의 뼈대를 만들어주는 기능을 하는 마크업 언어입니다.</p>
<h2>CSS</h2>
<p>CSS는 HTML로 만든 뼈대에 피부를 만들어주고 화장을 시켜주는 스타일 시트 언어입니다.</p>
<h2>JavsScript</h2>
<p>자바스크립트는 HTML과 CSS를 동적으로 제어할 수 있는 웹의 뇌와 같은 언어입니다.</p>
```

이렇게 코딩을 하고 저장해봅시다. 그리고 실행을 하면..!

![프로젝트 두번째 과정.](https://drive.google.com/uc?export=view&id=12iiserJEHdTyDG-cK-2rybaFxk4mOzdg)

이처럼 간단한 문서가 만들어졌습니다. 여러분은 **웹다운 웹**을 처음으로 만들어 본 것입니다. 다시 한 번 지금까지의 내용을 설명을 하자면 `h1`태그는 한 페이지에 하나만 존재하는 게 표준으로 권장되고 있다고 했습니다. 그래서 하나를 넣었고 그 아래 `h2`태그들은 많아도 상관 없고 셋 다 같은 레벨의 목차이기 때문에 사용했습니다.

이렇게 HTML은 문서의 측면이 강하게 다가옵니다. 물론 이건 우리가 초기 단계의 HTML을 배우고 있기 때문이고, 간단한 것만 알아보고 있기 때문입니다. 훗날 디자인을 입히고 **자바스크립트를 사용할 때**가 되면 비로소 **웹 어플리케이션**, **웹 프로그램**이 되는 셈입니다.

<P>여러분이 잘 따라오셨다면 <Name>index.html</Name>의 내용은 아래의 코드와 같을 겁니다.</P>

```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>
  <p>HTML은 웹의 뼈대를 만들어주는 기능을 하는 마크업 언어입니다.</p>
  <h2>CSS</h2>
  <p>CSS는 HTML로 만든 뼈대에 피부를 만들어주고 화장을 시켜주는 스타일 시트 언어입니다.</p>
  <h2>JavsScript</h2>
  <p>자바스크립트는 HTML과 CSS를 동적으로 제어할 수 있는 웹의 뇌와 같은 언어입니다.</p>
</body>

</html>
```

오늘 만들어본 파일은 보관을 해두시기 바랍니다. 지금 당장 저장을 합시다! 다음 글에서도 계속 사용할 것이기 때문이죠. 저 같은 경우는 프로그래밍을 위한 폴더를 만들어놨고 그 안에 프로젝트별로 카테고리를 만들어서 그 카테고리의 안에 프로젝트 폴더들을 넣어둡니다. 이 블로그로 예를 들어보자면 **web-coding/Blog/nihilog-code** 이런 구조를 하고 있습니다.

어떤 구조로 프로젝트 폴더를 관리하든 그건 자유롭게 하시고 중요한 것은 보관을 해두는 겁니다. 앞으로 이 파일을 계속해서 발전시켜서 다양한 기능을 하게끔 만들어 볼 겁니다. HTML 가이드에서 사용하고 있는 이 파일은 깃허브에 올려두었습니다. 아래의 링크를 참고하시면 됩니다.

<P><A type='normal' href='https://github.com/nihil-programming-guide/web-tuto'>web-tuto</A> 이 링크에서 HTML 폴더로 들어가시면 진행도 별로 폴더가 있습니다. 링크 태그를 추가해놓은 것은 미리 만들어놨으니까 무시하시고 2번을 보시면 됩니다.</P>

<Line />

이번 글에서는 **문단 태그**에 대해 알아봤고 **개행 태그**에 대해서도 알아봤습니다. 앞으로도 계속 쓰일 것이기 때문에 여러번 연습을 해보시면 좋을 겁니다. 다음 글은... HTML 가이드가 아닙니다. 다음 글에서는 정비 타임으로 **텍스트 에디터**를 만져보는 시간을 가질 겁니다. 언제까지고 이 불편한 메모장을 갖고 있을 수는 없거든요.

다음 글에서는 위에서 말했던 것처럼 <Strong><A type='normal' href='https://code.visualstudio.com/'>VSCode</A></Strong>에 대해서 알아볼 예정입니다. 그럼 이번 글도 고생많으셨습니다. 다음 글에서 봅시다!


웹 개발을 위한 HTML 가이드 11편 시작합니다. 저번 글에서는 제목 태그에 대해 알아봤습니다. 이번 글에서 알아볼 내용은 문단 태그입니다. 제목이 있다면 문단이 있다고 저번 글에서 이야기를 했었죠. 하지 않았어도 이건 당연합니다! 제목 태그를 알아봤으니 이제는 문단 태그에 대해서 알아볼 시간입니다. HTML에서 문단을 나타내는 태그는 바로 p태그입니다. Pragraph의 약자로 말 그대로 문단을 만들어줍니다. 블럭 태그의 특징을 띄고 대부분의 경우에는 제목 태그와 함께 쓰이는 편입니다.

웹 개발을 위한 HTML 가이드 11편 - 문단 태그(p)


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편 지금 시작합니다.

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

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에 대한 기초적인 정보에 대해서 알아봤다면 이번 글부터는 본격적으로 태그들에 대해서 알아보는 시간을 갖도록 할 겁니다. 이번 글에서는 공간을 할당하는 태그인 `div`태그와 `span`태그에 대해서 알아볼 예정입니다.

# 공간을 할당하는 태그
<P><Bold>공간을 할당하는 태그에는 <Strong>두가지</Strong></Bold>가 있습니다. 위에서 이미 언급이 된 <Code>div</Code>태그와 <Code>span</Code>태그입니다. 이 두가지 태그는 가장 많이 사용되는 태그라고 생각하는데, <Strong>말 그대로 공간을 할당하기 위한 태그</Strong>입니다. 이 두가지의 태그는 가장 일반적이고 기초적인 태그들이기 때문에 처음으로 배워볼 태그로 결정했습니다.</P>

사실 간간히 이 태그들을 언급하기는 했습니다. 블럭 태그와 인라인 태그를 설명할 때에도 언급을 했었죠. 이를 기억한다면 좋은 거고 그렇지 않다면 [태그의 유형](/post/2021-05-08-01-html-block-inline-tag) 글을 읽고 진행하는 것을 추천드립니다.

여러 개발자들이 공간을 할당하는 태그를 사용하는 주된 목적은 **레이아웃을 구성하는 것**에 있습니다. 레이아웃을 구성한다는 것은 **페이지의 구조를 구성한다는 것**입니다. 어떤 항목을 어디에 둘지에 대한 것이죠. HTML에서는 `div`태그를 통해서 레이아웃을 나눕니다. 경우에 따라서 `span`태그를 이용하기도 합니다. 그럼 이제 각각의 태그를 살펴보도록 합시다.

## div 태그
나누다, 분할하다 라는 의미를 가진 **Division**의 약자인 `div`태그는 대표적인 **블럭 태그**이며 많은 사람들이 특정 공간을 할당할 때에 자주 사용하는 태그입니다. 말 그대로 공간을 할당하는 태그이기 때문에 그것 외에는 별다른 기능은 없습니다. 딱히 의미를 가지는 태그는 아니기 때문에 `div`태그는 시맨틱 태그가 아니라는 의미가 되겠죠.

```html
<div>
  
</div>
```

`div`태그는 **CSS**와 함께 사용할 때에 빛을 발합니다. 어떤 의미를 지닌 것은 아니기 때문에 `id`속성이나 `class`속성을 통해서 이름을 붙여줍니다. 어떤 `div`태그는 이미지를 담기 위해 사용될 수 있고 어떤 `div`태그는 텍스트를 담기 위해 사용될 수 있기 때문입니다.

```html
<div id="number-box">
  
</div>
```

이런 식으로 말입니다. 위의 `div`태그의 용도는 숫자를 담아두기 위한 용도일 겁니다. 이름에 그렇게 표시되어 있기 때문이죠. 어떻게 사용될 지는 누가 코드를 작성하느냐에 따라 다르기 때문에 다양한 방법으로 사용되는 태그입니다.

## span 태그
범위라는 의미를 가진 단어인 <Bold>span</Bold>과 이름이 같은 `span`태그는 대표적인 인라인 태그입니다. `div`태그와 마찬가지로 별다른 의미를 갖고 있지는 않으며, 그렇기 때문에 시맨틱 태그가 아닙니다.

`span`태그는 주로 `p`태그 내에서 중요한 정보는 아니지만 굵게 하고 싶거나, 다른 색상으로 강조를 하고 싶을 때에 사용합니다. 중요한 내용이라면 `em`태그나 `strong`태그를 사용하면 되는데 중요한 내용은 아니지만 기울이고 싶거나 색깔을 바꾸고 싶다면 그 때에 `span`태그를 사용하면 되겠습니다. 물론 **CSS**를 활용해야하겠죠!

```html
<p>span 태그는 <span class="red">이런식</span>으로 사용한다.</p>
```

다음 파트에서 `p`태그를 배우게 될테니 지금은 몰라도 좋습니다. `em`태그나 `strong`태그도 마찬가지입니다. 지금의 내용을 기억해뒀다가 나중에 다음 파트들에서 생각만 나도 성공입니다.

<Line />

이번 글에서는 `div`태그와 `span`태그에 대해서 알아봤습니다. 한 번 오늘 배운 이 두가지의 태그를 만지면서 연습해보면 좋을 것 같습니다. 이번 글은 여기까지 입니다. 다음 글은 제목 태그에 대해서 알아볼 예정입니다. 그럼 다음 글에서 봅시다.

이전 글까지는 HTML에 대한 기초적인 정보에 대해서 알아봤다면 이번 글부터는 본격적으로 태그들에 대해서 알아보는 시간을 갖도록 할 겁니다. 이번 글에서는 공간을 할당하는 태그인 div 태그와 span 태그에 대해서 알아볼 예정입니다. 공간을 할당하는 태그에는 두가지가 있습니다. 위에서 이미 언급이 된 div 태그와 span 태그입니다. 이 두가지 태그는 가장 많이 사용되는 태그라고 생각하는데, 말 그대로 공간을 할당하기 위한 태그입니다. 이 두가지의 태그는 가장 일반적이고 기초적인 태그들이기 때문에 처음으로 배워볼 태그로 결정했습니다.

웹 개발을 위한 HTML 가이드 9편 - 공간 할당 태그(div, span)

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 />

<P>우리는 살아가면서 아주 다양한 메모를 합니다. 메모의 목적은 잊어버리지 않기 위함이죠. 잊을만할때 메모를 보면 다시 명확하게 떠오르기도 합니다. <Bold>프로그래밍을 하는 도중에도 우리는 메모를 할 수 있습니다.</Bold> 이를 <Strong>주석</Strong>이라고 하고, 영어로는 <Strong>Comment</Strong>라고 합니다.</P>

웹 개발을 위한 HTML 가이드 8편은 주석에 대해 다룹니다. 사실 주석에 대해선 별 게 없지만 프로그래밍에 첫걸음을 한 우리는 왜 주석을 쓰는지 알아야 합니다. 천천히 알아보도록 합시다.

<P><Mark>주석은 파일 내에 적혀 있지만 실질적인 프로그래밍의 내용에는 들어가지 않는 구문을 말합니다.</Mark> 즉 영향을 주지 않는 코드를 말하는 겁니다. 주석을 적는 행위를 보고 주석을 단다고 하기도 합니다.</P>

<P>프로그래밍을 하다가 나중에 수정을 해야 하는 부분을 체크해두고 잠을 청하거나 다른 일을 하는 때도 언젠가는 겪을 수 있겠죠? 그럴 때에 주석을 달아서 메모를 해두거나 프로그래밍을 하다보면 복잡하게 진행될 때가 있는데 특정 구간을 찾기 위해서 주석을 중간 중간 달아두기도 합니다. 혹은 협업을 해야 할 때에 가이드라인 같은 것을 적는 용도로도 주석을 이용할 수 있죠.</P>

주석은 다양한 프로그래밍 언어가 지원해주는 기능입니다. 없는 언어는 제가 지금까지는 못봤습니다. 아무튼 HTML에서의 주석은 다음과 같이 표현합니다.

```html



```

<P>누가 HTML 아니랄까봐 태그처럼 생겼습니다. <Bold>HTML 공부를 할 때에는 주석을 이용해서 각 코드의 의미와 기능을 적으면서 공부를 하는 걸 추천합니다!</Bold> 이번 글은 여기까지 입니다. 다른 글에서는 정말로 본격적으로 태그를 하나 하나 배울 겁니다. 다음 글에서는 <Code>div</Code> 태그와 <Code>span</Code> 태그에 대해서 알아봅시다.</P>

우리는 살아가면서 아주 다양한 메모를 합니다. 메모의 목적은 잊어버리지 않기 위함이죠. 잊을만할때 메모를 보면 다시 명확하게 떠오르기도 합니다. 프로그래밍을 하는 도중에도 우리는 메모를 할 수 있습니다. 이를 주석이라고 표현합니다. 영어로는 Comment라고 합니다. 주석은 파일 내에 적혀 있지만 실질적인 프로그래밍의 내용에는 들어가지 않는 구문을 말합니다. 즉 영향을 주지 않는 코드를 말하는 겁니다. 주석을 적는 행위를 보고 주석을 단다고 하기도 합니다.

웹 개발을 위한 HTML 가이드 8편 - 주석


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 가이드 7편입니다. 이번 글에서는 시맨틱 태그에 대해 다룹니다. 태그의 이름은 아니고 태그의 분류 같은 겁니다. 지금까지 HTML이 발전하면서 다양한 태그가 생겨났습니다. HTML이 나온지 얼마 안됐을 때부터 HTML 4버전 까지만 해도 태그들이 가지는 의미는 별로 없었습니다. 어떤식으로 표현을 해도 브라우저 상에선 다 같은 것들이었죠.

그래서 현재 HTML에는 <Mark>실질적인 의미와 기능이 일맥상통하는 태그가 있는가 하면 그렇지 않은 태그도 있습니다. 전자의 경우를 <Strong>시맨틱 태그</Strong>라고 하고 후자의 경우를 <Strong>논 시맨틱 태그</Strong></Mark>라고 합니다.

시맨틱은 영어 단어 <Strong>Semantic</Strong> 입니다. 이 단어는 <Strong>의미론적인, 의미의</Strong>라는 의미를 갖고 있습니다. 시맨틱 태그는 의미를 가지는 태그들의 총칭입니다. 하지만 이번 글에서 그 리스트 하나 하나를 알아보는 건 아닙니다. 이것이 왜 중요하고 왜 시맨틱 태그를 사용해야 하는지에 대해서 다뤄보도록 할 겁니다.

## 시맨틱 태그의 중요성
`div`태그는 공간을 할당하는 태그입니다. 특별한 의미를 갖고 있지 않습니다. `div`태그 레이아웃을 할당하는데에도 사용하고 텍스트로도 사용합니다. 어떻게 쓰냐에 따라서 달라지기 때문에 그 기능이 명확하지도 않습니다. 그리고 이런 명확하지 않은 특징은 검색엔진이나 브라우저에게도 똑같이 전달됩니다. 과거에는 아래와 같은 방식으로 웹을 구성했습니다.

```html
<div id="header">헤더</div>
<div id="footer">푸터</div>
```

위의 코드처럼 개발자들이 알아볼 수 있게 `id`속성이나 `class`속성으로 구분을 해도 브라우저나 검색엔진에겐 그냥 `div`태그일 뿐입니다.

하지만 HTML 5버전이 나타나면서 여러가지가 바뀌었습니다. 태그 자체가 의미를 가지고 브라우저나 검색 엔진이 그 의미에 맞게끔 처리를 하게 되었습니다. 위의 코드를 요즘 사용되는 방식으로 바꾸자면 아래와 같습니다.

```html
<header>헤더</header>
<footer>푸터</footer>
```

시맨틱 태그들은 브라우저도 검색엔진도 그 의미를 파악할 수 있습니다. 아직은 배우지 않았지만 `img`태그는 <Strong>image</Strong>의 약자이고 말 그대로 이미지와 관련된 태그입니다. 의미가 명확하죠. `p`태그는 <Strong>Paragraph</Strong>의 약자입니다. 문단이라는 의미죠. `p`태그는 텍스트 문단을 만드는 태그 입니다.

시맨틱 태그를 사용하면 지저분하게 `id`속성이나 `class`속성을 많이 사용할 필요가 줄어들게 됩니다. 물론 여전히 많은 곳에서 `id`속성과 `class`속성을 사용해야 할 겁니다. 요지는 레이아웃을 잡을 때에 사용할 필요가 사라진다는 것이죠.

이러한 시맨틱 태그는 HTML 5로 넘어오면서 생겨난 개념입니다. 웹 표준 상에서도 이러한 시맨틱 태그를 사용하는 것을 적극적으로 추천하고 있기도 합니다. 그렇기 때문에 시맨틱 태그는 사용하는 것이 좋은 것이고 되도록이면 시맨틱 태그의 활용도를 늘리는 게 중요합니다.

<Line />

앞으로 우리는 다양한 태그들을 배울 겁니다. 그 중에는 논 시맨틱 태그도 있고 시맨틱 태그도 있습니다. 어떤 태그를 어떤 상황에 사용해야 하는지는 앞으로 스스로 알게 될테니 걱정하지 않아도 됩니다.

이번 글은 간단하게 시맨틱 태그에 대해서 알아봤습니다. <Mark>시맨틱 태그를 사용하는 것은 웹 페이지에 도움을 주며 검색엔진에서 페이지가 검색될 가능성을 높여주기도 하기 때문에 사용하면 좋다는 점</Mark>을 다시 한 번 말씀 드립니다. 이번 글은 여기서 마치도록 하고 다음 글에서는 <Strong>주석</Strong>에 대해서 알아봅시다.


이번 글은 웹 개발을 위한 HTML 가이드 7편입니다. 이번 글에서는 시맨틱 태그에 대해 다룹니다. 태그의 이름은 아니고 태그의 분류 같은 겁니다. 지금까지 HTML이 발전하면서 다양한 태그가 생겨났습니다. 실질적인 의미와 기능이 일맥상통하는 태그가 있는가 하면 그렇지 않은 태그도 있습니다. 전자의 경우를 시맨틱 태그라고 하고 후자의 경우를 논 시맨틱 태그라고 합니다. 시맨틱은 영어 단어 Semantic 입니다. 이 단어는 의미론적인, 의미의 라는 의미를 갖고 있습니다. 시맨틱 태그는 의미를 가지는 태그들의 총칭입니다. 하지만 이번 글에서 그 리스트 하나 하나를 알아보는 건 아닙니다. 이것이 왜 중요하고 왜 시맨틱 태그를 사용해야 하는지에 대해서 다뤄보도록 할 겁니다.

웹 개발을 위한 HTML 가이드 7편 - 시맨틱 태그

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이 무엇인가**에 대해서 알았고 어떻게 생긴 것인지 알았고 **문법**을 알아봤습니다. **무엇을 할 수 있는지** 알았으며 **태그의 특성**에 대해서도 알아봤습니다. **개발환경**도 갖췄으니 이제는 정말로 **본격적인 코딩**을 시작할 순간입니다.

<P>이번 글에서 아주 간단한 페이지를 하나 만들어보는 것으로 우리는 <Mark>웹을 이루는 가장 <Strong>기본적인 구조</Strong>에 대해서 알아보는 용기 있는 발걸음</Mark>을 해보려고 합니다. 혹 아직 기초적인 지식이 없다면 이 가이드의 첫 글부터 보고 오시면 좋겠습니다. 그럼 웹 개발을 위한 HTML 가이드 6편 시작합니다.</P>

# 기본적인 구조
```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'>
  <p>크롬이나 웨일 브라우저 같은 최신식 브라우저들을 통해서 웹 페이지의 구성요소를 검사할 수 있는 기능을 사용하면 어떤 웹 페이지가 어떤 코드로 이루어져 있는지 알 수 있습니다. 크롬이나 웨일 브라우저를 기준으로 <Strong>F12</Strong>를 누르면 개발자 콘솔이 뜹니다.</p>
</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`태그의 안에 우리가 작성할 거의 모든 태그들이 들어갑니다. 화면에 보여야 하는 정보들은 전부 이 안에 들어간다고 보면 됩니다. 앞으로 배울 태그들은 거의 다 이 안에 들어갈겁니다.

# 파일 저장하기
<P>여기까지가 기본적인 구조에 해당되는 부분입니다. 여기까지 작성했으면 저장을 합시다. <Strong>다른 이름으로 저장</Strong>을 이용해서 파일 형식은 <Strong>모든 파일</Strong>로 설정하고, 파일 이름은 <Name>index.html</Name> 이라고 하겠습니다. 사실 아무거나 해도 됩니다. 인코딩은 <Strong>UTF-8</Strong>로 설정해두고 저장을 합시다.</P>

![저장은 이렇게 하면 된다.](https://drive.google.com/uc?export=view&id=1MSmz4cGQC5UtnFB6h-x2yA8p_BtKo6pg)

위의 설명과 이미지를 참고해서 저장을 하시면 되겠습니다. 저장을 하고나면, 실행을 해보세요!

![빈 창이 뜨면 정상이다.](https://drive.google.com/uc?export=view&id=1f83UAD9QoBOZvCWXO8HatZZSbQCDt3t2)

축하합니다! 이제 여러분은 웹 페이지를 만들 수 있습니다! 이것들이 웹 페이지의 가장 기본적인 정수입니다. 이 세상의 모든 웹 사이트들도 전부 이렇게 **HTML로 구성**되어있습니다.

**웹 표준**이나 **SEO**를 충족하기 위해선 더 많은 내용들이 들어가지만 지금은 몰라도 됩니다. 추후에 알게 될 내용들이기 때문이죠. 그런데도 지금 언급하는 이유는 이름이라도 언급해두면 그런게 있다 정도는 알 수 있기 때문입니다.

<Line />

자, 그렇다면 이제 다음 글로 넘어가도록 합시다. 물론, 이 부분이 잘 이해되지 않는다면 **여러 번 읽어보고 이해하고 넘어가는 게** 좋습니다. 이번 글에서 배운 내용은 앞으로 다시는 언급되지 않고 기본적으로 알고 있는 것으로 간주합니다. 웹 페이지를 만든다고 하면 이 기본적인 구조를 적용한 상태로 시작하는 겁니다.

<P>앞으로 배우는 거의 모든 태그들은 <Code>body</Code>태그의 안에 들어간다는 점 다시 한 번 기억하시면 되겠습니다. 그리고 오늘 만든 <Name>index.html</Name>파일은 우리의 프로젝트 폴더에 그대로 남겨두시면 됩니다. 앞으로 이 파일을 메인 프로젝트의 대문처럼 사용할 겁니다.</P>

그럼 이번 글은 여기서 마치도록 하겠습니다. 다음 글에서 봅시다.

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

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


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>하지만 코딩을 본격적으로 시작하기에 앞서 알고 넘어가야 할 것이 있습니다. 그게 무엇인가 하면 이번 글의 주제인 <Strong>개발환경</Strong>입니다. <Mark>개발환경은 개발자가 개발을 하기 위해 갖춰야 하는 기본적인 조건입니다.</Mark> 프로젝트들이 모여있는 폴더부터 시작해서 편집기까지 모두를 아울러 부르는 말이 개발환경입니다.</P>

바로 본론으로 넘어가보도록 합시다. 웹 개발을 위한 HTML 가이드 5편 시작합니다.

# 개발환경 구축하기
개발환경을 구축하기 전에 기본적으로 해야하는 설정들이 있습니다. 일단은 그 설정들을 먼저 살펴보도록 합시다. 그 후에는 우리가 개발을 할 때에 사용할 폴더를 만들겁니다. 마지막으로 메모장을 준비해주면 우리의 첫번째 개발환경은 완성된 겁니다.

왜 메모장을 사용하느냐에 대해서는 저는 이렇게 답합니다. 편한 것이 왜 편한지 알려면 불편함을 먼저 경험해야 합니다. 우리는 불편한 방식을 먼저 사용함으로써 편한 것이 왜 편한 것인지를 깨닫는 과정을 겪어볼 겁니다. 이건 중요한 것일 수도 있습니다.

최종적으로 사용할 편집기는 **VS Code**지만 메모장부터 건드려보도록 합시다. **VS Code**에 대한 이야기는 나중에 다른 글을 통해서 하게 될 것 같습니다.

## 개발을 위한 폴더설정
아, 이 블로그의 모든 글은 윈도우를 기반으로 설명합니다. 제가 맥을 다룰 수 없기 때문에 맥 관련으론 설명할 수 없는 점 양해 부탁드립니다. 우리가 우선적으로 해야 하는 설정은 파일의 확장자가 보이게끔 폴더 설정을 건드리는 겁니다.

![폴더 및 검색 옵션 변경을 클릭한다.](https://drive.google.com/uc?export=view&id=1NjHID_LQczRaiQ2dcjvDbjx7BYS-mkIm)

윈도우 탐색기를 열어봅시다. 상단의 메뉴바에서 파일을 클릭하고 **폴더 및 검색 옵션 변경**을 클릭합니다.

![보기 탭을 클릭한다.](https://drive.google.com/uc?export=view&id=12ZY-B1duURh3aQJIOtZhtm2blPxDyHjW)

![스크롤을 내려서 숨김 파일 폴더 및 드라이브 표시를 체크하고, 알려진 파일 형식의 파일 확장명 숨기기의 체크를 해제한다.](https://drive.google.com/uc?export=view&id=10Ee5C4agtsUCuXkVsMHKhZjwacypsFaS)

그 다음에는 **보기** 탭을 클릭하고 스크롤을 내려봅시다. 그리고 이미지에서처럼 **숨김 파일 폴더 및 드라이브 표시**를 체크하고, **알려진 파일 형식의 파일 확장명 숨기기**의 체크를 해제합니다. 이렇게 하면 숨겨진 파일들은 투명하게 보이게 되고, 파일의 확장자들도 보이게 됩니다. 이렇게 하면 기본적인 폴더 설정은 끝난겁니다.

이 부분은 개인의 기호에 따라 다르긴 하지만 코드를 작성하는 개발자들은 파일의 확장자가 보이는 게 더 편할겁니다.

## 개발폴더 만들기
이제는 개발폴더를 만들어야겠습니다. 원하는 경로에 폴더 하나를 만듭니다. **웬만하면 경로에 한글이 없는 것이 개발할 때에 정신건강에 좋습니다.** 폴더의 경로에 한글이 들어가면 혹시라도 오류가 날 수 있기 때문에 영어만 있는 경로를 추천합니다.

우리가 만든 이 폴더는 우리의 전용 개발폴더가 될 겁니다. 이 안에 우리의 다양한 프로젝트를 넣어두면 되는 것이죠. 앞으로도 사용할 폴더이기 때문에 잘 기억해두도록 합시다. 저같은 경우는 아래와 같은 식으로 분류를 해두고 프로젝트들을 관리하고 있습니다.

![개발폴더는 자유롭게 관리하면 된다.](https://drive.google.com/uc?export=view&id=1uWoZB7EcFsGHnq-0fEXruCUIHcg9BNyK)

우리가 만든 폴더는 컨테이너 같은 겁니다. 이 폴더의 안에 각각의 프로젝트 폴더가 생기겠죠. 저는 WebTuto라는 이름의 폴더를 이번 HTML 가이드의 폴더로 결정했습니다. 여러분은 원하는 이름으로 아무거나 만들어주시면 됩니다. 단, 위에서 말한 것처럼 한글은 배제하고 폴더 이름을 정하는 것이 좋습니다.

## 메모장을 사용할 때의 주의사항
오래 사용할 것은 아니지만 적어도 파일 하나 정도는 메모장으로 만들어볼 겁니다. 이번 글에서는 쓰지 않지만요. 지금은 간단하게 메모장으로 파일을 저장할 때에 주의 사항에 대해서 이야기할까 합니다.

메모장은 txt 파일을 관리하는 것에 특화되어있기 때문에 저장을 하면 기본적으로 txt 파일로 저장이 됩니다. 우리가 만들 파일은 html 파일이기 때문에 파일 형식은 모든 파일로 설정합니다. 인코딩은 중요한데 **UTF-8**로 설정하면 됩니다.

HTML 파일의 확장자는 html입니다. CSS나 자바스크립트도 메모장으로 코딩할 수 있습니다. 아무튼 아직은 파일을 만들 것은 아니지만 아래의 이미지처럼 설정해두고 저장하면 되겠습니다.

![인코딩과 파일 형식 설정하기.](https://drive.google.com/uc?export=view&id=1dM86G-OkHSTSWKTzvuXTiKZ0YZRk0F4S)

<Line />

<P>이번 글에서는 개발환경에 대해서 알아봤습니다. 다시 개발환경에 대해 설명하자면 <Mark>파일을 모아놓는 폴더부터 시작해서 편집기까지 모두를 아울러 부르는 말입니다.</Mark> 어떤 프로그래밍 언어를 배우더라도 개발환경은 갖추고 시작합니다. HTML은 개발환경 갖추기가 아주 간단한 편에 속한다는 것만 알아두면 좋겠습니다.</P>

처음에는 메모장을 사용하다가 다른 편집기를 사용할건데 다른 설정은 그대로 두면 되고 편집기만 바꾸면 됩니다. 그럼 개발폴더도 만들었고 메모장도 준비했으니 코딩을 할 준비가 확실히 되었습니다. 그럼 다음 글에서는 **HTML의 기본적인 구조**에 대해서 알아보도록 합시다.


우리는 저번 글들을 통해서 HTML에 대해 알게되었고 문법을 알아보았습니다. 태그라는 것은 무엇이며 태그의 특징은 무엇이고, 태그끼리의 관계는 또 어떤지도 알아봤습니다. 기본적인 사전 지식은 다 알아본 셈이고, 이게부터는 코딩을 본격적으로 시작해야 할 때가 왔죠. 하지만 코딩을 본격적으로 시작하기에 앞서 알고 넘어가야 할 것이 있습니다. 그게 무엇인가 하면 이번 글의 주제인 개발환경입니다. 개발환경은 개발자가 개발을 하기 위해 갖춰야 하는 기본적인 조건입니다. 프로젝트들이 모여있는 폴더부터 시작해서 편집기까지 모두를 아울러 부르는 말이 개발환경입니다.

웹 개발을 위한 HTML 가이드 5편 - 개발환경 구축하기


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 가이드 4편입니다. 저번 글에서는 태그의 특징에 대해서 알아봤습니다. 정확히는 태그의 특징에 따른 두가지의 종류에 대해 알아봤죠. 이번 글에서는 태그들의 관계에 대해서 알아보도록 합시다.

HTML 문서에서 태그들은 하나만 쓰이지는 않습니다. 여러개의 태그가 사용됩니다. 태그의 안에 태그가 들어가고 그 안에 태그가 들어가기도 합니다. 그렇기 때문에 HTML의 태그들은 부모 자식 관계가 존재하고, 자손, 혹은 형제 관계가 존재합니다. 이번 글에서는 이런 것들을 알아볼 예정입니다.

알아볼 내용이 많지는 않습니다. 중요한 것이니 이해하고 넘어가도록 하는 것이 좋습니다. 또한 CSS나 자바스크립트에서도 이러한 관계를 이해하고 있어야지만 진행이 가능하기 때문에 반드시 이해하고 넘어갑시다.

<P>일단 우리는 아직 어떤 태그들이 존재하는지 알지 못합니다. 따라서 이번 글에서 언급되는 태그들이 무엇인지는 지금은 몰라도 됩니다. 추후에 알게 될 내용들이니까 <Bold>태그들의 관계에 대해서만 집중</Bold>을 하시면 되겠습니다.</P>

# 부모 태그와 자식 태그
```html
<div>
  부모
  <p>자식</p>
</div>
```

가장 먼저 알아볼 것은 <Bold>부모 태그와 자식 태그</Bold>입니다. 위의 코드에는 두가지의 태그가 있습니다. `div`태그가 있고 그 안에 `p`태그가 있죠. <Mark>어떠한 태그의 안에 다른 어떠한 태그가 들어가 있는 경우를 부모 태그와 자식 태그라고 부릅니다.</Mark> 바깥에 있는 태그가 부모 태그이고 안에 있는 태그가 자식 태그입니다.

위의 코드에서 부모 태그는 `div`태그인 것이고 자식 태그는 `p`태그인 것이죠. 부모 태그는 **parent Element**라고 하고 자식 태그는 **child Element**라고 부릅니다. 태그는 엘리먼트라고 부르기도 한다고 했었죠.

쉽게 말해서 부모 태그와 자식 태그는 한 단계 위 아래 관계일 때를 말하는 것이라고 생각하면 됩니다. 부모 태그가 한 단계 위에 있는 태그이고 자식 태그가 한 단계 아래에 있는 태그겠죠. 단계로 구분하면 간단하겠네요!

<Message color='g'>
  <p>자식 태그로 사용되는 태그들은 들여쓰기를 하는 것이 보통입니다. 가독성이 좋아지기도 하고 구분도 쉬워지기 때문에 들여쓰기는 빼놓지 않고 하도록 합시다.</p>
</Message>

## 자손 태그와 조상 태그
```html
<div>
  <p>
    <a href="#">링크</a>
  </p>
</div>
```

그럼 두 단계 이상 차이나는 경우는 어떨까요? 위의 코드처럼 세개의 태그가 사용되었고 자식 태그의 안에 또 자식 태그가 있다면 말이죠. `div`태그의 입장에서 `a`태그는 무엇일까요? 정답은 **자손 태그**입니다. 영어로 **Descendant**라고 합니다. `a`태그 입장에서는 `div`태그가 **조상 태그**겠죠.

자식 태그와 자손 태그는 비슷하기 때문에 많이들 착각하는 부분입니다. 이럴 때에는 간단하게 한 단계 차이가 나면 부모 자식 관계이고 두 단계 이상 차이가 나면 조상, 자손 태그라고 생각하면 되겠습니다. <Mark>CSS에서도 자식 태그와 자손 태그를 구분하기 때문에 알아둬야 합니다.</Mark>

# 형제 태그
```html
<div>아이유</div>
<div>아이유 동생</div>
```

위 코드처럼 같은 단계에 있는 태그들은 **형제 태그**라고 부릅니다. 영어로는 **Sibling**이라고 합니다. 형제 중 하나에게 자식이 있든 자손이 있든 상관 없습니다. <Mark>같은 부모 태그 한 단계 아래에 있다면 전부 형제 태그입니다.</Mark>

<Line />

여기까지 부모 태그와 자식 태그, 형제 태그 그리고 자손에 대해서 알아보았습니다. 이해가 잘 안될 수도 있습니다. 충분히 그럴 수 있거든요. 이해가 잘 안되는 부분은 여러번 읽어보면 이해가 될 겁니다. 이번 글로 알 수 있는 내용은 첫째로 태그들은 단계에 따라서 호칭이 존재한다는 것이 있죠. 둘째로 자식 태그들은 들여쓰기를 한다는 점이 있습니다.

HTML의 문법도 알게 되었고 태그의 특징도 알게 되었고 태그들간의 관계에 대해서도 알게 되었습니다. 이제 정말 기본적인 사전 지식은 전부 알게 되었습니다. 이제부터 우리는 본격적으로 HTML을 시작해볼 겁니다. 다음 글에서는 **개발환경을 갖추는 것**을 진행해보도록 합시다.

다음 글을 보기 전에 이번 글의 내용을 여러번 복습하고 되새겨보는 시간을 가지면 좋을 것 같습니다.


이번 글은 웹 개발을 위한 HTML 가이드 4편입니다. 저번 글에서는 태그의 특징에 대해서 알아봤습니다. 정확히는 태그의 특징에 따른 두가지의 종류에 대해 알아봤죠. 이번 글에서는 태그들의 관계에 대해서 알아보도록 합시다. HTML 문서에서 태그들은 하나만 쓰이지는 않습니다. 여러개의 태그가 사용됩니다. 태그의 안에 태그가 들어가고 그 안에 태그가 들어가기도 합니다. 그렇기 때문에 HTML의 태그들은 부모 자식 관계가 존재하고, 자손, 혹은 형제 관계가 존재합니다. 이번 글에서는 이런 것들을 알아볼 예정입니다. 알아볼 내용이 많지는 않습니다. 중요한 것이니 이해하고 넘어가도록 하는 것이 좋습니다. 또한 CSS나 자바스크립트에서도 이러한 관계를 이해하고 있어야지만 진행이 가능하기 때문에 반드시 이해하고 넘어갑시다.

웹 개발을 위한 HTML 가이드 4편 - 태그와 태그의 관계


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 />

<P>웹 개발을 위한 HTML 가이드 3편 시작합니다. 이번 글의 주제는 <Strong>태그의 유형</Strong>에 대한 이야기입니다. 태그의 특징이라고도 할 수 있겠습니다. <Mark>HTML에서 태그는 크게 두가지의 유형으로 나뉘게 됩니다.</Mark> 어떤 유형인가 하면 태그의 성질을 말하는 것이라고 보면 됩니다. 모든 태그들은 후술할 두가지의 유형 중에서 반드시 한가지의 유형으로 분류됩니다.</P>

그 유형들이 무엇인가 하면! <Mark>**블럭 태그**와 **인라인 태그** 혹은 **블럭 요소**와 **인라인 요소**라고 부릅니다.</Mark> 이번 글에서 다루는 블럭 태그와 인라인 태그는 태그의 이름이 아니라 성질, 특징, 유형이며 이걸 잘 파악하고 있어야지만 태그들을 적재적소에 잘 활용할 수 있습니다.

중요한 것이지만 그렇게 어려운 개념은 아닙니다. 그러니 혹시라도 벌써부터 어려워서 못따라가면 어떡할까 같은 생각은 접어두셔도 됩니다! 혹 이해가 가지 않는다고 해도 여러번 보다보면 이해가 될 겁니다. 그럼 이번 글도 저와 함께 달려 봅시다.

# 블럭 태그(블럭 요소)
블럭 태그, 정확히는 블럭 레벨 태그는 영어권에선 **Block-level Elements**라고 표현합니다. 이 가이드에서는 편하게 줄여서 블럭 태그라고 하겠습니다. 이 <Mark>블럭 태그의 특징은 브라우저 화면의 가로 너비 전체를 차지한다는 것</Mark>에 있습니다.

겉보기에 따라서는 줄바꿈이 된다고도 이해할 수 있습니다. 대표적인 블럭 태그들은 `div`태그와 `p`태그가 있습니다. 아래의 코드와 이미지처럼 나타나게 됩니다. 이 두가지 태그가 뭔지 지금은 몰라도 됩니다. 어떤 일이 일어날지만 지켜보시면 되겠습니다.

<Message color='b'>
  <p>여러분들에게 블럭 태그와 인라인 태그가 대체 어떤 차이가 있는지 명확하게 전달하기 위해서 디자인을 입혔음을 알립니다.</p>
</Message>

```html
<div>IU - Blueming</div><div>IU - LILAC</div>
```

![블럭 태그는 줄바꿈이 된다.](https://drive.google.com/uc?export=view&id=1gNCCpxupi7n4eN7L2A2v1_r-oov6xaeE)

이런 모양이 나타나게 됩니다. 위에서 아래로 쌓이는 것을 볼 수 있습니다.

처음부터 이렇게 말하면 이해가 안되겠죠. 이렇게 생각을 해볼까요? 위의 블럭 태그의 예시 코드는 `div`태그를 두개를 이어서 적었습니다. 보통 이렇게 하면 <Bold>이어서 나올 것</Bold>이라고 생각을 합니다. 하지만 이어서 나오지 않았죠. 디자인을 배제하고 한 번 볼까요?

![블럭 태그는 내용과 상관 없이 가로 너비 전체를 차지한다.](https://drive.google.com/uc?export=view&id=10eo5JtxzMU2axmpIZRuwOz36rVLdwI8E)

이렇게 나타납니다. 즉 HTML에서는 에디터에서 줄바꿈을 한다고 브라우저에서도 적용되는 게 아니라 태그들의 특성에 따라서 결정이 된다고 이해하시면 됩니다.

# 인라인 태그(인라인 요소)
영어권에서는 **Inline Elements**라고 부르는 인라인 태그들은 브라우저의 가로 너비 전체를 차지하는 것이 아니라 자신들만의 영역을 차지하는 태그들입니다. <Mark>줄바꿈이 되지 않고 계에에속 옆으로 나열된다</Mark>고 보시면 됩니다.

인라인 태그 유형인 태그들은 `a`태그 `span`태그 등등이 있습니다.

```html
<span>IU - Blueming</span>
<span>IU - LILAC</span>
```

이번에는 어떻게 나올지 한 번 봅시다. 에디터 상에서 엔터를 통해서 줄바꿈을 했습니다. 결과는 어떨까요?

![인라인 태그는 줄바꿈을 하지 않는다.](https://drive.google.com/uc?export=view&id=1zsMAZ2sC21TxDoOJNcLoyVJ3K3lzR9jd)

이렇게 나타납니다. 줄바꿈이 되지 않았죠? 이어서 적지 않았는데도 이어서 나타나게 됩니다. 이게 바로 인라인 태그의 특성입니다. 즉, <Mark>인라인 태그들은 자신들의 실질적인 내용물에 따른 면적을 차지한다는 것</Mark>입니다.

또 한가지의 특징이 있는데 <Strong>인라인 태그의 안에는 블럭 태그가 들어갈 수 없다</Strong>는 점입니다. 이 말이 어떤 의미인지는 지금 모를겁니다. 하지만 추후에 이해하게 될테니 걱정은 하지 않으셔도 됩니다. 중요한 것은 인라인 태그의 안에는 블럭 태그가 들어가지 않는다. 라는 것입니다.

---

태그의 유형이자 특징인 블럭 태그와 인라인 태그에 대해 알아봤습니다. 기억해야 할 것은 두가지 정도입니다. <Mark>블럭 태그는 위에서 아래로</Mark> 나열한다. <Mark>인라인 태그는 왼쪽에서 오른쪽으로</Mark> 나열한다. 라는 것 말입니다. 또한 <Mark>블럭 태그는 내용과 상관 없이 가로 너비 전체를 차지한다는 것</Mark>과 <Mark>인라인 태그는 내용에 따라 너비를 가진다는 것.</Mark> 이것을 이해했다면 이번 글의 목표는 달성입니다.

이번 가이드에서 다룬 내용은 중요한 내용입니다. 이러한 특성을 모르고 레이아웃을 건드리게 되면 상당히 애를 먹을 것이기 때문이죠. 그러니 여러분들은 애를 먹을 가능성이 조오오금은 줄어들었다고 보시면 됩니다!

물론 앞으로 CSS를 익히게 되면 블럭 태그은 인라인 태그든 다 같은 형태로 조정할 수 있게 됩니다. 하지만 인라인 태그와 블럭 태그로 굳이 나뉘어진 이유는 존재합니다. 인위적으로 태그들의 특성을 바꾸기보다 주어진대로 사용하는 것이 더 좋을 수도 있습니다.

이번 가이드는 여기까지 입니다. 다음 가이드에서는 여러가지의 태그를 사용해야만 하는 HTML에서 <Strong>태그 간의 관계</Strong>에 대해 다뤄보도록 하겠습니다.


웹 개발을 위한 HTML 가이드 3편 시작합니다. 이번 글의 주제는 태그의 유형에 대한 이야기입니다. 태그의 특징이라고도 할 수 있겠습니다. HTML에서 태그는 크게 두가지의 유형으로 나뉘게 됩니다. 어떤 유형인가 하면 태그의 성질을 말하는 것이라고 보면 됩니다. 모든 태그들은 후술할 두가지의 유형 중에서 반드시 한가지의 유형으로 분류됩니다. 그 유형들이 무엇인가 하면! 블럭 태그와 인라인 태그 혹은 블럭 요소와 인라인 요소라고 부릅니다.

웹 개발을 위한 HTML 가이드 3편 - 태그의 유형

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 가이드 2편 시작하겠습니다. 저번 글에서 HTML에는 **태그**라는 요소가 있다고 언급했습니다. 영어로는 **Tag**라고 합니다. 이 태그라고 하는 것은 사람을 구성하는 작은 단위가 세포인 것처럼 HTML을 구성하는 단위는 태그입니다. 쉽게 말해 HTML은 이 태그로 이루어져 있다고 볼 수 있는 것이죠. 이번 글에서는 이 태그의 기본적인 문법에 대해서 알아보도록 하겠습니다.

# 기본적인 문법
하나의 태그는 **여는 태그**와 **닫는 태그**로 이루어집니다. 이 두가지는 보통의 경우 항상 세트입니다. 당연히 예외의 경우도 있습니다! 그 예외의 경우는 조금 후에 알아보도록 하고, 일단은 아래의 태그에서 여는 태그와 닫는 태그를 살펴보도록 합시다.

```html
<div>Hello World!!</div>
```

그 전에, 태그 하나 하나를 부를 때에는 무슨 무슨 태그라고 하기도 하지만 영어권에선 <Strong>요소(Element)</Strong>라고 부릅니다. 위의 코드를 보자면 우리나라 같은 곳에선 **div 태그**라고 부르지만 영어권에선 **div 요소**, **div 엘리먼트**라고 부를 수 있다는 것이죠.

## 여는 태그
위의 코드에서 여는 태그는 `<div>` 부분 입니다. 브라우저는 HTML 코드를 위에서 아래로 읽어들이면서 태그를 발견할 때에 여는 태그부터 찾습니다. 그리고 닫는 태그를 만날 때까지 해당 요소를 그려냅니다. 렌더링을 한다는 것이죠. 여는 태그는 영어로 **Opening Tag**라고 부릅니다.

## 닫는 태그
닫는 태그는 `</div>` 부분 입니다. 여는 태그와 다른 점은 슬래시가 있죠? 이게 닫는다는 의미입니다. 여는 태그 다음에 닫는 태그가 오면 해당 요소가 끝났다는 것을 감지하고 그리는 것을 멈춘다. 닫는 태그는 영어로 **Closing Tag**라고 부릅니다.

## 태그의 내용
여는 태그와 닫는 태그가 있으면 그 사이에는 태그의 내용물이 들어가게 됩니다. 위의 코드에 있는 `div` 라는 태그는 공간을 할당하는 태그입니다. 지금은 몰라도 됩니다. 아무튼 그 안에 <Bold>Hello world!!</Bold>라는 문장을 적어 넣었습니다. 브라우저는 자연스럽게 `div`태그의 안에 내용물을 반영해서 화면을 그려줍니다.

## 혼자서 닫는 태그
**혼자서 닫는 태그**도 있습니다. 여는 태그와 닫는 태그의 기능을 하나로 끝내는 태그들입니다. 혼자서 닫는 태그들은 내용물이 들어갈 필요가 없을 때에 적용되는 이야기 입니다. 일반적으로는 닫는 태그가 없다면 혼자서 닫는 태그라고 생각하시면 됩니다.

```html
<img src="" alt="" />
```

위의 태그는 `img`태그입니다. 화면에 이미지를 그려주는 태그입니다. 나중에 배울 거니까 지금 몰라도 됩니다. 그냥 이런 게 있구나 라고만 생각해두시면 됩니다.

딱 봐도 `img`태그를 보면 위에서 본 `div`태그와는 다른 모습을 하고 있죠. 닫는 태그가 없고 여는 태그만 있는 것 같은데 오른쪽 꺽쇄의 앞에 <Bold>/(슬래시)</Bold>가 위치하고 있죠. 혼자서 닫겠다는 의미입니다. 결과적으로 `<이름 />` 형태가 됩니다. 혼자서 닫는 태그는 `input`태그 혹은 `meta`태그 같은 종류가 있습니다.

일반적인 HTML 문서에서는 혼자서 닫는 태그는 없어도 아무런 문제를 만들지 않지만, 혼자서 닫는 태그들은 **슬래시를 넣어주는 습관을 먼저 들여주는 것**이 좋습니다. 나중에 웹 개발을 본격적으로 할 때에 **리액트**나 **뷰**와 같은 자바스크립트 라이브러리, 프레임워크를 사용할 때에 편할 겁니다.

## 태그의 속성
태그에는 <Strong>속성(Attribute)</Strong>이라는 것도 있습니다. 속성들은 태그에 특정 기능을 추가하거나 어떤 특징을 갖게 해줍니다. 이는 태그에 따라, 속성에 따라 다르게 나타나게 됩니다.

```html
<html lang="ko">
  
</html>
```

속성은 `이름="값"`의 형태로 이루어져 있습니다. 태그의 이름과 한 칸을 띄어줘야 합니다. 그렇지 않으면 오류가 납니다. 속성들은 다양하고, 정해져 있습니다. 그렇기 때문에 적재적소에 잘 활용해야 웹 사이트의 뼈대를 효과적으로 구축할 수 있습니다.

속성은 다른 속성과 함께 사용할 수 있습니다. 이 역시 띄어쓰기로 구분합니다. 개발자가 임의로 만들 수 있는 커스텀 속성도 있습니다. 하지만 그것들은 훗날에 알아보기로 합시다. 속성 중에는 id 속성, class 속성, style 속성 등등의 모든 태그가 사용할 수 있는 공통적인 속성이 존재합니다. 이것들에 대해서는 나중에 따로 정리해서 다루도록 하겠습니다.

웹 개발을 위한 HTML 가이드 2편 시작하겠습니다. 저번 글에서 HTML에는 태그라는 요소가 있다고 언급했습니다. 영어로는 Tag라고 합니다. 이 태그라고 하는 것은 사람을 구성하는 작은 단위가 세포인 것처럼 HTML을 구성하는 단위는 태그입니다. 쉽게 말해 HTML은 이 태그로 이루어져 있다고 볼 수 있는 것이죠. 이번 글에서는 이 태그의 기본적인 문법에 대해서 알아보도록 하겠습니다.

웹 개발을 위한 HTML 가이드 2편 - 기본적인 문법


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**. 하나는 **CSS**. 하나는 **자바스크립트**입니다. 이 중에서 CSS나 자바스크립트는 없어도 됩니다. 하지만 HTML은 반드시 필요합니다.

웹 개발을 하고 있는 현역 개발자들도, 웹 개발을 하기 위해 뛰어드는 초보들이나 웹 퍼블리셔, 웹 디자이너들도 모두가 다 HTML을 기본적으로 알아야 합니다. HTML이란 **Hyper Text Mark-up Language**의 약자로 마크업 언어를 말합니다. 마크업 언어는 웹의 뼈대를 구성하는 언어라고 이해하면 되겠습니다. 위에서 이미 언급했듯이 HTML은 웹을 구성하는 세가지 요소중 가장 중요한 요소입니다.

웹의 뼈대를 구성한다는 것은 쉽게 말해서 화면에 기본적인 골자를 출력해준다는 것입니다. 우리는 이를 웹에 그려지다. 렌더링 되다. 라고 표현합니다. 한편, HTML을 배운다고 해서 웹 개발을 할 수 있게 되는 건 아닙니다. CSS도 알아야 하고 자바스크립트도 다룰 줄 알아야 비로소 웹 개발에 진입할 수 있게 됩니다. 훗날의 이야기니까 일단은 접어두고 간직해둡시다.

# HTML의 역사
1990년 2월 20일에 본격적으로 보급화되는 버전 1을 시작으로 세상에 모습을 드러낸 HTML은 **팀 버너스리** 라는 사람에 의해 만들어졌습니다. 팀 버너스리는 HTML과 함께 **URL**이라는 개념도 처음 만들어냈고 **HTTP**나 **WWW**도 함께 만들어냈습니다. 때문에 그는 인터넷의 아버지라고 불리기도 합니다. 처음 등장한 HTML에는 별다른 기능은 없었습니다. 디자인을 입혔던 것도 아니고 현재의 자바스크립트가 있었던 것도 아니기에 초라함 그 자체였습니다.

<P>시간이 흘러 HTML은 발전했습니다. 이제는 디자인을 담당하는 CSS도 있고 동적인 움직임이나 데이터를 다룰 수 있는 자바스크립트도 존재하기 때문에 많은 것을 할 수 있게 되었습니다. HTML의 역사를 너무 깊게 알아볼 수는 없고 많은 변화를 거쳐왔고 지금도 변화중인 언어라는 것만 이해하면 됩니다. 혹시 조금이라도 더 알고 싶다면 <A type='blog' href='/post/2021-05-02-02-complete-programming-knowledge'>프로그래밍 공부를 시작하기 전에</A> 글을 읽어보는 것을 추천 드립니다.</P>

지금까지 HTML은 발전하면서 HTML5까지 만들어졌습니다. 현재 우리가 사용하고 배우려고 하는 버전은 5입니다. **HTML5**라고 부릅니다.

# 배우기 쉬운 언어
HTML은 매우 직관적이기 때문에 상당히 배우기 쉽다고 할 수 있습니다. 조금만 배워도 몇글자 안되는 코드로 인터넷의 구석 구석을 이루어 낼 수 있죠. 물론 HTML에도 심층적인 지식들이 존재하고 이 경우는 쉽게 이해하기 어려우며 알고 싶다면 확실하게 공부를 해야만 합니다. 우리가 웹 개발을 한다면 결국 알아야 하는 부분이지만 지금은 몰라도 됩니다. 이는 어디까지나 심층적인 부분에 대한 이야기이고 그저 웹 사이트의 구조를 만들어낼 수 있는 수준은 누구나 간단하게 가능합니다.

그렇기 때문에 겁낼 필요는 없습니다. 흔히들 보는 프로그래밍 하면 떠오르는 그런 복잡한 것들과는 다릅니다. 마음을 편하게 먹고 천천히 배워가면 됩니다. HTML 자체는 워드나 한글 문서를 특별한 문법으로 작성한다고 생각하면 조금 더 이해가 쉬울지도 모릅니다.

# 무엇을 할 수 있는가?
HTML로 무엇을 할 수 있는 것일까요? 우리는 무엇을 위해 이 언어를 배우려고 하는 것일까요. 답은 하나입니다. **웹을 구성하는 방법을 알기 위해**서 이 HTML이라는 언어를 배우는 것이죠. 하지만 이건 말로는 이해할 수 없는 부분입니다. 실습을 통해서 알아가봅시다.

# 확장자와 기본적인 모습
HTML의 확장자는 **.html** 혹은 **.htm**이며 간단하게 생긴 구조이기 때문에 문법 자체에 대해서는 어렵지 않게 공부할 수 있습니다. 빠르면 배운지 하루만에 원하는 형태의 웹사이트의 뼈대를 만들 수 있을지도 모릅니다. 그만큼 진입장벽이 낮습니다. 그렇다면 얼마나 간단하게 생겼는지 확인해 봐야겠죠. HTML의 기본적인 문법은 아래와 같습니다.

```html
<p id="id">Hello World!!</p>
```

위의 코드는 브라우저에서 아래와 같이 해석되고 그려집니다. 그려진다는 것은 그냥 화면에 띄워지는 것이라는 것은 이미 언급했습니다. 아무튼 브라우저는 HTML을 해석해서 그려주게 됩니다. 이 때에 초기 디자인은 브라우저마다 다릅니다. 어떤 브라우저를 사용하느냐에 따라서 아래의 이미지와 다를 수 있다는 점을 미리 말해두도록 하겠습니다.

![브라우저는 HTML을 해석해서 화면에 그려준다.](https://drive.google.com/uc?export=view&id=178T7PcaxjmuQDWvmEP72xbUZF1DkeISx)

HTML에는 태그라는 것이 있습니다. 일반적인 경우라면 `<`와 `>`로 시작해서 `</`와 `>`로 끝납니다. 물론 예외도 있습니다. 이건 문법적인 영역이니까 다음에 알아보도록 합시다. HTML은 저렇게 생긴 태그들의 조합으로 만들어집니다. 위는 맛보기에 불과하고 더 많은 종류의 태그가 있습니다. 그리고 그걸 자유롭게 사용할 수 있어야 합니다. 그래야 웹 디자인이든 퍼블리싱이든 할 수 있거든요. 사용하다보면 손에 익게 되니까 걱정은 하지 않아도 됩니다.

이번 글에서는 간단하게 HTML의 개요에 대해서 다뤄봤습니다. 다음 문서에서는 문법에 대해 좀 더 알아보기로 합시다. 이번 글은 여기까지 입니다. 다음 가이드를 통해서 찾아오도록 하겠습니다.


웹에 있어서 HTML이라는 언어는 아주 상당히 매우 중요한 언어입니다. 웹을 이루고 있는 것들 중에서 없어서는 안되는 요소이기도 합니다. 웹을 이루고 있는 것은 세가지입니다. 하나는 HTML. 하나는 CSS. 하나는 자바스크립트입니다. 이 중에서 CSS나 자바스크립트는 없어도 됩니다. 하지만 HTML은 반드시 필요합니다.

웹 개발을 위한 HTML 가이드 1편 - HTML이란?


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, ProgrammingGuideMessage
} from '@/components/Post';

<ProgrammingGuideMessage />

이번 글은 **개발을 위한 프로그래밍 지식 시리즈 제 6편**입니다. 마지막 글입니다. 우리는 지금까지 컴퓨터의 역사를 알아봤고 프로그래밍 언어의 흐름을 알아봤고 인터넷의 등장과 웹의 흐름을 알아봤습니다. 전문적인 지식은 아니더라도 대강이나마 살펴봤죠. 이제 우리는 **웹 프로그래밍**에 대해 파고들 시간입니다.

어차피 우리는 초보고 견문이 별로 없는 문외한들입니다. 실력이 있다면 이런 글을 보고 있지 않겠죠 아마도. 아무튼, 우리의 수준은 다 비슷비슷합니다. 높지는 않죠. 우리가 **웹 프로그래밍을 공부하기 위해서는 웹 프로그래밍이 무엇인가 정도는 알아야**겠죠. 그리고 그 안에서 어떠한 개념들이 있는지는 알고 넘어가야 비로소 배울 준비가 되었다라고 할 수 있을 겁니다.

그래서 마지막 글인 이번 글의 주제는 웹 프로그래밍입니다.

# 웹 프로그래밍
웹 프로그래밍이라는 개념이 등장한 것은 사실 그렇게 오랜 과거는 아닙니다. 웹을 프로그램의 일종이라고 보게 된 것은 얼마 안됐기 때문이죠. 웹 프로그래밍 자체는 웹 사이트를 프로그래밍하는 것을 말합니다. **웹 사이트는 단순 문서일 뿐이다**라는 관점이 대다수였던 과거와는 달리 **웹도 이제는 프로그래밍적인 접근이 가능해졌다**라는 관점이 나타났고 이에 따라 웹 프로그래머라는 직종이 나타나기 시작했고, 그들이 하는 게 바로 웹 프로그래밍입니다.

![트위터의 모습이다. 트위터 또한 웹 애플리케이션이다.](https://drive.google.com/uc?export=view&id=113f5jyD_d2shNlBjzS_5ZcsW388eLuvJ)

![우리가 흔히 보는 유튜브의 모습. 유튜브는 웹 애플리케이션이라고 할 수 있다.](https://drive.google.com/uc?export=view&id=13XmNoV7fwl2MIhU5-44NAnURGosp-8Nk)

**트위터**나 **페이스북**, **유튜브**처럼 사용자와 웹이 상호작용을 할 수 있는 서비스를 제공하는 웹 사이트들은 단순한 문서가 아니라 웹 프로그램 혹은 웹 애플리케이션이라고 부를 만한 수준의 사이트라고 할 수 있는 겁니다. 이 블로그 같은 경우를 생각해보면 이 블로그는 그냥 읽는 것만 가능하죠. 웹 프로그래밍을 통해서 만든 블로그이긴 하지만 결과물은 웹 프로그램이라고는 할 수 없죠. 이런 경우도 있습니다.

웹의 세계는 계속해서 변하고 있습니다. 위의 개념도 사실은 **확실하게 구분된 것은 아닙니다.** 앞으로 좀 더 다양한 웹 기술들이 나타날 것이고, 점점 그 경계가 깨지고 있다는 것은 확실한 것이죠.

<P>그러니까 웹 프로그래밍이라는 것은 단순히 웹 디자인<NoteTop number='1' />이나 웹 퍼블리싱<NoteTop number='2' />을 넘어서 웹과 사용자의 상호작용이 가능한 인터랙티브한 프로그램을 구현하는 것이라고 할 수 있는 것입니다. 물론 언제나 그렇지는 않고 보통은 서비스를 개발하는 것을 목적으로 합니다.</P>

처음에는 그냥 자바스크립트만으로 프로그래밍을 했지만 **Node.js**가 빛을 발하기 시작하면서 다양한 자바스크립트를 이용한 **라이브러리, 프레임워크**들이 나타나기 시작했습니다. **타입스크립트(TypeScript)**도 Node.js의 패키지 매니저 시스템을 이용한 **자바스크립트의 슈퍼셋 언어**입니다. 이런 것들로 인해서 자바스크립트는 상당히 강해졌다는 것이죠.

심지어는 웹 프로그래밍 뿐만 아니라 **데스크탑 프로그램**까지도 만들어낼 수 있습니다. **일렉트론(Electron)**이라는 것을 이용하면 말이죠. **리액트 네이티브(React Native)**나 **플러터(Flutter)**를 이용하면 **스마트폰 애플리케이션**도 만들 수 있습니다. 당연하게도 **게임**도 가능하긴 한데.. 이 부분은 그닥 추천되는 부분은 아닌 듯합니다.

이렇게 말을 해도 초심자인 우리는 잘 이해가 가지 않겠죠. 어쩔 수 없습니다. 우리가 이제 곧 웹을 만들고, 발전시키는 과정을 스스로 체험할 것이지만 프로그래밍의 영역에 발을 들이는 것은 **자바스크립트를 만나고 난 다음부터**일 것이고 그 뒤에 알아도 이상하지 않습니다. 그렇기 때문에 이해가 가지 않는다고 의기소침하거나 의욕을 잃을 필요는 전혀 없다는 겁니다. 처음인데 모르는 것은 그냥 **당연**합니다. 처음인데 익숙하면 그게 이상하죠.

# 웹 프로그래밍의 종류
30년도 안된 짧은 기간동안 웹 프로그래밍은 크게 발전을 해왔고 세가지의 부류로 나뉩니다.

## 프론트 엔드(Front-End)
하나는 **프론트 엔드(Front-End)**입니다. 화면에 보이는 부분을 프로그래밍하는 부류입니다. 단순히 레이아웃을 만들고 디자인을 입혀 결과물을 내는 것과는 다릅니다. 프로그램적인 기능을 구현하는 것에 초점이 맞춰져 있습니다. **프론트 엔드 개발자는 HTML, CSS, JavaScript를 전부 다룰 수 있어야** 합니다. 개개인의 디자인적 능력과는 별개로 말이죠.

프론트 엔드는 **클라이언트 사이드**라고도 합니다.

## 백 엔드(Back-End)
또 하나는 **백 엔드(Back-End)**입니다. 프론트 엔드가 보이는 화면을 개발하는 것이라면, 백 엔드는 보이지 않는 부분을 개발합니다. 정확히는 클라이언트와 서버끼리 데이터를 주고 받는데 그 데이터를 처리하는 일을 맡습니다. 보통 데이터베이스, 클라이언트와의 소통을 위한 API를 개발 합니다. 말 그대로 서버와 관련된 개발을 하는 부류입니다.

경우에 따라서는 데이터베이스는 따로 다른 사람이 개발을 하기도 합니다. 백 엔드는 **서버 사이드**라고도 합니다.

## 풀스택(Full Stak)
마지막 부류가 프론트 엔드와 백 엔드를 둘 다 할 줄 아는 **풀스택(Full Stak)**입니다. 하나만 할 줄 알아도 직업으로서 갈 길이 생기는데, 두개를 다 할 수 있다면 더욱 길이 열리게 됩니다. 풀스택 개발자가 아니더라도 **프론트 엔드 개발자와 백 엔드 개발자는 서로의 영역에 대해 어느정도는 알고 있어야** 합니다. 그래야 **원활한 소통**이 가능하고 **협업**을 이루어낼 수가 있기 때문입니다.

쉽게 말하면 둘 다 공부하면 좋다. 라는 것입니다.

## 웹 프로그래밍 언어
웹 프로그래밍에 쓰이는 언어는 기본적으로는 총 세가지입니다.

웹의 뼈대이자 마크업을 담당하는 **HTML**. 웹의 피부이자 디자인, 스타일을 담당하는 **CSS**. 웹의 근육, 뇌이자 웹에 대한 전반적인 것들 컨트롤 하는 **자바스크립트** 정도가 있겠습니다.

사실 이 언어들 말고도 웹 프로그래밍에 쓰이는 언어는 **다양한 편**입니다. **파이썬**도 그렇고 **C#**도 그렇고 **자바**도 그렇고 아무튼 다양합니다. 처음부터 이렇게 많은 걸 알 필요는 없습니다. 오히려 머리만 아프죠. 가장 일반적이고 전형적인 루트를 먼저 가보고 그 다음에 다른 길을 모색하는 것도 나쁘지 않습니다.

이게 왜 그런가하면 웹의 시장이 커지면서 다른 언어들도 **웹 개발을 지원하는 경우**가 생겨왔기 때문입니다. 이는 전부 웹의 중요성을 알아서 자신들의 영역을 확대하려고 하는 것이죠. 저는 자바스크립트로 개발을 하려고 배우고 있는 중이기 때문에 이 블로그에서도 자바스크립트에 대한 부분을 집중적으로 다룹니다.

# 힘들지도 모르는 오르막길
아무튼간에 우리는 앞으로 위에서 언급된 이 세가지의 언어에 대해 배워 갈 것입니다. 함께 말이죠. **우리는 처음부터 프로그래밍을 하지는 않습니다.** 웹 퍼블리싱부터 절차적으로 밟고 올라갈 겁니다. 갈 길이 멀지도 모릅니다. 하지만 천천히 앞으로 나아가면 생각보다 빠르게 목표지점에 도달할 수 있을지도 모르죠. 그러기 위해서는 가장 먼저 HTML부터 정복해보는 게 필요하겠죠?

**같이 공부하는 사람들이 있다면 공부는 언제나 더 즐겁습니다.** 같이 공부할 사람을 만들고 여러분과 비슷한 사람들을 만나세요. 여러분의 공부는 더 재밌어질 것이고 공부의 효율은 올라갈 겁니다.

# 공부를 하는 목적
또한 여러분들은 단순히 공부를 하는 게 아니라 **목적을 만들어야 합니다.** 목적이 없는 공부는 쉽게 지치게 됩니다. 지식을 그저 알려고 하는 건 의미가 없습니다. 사용할 곳이 있어야 비로소 의미가 있는 것이죠. 여러분들은 왜 프로그래밍을 배우려고 하시는 것일까요. 저는 모릅니다. 하지만 여러분들은 알겠죠.

그렇다면 목적을 들여다보세요. 없다면 만드세요. 무엇이든 좋습니다. **목적은 크게. 멀리 있는 것을 설정**하면 더 좋습니다.

목적이 설정되면 그 다음엔 목표입니다. 목적을 달성하기 위해 **간단한 목표**부터 만들어보세요. 저같은 경우는 일본어를 전공했고 일본어를 가르치는 웹 사이트를 만들고 싶었습니다. 그렇게 HTML을 배우고 CSS를 배우고 자바스크립트를 배우기 시작했습니다.

![주사위를 굴릴 수 있는 DiceRoll](https://drive.google.com/uc?export=view&id=1LkSIAuQ726zgrAAg_c9WPpNA_itc24Vy)

<P>자바스크립트를 배우면서 처음으로 만든건 주사위 프로그램이었습니다. 단순했지만 어려웠죠. 높은 벽을 만났기 때문에 그 벽을 넘기 위해서 공부를 할 수 있었습니다. 그렇게 만든 프로그램은 바로 <A href='https://thediceroll.github.io/' type='normal'>DiceRoll</A> 입니다. <Strong>TRPG</Strong>라는 것을 할 때에 만들었던 것인데 지금도 사용하고 있습니다.</P>

그 뒤로도 천천히 공부를 하고 있는 중입니다. 그리고 이렇게 정리를 하면 머리에 더 잘 남으니까 가이드도 작성하고 있죠. 중요한 건 이게 아니고, 우리끼리 목표를 하나 만들어봅시다. HTML을 배워서 간단한 페이지를 하나 만들어보는 겁니다. 목표도 정해졌겠다. 그럼 달려봅시다. [웹 개발을 위한 HTML 가이드 모음](/post/2021-05-02-01-complete-html-guide) 이 링크를 클릭하면 HTML 가이드의 목록을 확인할 수 있습니다.

이제부터 우리는 한 배를 탄 겁니다. 개발을 위한 프로그래밍 지식은 여기까지입니다. 추후에 필요한 내용이 있으면 업데이트를 하도록 하고 새롭게 알게 되는 내용이 있어도 업데이트를 할 겁니다. 아무튼, 여기까지 달려오느라 고생 많으셨습니다. 이제부턴 진짜 공부를 시작해봅시다.

<NoteBottom number='1' first={true}>웹을 구현하기에 앞서 기획을 세우는 것으로, 요소들의 레이아웃과 상세한 구격을 설정하는 과정을 말한다. 최종적으로 완성될 이미지를 전달하기도 하며, <A type='normal' href='https://www.figma.com/'>Figma</A> 등의 디자인 툴을 통해서 웹 퍼블리셔와 협업을 하기도 한다. 웹 디자인을 전문적으로 하는 사람을 <Strong>웹 디자이너</Strong>라고 한다.</NoteBottom>
<NoteBottom number='2'>디자인을 바탕으로 웹을 구현하는 것을 퍼블리싱이라고 한다. 이를 전문적으로 하는 사람을 <Strong>웹 퍼블리셔</Strong>라고 부른다.</NoteBottom>


이번 글은 개발을 위한 프로그래밍 지식 시리즈 제 6편입니다. 마지막 글입니다. 우리는 지금까지 컴퓨터의 역사를 알아봤고 프로그래밍 언어의 흐름을 알아봤고 인터넷의 등장과 웹의 흐름을 알아봤습니다. 전문적인 지식은 아니더라도 대강이나마 살펴봤죠. 이제 우리는 웹 프로그래밍에 대해 파고들 시간입니다. 어차피 우리는 초보고 견문이 별로 없는 문외한들입니다. 실력이 있다면 이런 글을 보고 있지 않겠죠 아마도. 아무튼, 우리의 수준은 다 비슷비슷합니다. 높지는 않죠. 우리가 웹 프로그래밍을 공부하기 위해서는 웹 프로그래밍이 무엇인가 정도는 알아야겠죠. 그리고 그 안에서 어떠한 개념들이 있는지는 알고 넘어가야 비로소 배울 준비가 되었다라고 할 수 있을 겁니다.

개발을 위한 프로그래밍 지식 6편 - 웹 프로그래밍


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, ProgrammingGuideMessage
} from '@/components/Post';

<ProgrammingGuideMessage />

이번 글은 **개발을 위한 프로그래밍 지식 시리즈 제 5편**입니다. 이번 글에서는 **웹의 역사**에 대해서 다룹니다. 사실 웹 자체의 역사라기보다는 HTML과 CSS와 같은 **언어들의 역사**라거나 **웹 서비스들의 흐름, 패러다임**에 대해 알아보는 것이라고 하는 게 더 나을지도 모르겠습니다. 웹은 꾸준히 발전을 하고 있고 앞으로도 계속 발전을 할 것입니다. 이제 본론으로 들어가보도록 합시다.

# 웹의 태동
인터넷이 등장하면서 세계는 급격하게 변했다고 해도 과언이 아닙니다. 하지만 어려웠기 때문에 대중에게 풀려도 제대로 사용되지 않았던 인터넷을 더 확실하고 빠르게 보급한 원인은 바로 **웹**에 있습니다. 웹은 그나마 사용하기 편했으니까요.

## 초창기 웹의 의미
웹이 처음 등장하고 성장을 시작하던 1990년대부터 2000년 동안은 웹은 진가를 발휘하지 못한 상태였습니다. 이 시기를 초창기라고 정의한다면, 이 초창기 웹의 시대는 서로 다른 국가에 있던 사람들이 한 공간에 모여 **접촉**이 가능하게 됐던 역사적인 순간이었다고 할 수 있습니다.

## HTML과 CSS
웹이 처음 등장한 이래로 많은 변화가 있었지만 처음에는 초라한 형태였습니다. 팀 버너스리는 웹을 고안하면서 웹에서 보여질 문서의 규격도 같이 고안했습니다. 그게 바로 HTML이라는 언어입니다. **html 문서**는 **HTML로 작성**이 되고 이렇게 작성된 파일은 **웹 브라우저를 통해서 열람**이 가능했습니다. 최초의 웹 페이지를 보면 얼마나 초라했는지 알 수 있습니다.

![최초의 웹 페이지](https://drive.google.com/uc?export=view&id=1Z13tANDrjOOD9DI4cI9wXQTLBdQQaINi)

HTML의 처음 버전은 1이었습니다. 물론 나올 때에는 그냥 HTML이었지만 버전이 올라가면서 최초의 HTML은 버전 1이 되었습니다. 당연하겠죠. 1995년에 HTML 2가 발표되었는데 최초로 표준이 된 버전입니다. 하지만 문제도 많았던 버전이었기 때문에 금방 1997년에 버전 3.2가 등장합니다.

버전 3.2를 내놓은 것은 **W3C**라는 곳이었는데 이 곳은 웹의 표준화를 추진하는 곳입니다. 웹 표준이라는 것은 어떤 브라우저에서 열더라도 똑같이 출력되는 것을 포함한 대략적인 기준 같은 것이라고 이해하면 됩니다. 이후의 HTML 버전은 이 곳에서 내놓게 됩니다.

초창기의 웹은 **문서의 형태**를 짙게 띄고 있었습니다. 마치 워드처럼 말입니다. 요즘의 웹과는 많이 다른 형태였고 말 그대로 디자인이 없어서 초라했습니다. 디자인이 가능하게 됐던 순간에도 **html 문서에 때려넣었기 때문**에 **가독성이 개판**이 되기도 했습니다.

HTML 4.01부터 HTML이 체계적으로 자리를 잡아가기 시작하면서 디자인. 즉 스타일은 CSS로 분리가 되었습니다. 사실 CSS가 처음 등장한 것은 1996년인데 그 이후에도 HTML에 디자인 요소를 넣곤 했는데 점점 그런 추세는 사라지게 됩니다.

**HTML**은 웹 페이지의 **골격만을 담당**하게 되었고 **CSS**는 웹 페이지의 **디자인만을 담당**하게 된 것이죠. 체계적인 디자인이 가능해지면서 웹의 환경을 변하기 시작했습니다. 조금 더 화사하게 말이죠.

<Message color='g'>
  <P><Strong>웹 페이지</Strong>는 하나 하나의 페이지를 의미합니다. <Strong>웹 사이트</Strong>는 연관이 있는 페이지들의 집합입니다. 웹 사이트가 웹 페이지의 상위적인 카테고리라고 이해하면 됩니다.</P>
</Message>

# 웹의 발전
초창기의 웹은 HTML과 CSS의 위주로 돌아갔다면 **자바스크립트**가 등장하고나서 조금 지난 후, 자바스크립트가 **웹의 중심점** 역할을 하게 됩니다. HTML도 CSS도 전부 자바스크립트로 제어할 수가 있었기 때문이죠. 자바스크립트를 이용하면 HTML과 CSS 만으로는 할 수 없는 일들도 이뤄낼 수 있었습니다.

자바스크립트는 **웹 프로그래밍**의 본격적인 시작을 알렸습니다. 웹 개발자들이 많이 생겨나기 시작했습니다. 뿐만 아니라 자바스크립트 이외에도 많은 언어들이 웹을 보완, 보조하기 위해 탄생했고 웹을 좀 더 편안하게 구성할 수 있도록 돕기 시작했습니다. 웹과 상관이 없던 프로그래밍 언어들도 웹 개발을 지원하기 시작했죠. 이는 웹이 상당히 중요한 위치에 이르렀다는 것을 의미했습니다.

## 자바스크립트의 등장
자바스크립트는 본래 웹서버에서 사용될 언어였으나 나가리되고 **웹 브라우저에 탑재** 되었습니다. 자바스크립트가 웹에 쓰이게 되면서부터 정적이었던 웹 페이지들은 동적인 웹 페이지가 될 수 있었지만 자바스크립트가 등장을 했어도 세상은 아직 **HTML과 CSS의 위주**로 돌아갔습니다.

그런데 어느순간부터인가 웹에서 **동적인 요소들이 부각**되기 시작합니다. 자바스크립트의 영역이 **점점 더 커지면서** 여러 웹 서비스들은 웹 사이트에 동적인 요소를 추가하고 **자바스크립트를 적극 활용하기 시작**했습니다. 이때부터 웹은 단순한 문서만은 아니게 되었습니다.

오늘날 웹의 세가지 요소는 HTML, CSS, JavaScript라고 알려져 있고 이렇게 굳어져 있습니다. 이 세가지는 떼려야 뗄 수 없는 관계가 되었습니다. 게다가 현재의 웹은 가히 **프로그램이라고 할 수 있을만한 위치**로 왔습니다. 그저 문서의 측면이었던 과거와는 다르게 웹 페이지와 사용자의 상호작용이 활발하게 이루어지고 있기 때문입니다. 그래서 결론적으로 현재는 **웹 문서**로서의 측면과 **웹 프로그램**으로서의 측면이 격돌하고 있습니다. 아마도 지금 이 순간이 과도기일 것입니다.

물론 모든 웹 페이지가 그런 것은 아니기 때문에 문서의 측면이 완전히 사라졌다고는 할 수 없습니다. 그러나 대부분의 웹 사이트는 동적이다 못해 사용자와 **소통을 하기도** 합니다. 이러나 저러나 웹으로 할 수 있는 것이 점점 많아지고 있다는 의미입니다.

## 제이쿼리의 등장
자바스크립트를 보다 편하게 사용할 수 있도록 만들어주는 라이브러리인 **제이쿼리**는 2006년에 처음 나타났습니다. 제이쿼리는 사실 별 기능이 없습니다. 그럼에도 업계를 장악하기 시작했습니다. 제이쿼리가 자바스크립트보다 더 나은 언어인줄 아는 사람들도 있습니다.

제이쿼리는 일반 자바스크립트를 사용할 때보다 개발 속도가 빨랐고 **간결한 코드만으로** 많은 기능을 구현할 수 있었다는 점에서 인기를 끌었습니다. 장점이 이것 뿐이기에 훗날 다른 기술에게 밀려 점유율을 빼앗기게 되지만요.

## 반응형 웹의 등장
![반응형 웹의 모습이다](https://drive.google.com/uc?export=view&id=1-kpC9ELIU18YvSpUof78qDm9fnLy1z5c)

모바일 기기의 사용량이 많아지고 **모바일에서도 웹에 접속**할 수 있게 되면서부터 어떤 문제가 발생하게 되었습니다. 모바일이 발달하기 이전에는 **웹은 PC의 화면만을 신경쓰면 됐습니다.** 그런데 모바일이 발달하면서부터 **웹은 모바일용 화면도 따로 구성**해야 했습니다. 하나의 사이트가 두개의 버전으로 존재해야 했던 겁니다. 이런 비효율적인 방식을 타파하기 위해서 CSS에서는 **미디어 쿼리**라는 시스템을 도입했습니다.

미디어 쿼리는 모바일이든 PC든 상관 없이 **같은 웹 페이지**를 **화면의 너비**에 따라서 **다른 화면**으로 보여주는 기술입니다. 정확히는 모바일이면 모바일에 맞게끔 보여주고 PC라면 원래의 모양을 보여주는 것이죠. 이러한 웹 디자인 방식을 **반응형 웹 디자인**이라고 불렀습니다. 그리고 지금 반응형으로 디자인을 하지 않은 웹 사이트는 별로 없다고 봐도 무방합니다.

## SNS의 등장
2000년대 이후에는 **SNS**라는 웹 서비스들의 등장으로 인해서 사람들은 **소비자에서 생산자**가 되었습니다. 자신들의 노하우를 공개할 수 있게 되었고 자신들의 생각과 발상을 세상에 내놓을 수 있게 되었습니다. 이러한 활동들은 웹을 더 가득 가득 채우기 시작했고 그 결과 웹은 **정보의 바다**가 되었습니다. 누군가는 블로그에 글을 작성하기 위해 웹을 이용했고 누군가는 정보를 얻기 위해 웹을 이용했습니다.

이 기조가 현재까지 이어져오고 있습니다. 웹은 이제 인류의 일상이 되었습니다. 웹을 통해서 뉴스를 접하고 새로운 소식을 접하기도 하며 자신들의 일상을 **공유**하기도 합니다. 지금은 당연하게 느껴지는 것들은 과거엔 전혀 당연하지 않았습니다. 혁신적이었고 가히 신비로운 기술이었습니다. 우리는 이러한 환경이 나타난 것을 정말 다행으로 여겨야 합니다.

## Node.js로 인한 자바스크립트의 활용 확대
흔히 **노드**라고 부르는 이 자바스크립트 런타임은 현 시대의 자바스크립트의 활용성을 최대한으로 **극대화**시켰습니다. 일반적인 자바스크립트만으로도 충분히 강력한 기능을 구현할 수 있는데 수십, 수백을 넘어 수천가지의 라이브러리 시장을 활성화시켜 어마어마하게 거대한 트렌드와 패러다임을 만들어냈습니다.

현재의 웹 개발 트렌드는 **SPA**인 듯합니다. 싱글 페이지 애플리케이션이라는 의미입니다. 웹사이트라는 것은 기본적으로 여러개의 페이지가 있어야 했는데 SPA라는 개념으로 인해서 하나의 페이지만으로 여러개의 페이지가 있는 것마냥 브라우저를 속일 수 있는 기술을 얻었습니다. **리액트(React)**나 **뷰(Vue)**가 바로 그런 개념의 기술인데 여기서 말하긴 좀 이른 것 같군요.

노드의 패키지 매니저 시스템인 **NPM**을 적극 이용해 여러가지 유용한 프로그래밍이 가능해졌고 웹 개발자들은 자신들이 직접 프로그래밍을 해서 기능을 구현시키기보다는 이미 만들어져 있는 기능을 가져와서 자신의 프로그램에 첨가하는 등의 오픈소스의 활용 능력도 중요시하게 다뤄지게 되었습니다. 오늘날의 **프로그래밍은 마치 퍼즐**과도 같습니다. 잘 어울리는 이미 존재하는 라이브러리, 프레임워크를 어떻게 조합해서 퍼즐을 맞추냐가 관건이죠.

이 부분에 대한 더 자세한 이야기는 **웹 프로그래밍** 파트로 넘어가서 계속하도록 합시다.

## 웹의 중요성을 알게 된 개발자들
웹이 발전함에 따라 다양한 프로그래밍 언어들이 웹 프레임워크를 지원하기 시작했습니다. 자바도 파이썬도 C# 같은 언어들도 웹 프로그래밍을 할 수 있는 언어가 되었습니다. 물론 자바스크립트를 따라오긴 아직 멀었다는 생각이 들긴 합니다만 그렇게 변해왔고 앞으로 확대될 거라는 것이 중요하겠죠.

---

글이 길어질 것 같아서 잘랐는데 막상 작성하고 보니 그렇게 길지는 않네요. 사실은 이번 글을 작성하면서 생략한 부분도 많이 있습니다. 빠진 것들은 추후에 정리가 되면 추가를 해보도록 하고 일단은 웹 프로그래밍에 대한 주제를 먼저 다뤄야겠습니다. 이번 글은 여기까지 입니다. 다음 글에서 봅시다.


이번 글은 개발을 위한 프로그래밍 지식 시리즈 제 5편입니다. 이번 글에서는 웹의 역사에 대해서 다룹니다. 사실 웹 자체의 역사라기보다는 HTML과 CSS와 같은 언어들의 역사라거나 웹 서비스들의 흐름, 패러다임에 대해 알아보는 것이라고 하는 게 더 나을지도 모르겠습니다. 웹은 꾸준히 발전을 하고 있고 앞으로도 계속 발전을 할 것입니다. 이제 본론으로 들어가보도록 합시다. 웹이 처음 등장한 이래로 많은 변화가 있었지만 처음에는 초라한 형태였습니다. 팀 버너스리는 웹을 고안하면서 웹에서 보여질 문서의 규격도 같이 고안했습니다. 그게 바로 HTML이라는 언어입니다. html 문서는 HTML로 작성이 되고 이렇게 작성된 파일은 웹 브라우저를 통해서 열람이 가능했습니다. 최초의 웹 페이지를 보면 얼마나 초라했는지 알 수 있습니다.

개발을 위한 프로그래밍 지식 5편 - 웹의 역사


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, ProgrammingGuideMessage
} from '@/components/Post';

<ProgrammingGuideMessage />

이 글은 **개발을 위한 프로그래밍 지식 시리즈**의 4번째 글입니다. 이번 글에서는 인터넷의 역사에 대해서 알아봅시다. 인터넷의 등장은 **인류의 욕망**과 관련이 있고 컴퓨터의 등장하고나서 살짝 뒤에서 등장하게 됩니다. **인터넷의 역사에 기여한 사람들은 서너명 정도**가 되고 그들의 존재로 인해 인류는 인터넷이라는 네트워크 속에서 빠른 발전을 이룰 수가 있었습니다.

그럼 바로 본론으로 들어갑시다.

# 인류와 소통
인터넷의 이야기를 하기에 앞서서 **인류의 특성**에 대해 살짝 생각해보고 넘어갈 필요가 있습니다. 인간은 다른 동물과는 다릅니다. 언제나 무리를 지어 생활을 했고 지구를 점령한 후에도 인류는 그 특성을 버리지 못하고 있습니다. 인간은 뭔가를 만들면 그것을 남에게 **보여주고** 싶어하고 **평가**받고 싶어합니다.

인간은 보통 혼자 있는 것보다는 **누군가와 함께 있는 것을 더 선호**합니다. 인간은 소통을 하고 싶어하는 사회적인 동물입니다. 이러한 특성들이 인터넷이라는 과학적인 진보마저 불러왔습니다. 물론 진보 자체는 불편함을 해결하고 편해지기 위해서지만요. 인간은 소통을 필요로 하는 존재입니다. 이러나 저러나 인터넷이 세계를 이어주고 국가를 뛰어넘어 소통을 하게 만들어줬다는 것은 달라지지 않죠.

인터넷 역시도 **통신**을 위한 수단이었고 오늘 날에는 전화와 필적한 빈도를 자랑하는 통신 수단이 바로 인터넷입니다.

# 인터넷의 역사
**인터넷**은 단거리는 물론 장거리 통신이 가능한 소통 방법입니다. 인터넷은 1973년에 **빈튼 서프**라는 사람과 **밥 간**이라는 사람이 만들어낸 **TCP**와 **IP**라는 통신 프로토콜을 통해서 정보를 주고받을 수 있는 **컴퓨터 네트워크**입니다. 인터넷이라는 이름도 그들이 지었습니다. 이것들의 상세한 개념에 대해서는 언젠가 따로 공부를 해보시면 될 것 같습니다.

**네트워크**라는 것은 **통신망**이라는 의미 입니다. 이 통신망의 안에 있다면 **통신이 가능**하다 라고 생각하면 됩니다. 인터넷은 인류에게 없어서는 안되는 중요한 요소가 되어버렸습니다. 이 인터넷이 그간 어떻게 발전해왔는지 간략하게 들여다보도록 합시다.

## 최초의 컴퓨터 네트워크 아파넷(ARPANET)
아파넷은 미국 국방부 산하 조직인 **고등 연구국(Advanced Research Projects Agency)**에서 개발된 컴퓨터 네트워크였습니다. 이 조직은 현재 **DARPA**라는 이름으로 존재하고 있습니다. 이들이 만든 네트워크인 아파넷은 미군의 정보를 어떻게 관리할까 라는 발상에서부터 시작되었고 정보를 안전하게 보관하기 위해서 네트워크를 만들게 되었습니다. 이 프로젝트에 참가했던 **로런스 래리 로버츠**라는 사람은 인터넷의 아버지라고 불릴 정도로 위업을 세운 셈입니다.

1983년 즈음에는 패킷 송출 방법을 NCP에서 TCP/IP로 변경합니다. 이 시기에 **이메일**이라는 개념이 최초로 등장하게 됩니다. 이 이후에는 아파넷은 **민간에 공개**해버리고 국방부에선 **밀넷(MILNET)**이라는 또 다른 네트워크를 만들어 사용하기에 이릅니다. 이들이 공개한 아파넷이 바로 현재 우리가 사용하는 인터넷 환경의 근간이 됩니다.

이때까지만 해도 인터넷이라는 것은 어려운 개념이었습니다. 적어도 일반인들은 이것을 제대로 다룰 수가 없었습니다. 오늘날 인터넷이라는 이미지를 만들게 되는 것은 바로 이 때쯤에 등장합니다.

## WWW의 등장
1989년. **팀 버너스리**라는 사람은 **WWW**라는 것을 고안합니다. 줄여서 **웹**이라고 부르며 **월드 와이드 웹(World Wide Web)**을 줄여서 WWW라고 부르기도 합니다. 웹은 네트워크 상의 커다란 공간입니다. 인터넷 내부에 존재하는 것이라고 보면 됩니다. 웹이 인터넷인 것은 아닙니다. 이 둘은 확실히 다른 것이고 인터넷이 연결되어 있어야 웹도 의미가 있습니다.

웹은 **1990년 2월 20일**에 본격적으로 보급화되기 시작합니다. 웹이라는 이름은 **수많은 페이지들이 거미줄처럼 얽혀있다**는 비유에서 지어졌습니다. 이 뿐만이 아니라 **HTTP**라는 개념도 웹 페이지의 주소를 의미하는 **URL**이라는 것도 전부 팀 버너스리라는 사람이 만들었습니다. 이 사람이 아니었다면 우리는 아마 아직도 불편하게 어렵게 인터넷을 활용했을 겁니다.

다시 한 번 말하지만 **웹은 인터넷을 이용한 시스템**이지 인터넷 그 자체가 아닙니다. **인터넷은 네트워크**고 네트워크는 통신망입니다. **웹은 정확히 무엇인가**하면 **HTTP라는 프로토콜**로 주고 받을 수 있는 **HTML 페이지가 가득한 공간**이다 라고 할 수 있습니다. 웹 브라우저가 바로 HTTP 통신을 엿볼 수 있는 도구인 것이고 그렇기 때문에 웹 페이지를 볼 수 있는 것입니다.

오늘날 인터넷을 하는 행위가 웹을 들여다본다 라는 것으로 쓰이는 이유에는 아마 마이크로소프트가 만든 윈도우에 인터넷 익스플로러라는 브라우저가 큰 기여를 했을 겁니다. 사실 일반인들은 몰라도 됩니다. 그 둘이 다른다는 것을요. 하지만 우리는 알아야합니다. **웹과 인터넷은 별개이고 인터넷의 내부에 웹이 존재한다는 것**을 말입니다.

아무튼, **웹의 존재로 인해 인터넷은 더욱 빨리 보급화** 될 수 있었습니다. 인터넷은 점점 더 발전하면서 웹 이외에도 다른 기술들이 개발되고 있죠. 특히나 **웹의 탄생은 웹 프로그래밍을 가능**케 했습니다.

팀 버너스리는 웹 이외에도 **HTML**이라는 문서 규격을 제안했고, 이것은 점점 발전해서 **CSS**라는 것을 탄생시켰고 이후에는 **자바스크립트**와도 연동이 가능해져 동적인 프로그래밍이 이루어졌습니다. 웹 프로그래밍은 현재 강력한 위상을 지니고 있습니다.

### 웹의 존재의의
인터넷은 다양한 것들을 주고 받는 네트워크들의 집약체였고 월드 와이드 웹은 그런 **데이터들 중에서도 가시적인 문서나 파일**들을 효율적으로 관리하거나 열람하기 위해서 탄생했습니다. 팀 버너스리가 웹을 고안하게 된 계기도 **이리 저리 흩어져 있는 정보를 한데모아 체계적으로 관리**할 수 있게 하기 위함이었습니다. 그리고는 그것이 이루어지자 무료로 만들어 기술을 오픈소스로 만들었습니다.

웹으로 인해 우리는 인터넷 공간에 있는 문서나 파일을 편하게 볼 수 있게 되었고 이를 주고 받을 수 있게 되었습니다. 오늘날의 웹은 정보의 바다가 되었습니다. 이게 전부 팀 버너스리가 선구적인 발상을 해냈기 때문입니다.

### 웹의 특징
웹의 특징이라면 당연하게도 **문서와 문서가 서로 연결 되어있다**는 것입니다. 링크라는 것을 통해서 서로 다른 웹 페이지를 연결하는 게 가능합니다. 인터넷을 정보의 바다로 불리게 만들어준 기능이기도 합니다. 이는 상당히 혁신적이었다고 할 수 있겠습니다.

---

대략적인 인터넷의 역사는 이정도입니다. 사실 우리는 전문지식 수준의 지식은 아직은 알 필요가 없습니다. 여러분이 웹 개발자로서 충분히 성장을 하면 그때 공부를 해도 늦지 않을 정도의 내용입니다. 중요한 것은 이제 우리는 컴퓨터의 역사나 프로그래밍의 대략적인 흐름을 알았고 오늘은 웹이 탄생하게 된 계기를 알게 되었다는 것입니다.

이제 웹의 흐름에 대해서만 알아본다면 우리가 웹 개발을 하는데에 있어서 큰 문제는 없을 겁니다. 이번 글은 여기까지입니다. 다음 글은 언급한대로 웹의 흐름, 즉 웹의 역사에 대해서 알아볼까 합니다.


이 글은 개발을 위한 프로그래밍 지식 시리즈의 4번째 글입니다. 이번 글에서는 인터넷의 역사에 대해서 알아봅시다. 인터넷의 등장은 인류의 욕망과 관련이 있고 컴퓨터의 등장하고나서 살짝 뒤에서 등장하게 됩니다. 인터넷의 역사에 기여한 사람들은 서너명 정도가 되고 그들의 존재로 인해 인류는 인터넷이라는 네트워크 속에서 빠른 발전을 이룰 수가 있었습니다. 그럼 바로 본론으로 들어갑시다. 인터넷의 이야기를 하기에 앞서서 인류의 특성에 대해 살짝 생각해보고 넘어갈 필요가 있습니다. 인간은 다른 동물과는 다릅니다. 언제나 무리를 지어 생활을 했고 지구를 점령한 후에도 인류는 그 특성을 버리지 못하고 있습니다. 인간은 뭔가를 만들면 그것을 남에게 보여주고 싶어하고 평가받고 싶어합니다.

개발을 위한 프로그래밍 지식 4편 - 인터넷과 웹의 등장


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, ProgrammingGuideMessage
} from '@/components/Post';

<ProgrammingGuideMessage />

이번 글은 개발을 위한 프로그래밍 지식 3편입니다. 프로그래밍 언어 자체에 대해서는 저번 글에서 이미 이야기를 했으니까 이번 글에서는 프로그래밍 언어의 역사에 대해 알아봅시다. 저번 글은 [프로그램과 프로그래밍 언어](/post/2021-05-03-02-program-and-programming) 이 링크를 참고하시면 됩니다.

그럼 바로 본론으로 들어갑시다!

# 프로그래밍 언어가 등장하기 이전
20세기 중반에 **컴퓨터가 등장함에 따라 프로그래밍도 같이 시작**되었다고 할 수 있습니다. 초창기 컴퓨터라고 할 수 있는 에니악과 그 비슷한 시기의 컴퓨터들은 오로지 계산을 위해서 존재했고 원하는 결과를 얻기 위해서는 긴 작업을 필요로 했습니다.

**에니악**의 경우에는 프로그래밍 언어가 아닌 천공 카드와 배선판을 이용해 프로그램을 실행했습니다. 이는 매우 불편한 작업이었고 심지어는 프로그램을 바꾸려면 배선판을 전부 손봐야했습니다. 이러한 문제점을 개선한 것이 바로 에드박과 에드삭 같은 컴퓨터들이었고, 실질적인 프로그래밍의 영역은 이 때부터 시작됩니다.

# 전쟁과 프로그래밍
사실 제가 혼자 공부해본 바에 따르면 이 이전에도 프로그래밍 언어는 존재했고 **컴퓨터가 개발되기 이전**에도 **프로그램은 존재**했으나 그건 중요하지 않습니다. 중요한건 프로그래밍 언어들이 등장하기 시작했을 무렵부터 세계에 변화가 시작되었다는 것이죠.

처음 프로그래밍 언어가 등장했을 시기는 전쟁이 활발하거나 군사력 관련해서 나라들이 서로 경쟁을 하던 때였습니다. 그렇기에 **컴퓨터는 군사용, 군사와 관련된 과학 연구**에 쓰였습니다. **에니악만 해도 군사용**으로 쓰였기 때문에 전쟁이 끝난 얼마 뒤의 시대도 이는 별반 다르지 않았습니다.

지금 생각해보면 **인류의 발전은 전쟁으로 인해 촉진**되었습니다. 일상에서도 사용되는 기술들은 대부분 전쟁을 할 때에 전쟁을 목적으로 만들어졌던 것을 생각해보면 이는 상당히 흥미로운 측면입니다. 프로그래밍 언어도 그러했습니다.

## 기계어(Machine Code)
![기계어의 예](https://drive.google.com/uc?export=view&id=1eHAiuQJ785ki6lduCD4FwD-V9XEFqs3G)

<P>컴퓨터를 사용하기 위해서는 컴퓨터가 알아먹을 수 있는 체계를 필요로 했고 이 때 처음으로 <Strong>기계어(Machine Code)</Strong>라는 프로그래밍 언어가 나타나게 됩니다. 기계어는 <Strong>0과 1이라는 비트 단위의 두 숫자</Strong><Gray>(엄밀히는 숫자는 아닙니다.)</Gray>를 이용한 언어였습니다.</P>

## 어셈블리어(Assembly language)
![우측이 어셈블리어다. 정말 괴랄한 모양을 갖고 있다.](https://drive.google.com/uc?export=view&id=11vQlybEp2O-cNn685TOQ4mqhB5n7psfb)

이 기계어는 0과 1만으로 모든 내용을 채우니까 그 가독성이 참 개떡같았을 겁니다. 그 당시의 사람들도 이 이진수 모스부호를 사용하는 게 불편하다는 것을 알고 있었고 이를 개선한 것이 바로 **어셈블리어(Assembly language)**였습니다.

전쟁이 끝난 뒤에는 어셈블리어로 프로그래밍을 했는데 이 어셈블리어는 **복잡한 기계어를 조금 더 사람이 알아볼 수 있게 만든 프로그래밍 언어**였습니다. 컴퓨터는 여전히 숫자만을 알아먹었습니다. 그렇기 때문에 어셈블리어로 프로그래밍을 해도, 이를 **기계어로 바꿔주는 과정**이 필요했습니다.

<P><Strong>어셈블리어를 기계어로 바꾸는 과정을 컴파일</Strong><NoteTop number='1' />이라고 합니다. 어셈블리어는 프로그래밍을 조금 더 편하게 만들어주는 요소였던 것이지 기계어를 대체하는 것은 아니었던 것이죠. 어셈블리어는 기계어에 1:1로 대응이 가능하게끔 만들어져 있습니다. 또한 기계어와 어셈블리어는 모두 저급 언어<NoteTop number='2' />라고 불립니다.</P>

이 이후의 모든 프로그래밍 언어들은 어떤 과정을 거치든 **기계어로 컴파일하는 것이 최종 목적**입니다. 즉, 기계어는 컴퓨터가 알아먹을 수 있는 유일한 수단이라는 것입니다. 지금도 기계어는 여러 프로그램의 내부적인 순환에 쓰인다는 겁니다. 프로그래밍 언어는 결국 어떤 언어가 보기 좋은가? 어떻게 효율적으로 프로그래밍이 가능한가? 를 기준으로 발전합니다.

## 포트란(FORTRAN)
![포트란의 대략적인 모습](https://drive.google.com/uc?export=view&id=1hCVaLgMX3kihV0FD3saIm5vUGYcJXBky)

어셈블리어는 기계어를 보기 좋게 만든 것이지만 그래도 어려웠던 것은 달라지지 않기 때문에 여전히 불편했습니다. 1954년 정도에 **포트란(FORTRAN)**이라는 프로그래밍 언어가 등장합니다. 이는 최초로 만들어진 **고급 언어**였습니다. 고급 언어는 저급 언어와는 반대로 컴퓨터보다는 인간의 언어와 좀 더 비슷하다는 의미로 사용됩니다. 고급 언어들은 컴파일이라는 작업을 필요로 합니다.

포트란은 **FORmula TRANslator**의 약자였는데, 철저하게 과학 기술 계산을 위한 용도로 개발된 언어였습니다. 그렇기 때문에 수식에 특화되어있었고 수식에 한해서는 상당한 기능을 자랑합니다. 컴퓨터가 등장한 초창기 시대까지만 해도 **컴퓨터의 용도는 군사 기술과 연관이 깊었습니다.** 포트란도 그런 부분을 위해 개발이 되었다고 이해하면 됩니다.

이때 만들어진 포트란은 **지금도 쓰입니다.** 과학이나 수학과 관련된 수식에 대해서는 어마어마한 기능을 자랑하기 때문이죠. 물론 저는 문외한이라 어디서 쓰는지는 잘 모르겠습니다만은 확실한건 포트란은 계속해서 버전을 올려왔고 지금도 쓰고 있다는 겁니다.

**많은 양의 계산을 할 때에 특화**되어있는 언어이기 때문에 **지금도 현역**으로 쓰이지만, 포트란의 문법은 계속 발전하고 있어서 위 이미지와 다를 수 있습니다.

# 민간으로 뻗어나가는 프로그래밍 언어
이때부터는 단순히 전쟁이나 군사와 관련된 용도뿐만 아니라 여러 기업에서도 사용될 수 있는 프로그래밍 언어가 등장하기 시작합니다. 이제 민간으로 뻗어나가기 시작한 것이죠. 단순 수학, 과학적인 계산을 넘어서 여러 비즈니스에 쓰일 수 있는 프로그래밍 언어들이 나타나기 시작하죠.

## 코볼(COBOL)
![코볼의 모습](https://drive.google.com/uc?export=view&id=11_T2-5KV0La7LHop-RLb1YqL-eOgMPz_)

1959년 정도에 코볼이라는 언어가 그 시작이었습니다. **코볼(COBOL)**은 **COmmon Business-Oriented Language**의 약자로 코볼의 등장은 이제는 프로그래밍이 복잡한 군사용이나 과학계산 같은 게 아니라 **기업들의 입장에서 회계를 위해 사용을 하면 편해지지 않을까**라는 발상으로 이루어집니다. 사실상 보다 **포괄적인 데이터 처리를 위해서 개발된 게 코볼**입니다.

**포트란은 고차원적인 과학 계산**을 위한 것이기 때문에 단순히 **숫자를 더하고 빼고 곱하고 나누는 등의 간단한 계산에는 적합하지가 않았**습니다. 그래서 그것을 기업에서 쓰기엔 문제가 좀 있었기 때문에 데이터를 실제로 처리하기도 하는 코볼이 개발되었습니다.

당시 많은 데이터를 처리하거나 회계 등의 계산을 필요로 했을 때 기업들이 사용한 컴퓨터는 **메인프레임이라고 부르는 대형 컴퓨터**였는데, 이 컴퓨터에 코볼이 쓰였습니다. 유지보수가 상당해서 21세기 초반까지 사용되기도 했습니다. **업계 1위**의 언어였습니다.

그런데 문제는 코볼의 내부적인 요인으로 인해서 **큰 버그**가 발생하게 됩니다. 그게 바로 **Y2K 문제**입니다. 20세기 후반의 기업들은 연도를 표기할 때에 앞의 두자리는 제외하고 뒤의 두 자리만 사용하는 게 관행이었습니다. 그러니까 **1974라면 74**만 사용하고, 저장을 했죠. 그럼 어떤 문제가 생길까요? **1999년에서 2000으로 넘어갈 때**에 문제가 발생하게 됩니다. 99가 00이 되니까요.

아니나 다를까 어마어마한 문제들이 발생하게 됩니다. 그리고 이런 대란으로 인해서 기업들은 표기 방식을 바꿔야했고, 그동안 회의적이었던 언어의 교체에 대한 이야기들이 다시금 나오기 시작합니다. 여러 이야기의 끝에 선택된 것은 바로 **자바(JAVA)**였습니다. 빠르면 2000년, 적어도 늦게는 2010년 이후에는 자바가 업계의 1위를 차지하게 됩니다.

자바는 **1995년**에 처음 개발되었습니다. 즉 이 이야기는 좀 나중의 일이라는 것이죠.

# C 언어
```c
#include <stdio.h>

int main(int argc, char** argv) {
  printf("Hello world\n");
}
```

1972년에 벨 연구소에서 데니스 리치라는 사람이 개발한 언어가 바로 **C 언어**였습니다. 지금도 상당히 많이 쓰이고 있는 언어의 이름이죠. 이 C언어에 대한 이야기를 하기 위해서는 그 전에 다른 이야기들을 먼저 해야합니다.

## 유닉스의 등장
1960년대 말에 **멀틱스**라는 운영체제 개발에 참여하고 있던 **켄 톰슨**은 멀틱스를 이용해서 어떤 게임을 즐기고 있었습니다. 그런데 멀틱스를 더 이상 쓰지 않는 상황에 도달했고 이 사람은 자신이 만든 이 게임을 하기 위해서 작은 컴퓨터를 하나 구비했고 게임을 돌리기 위한 운영체제를 만들어야 했습니다.

그렇게 만들어진 운영체제의 이름은 바로 **유닉스**입니다. **멀틱스는 메인프레임용**으로 개발이 되었고 **유닉스는 개인 컴퓨터**의 시작점이나 마찬가지인 의미를 갖습니다. 처음의 유닉스는 어셈블리어로 만들어졌습니다. 고급 언어로 만들어서 컴파일을 하는 건 효율이 없었기 때문이라고 합니다.

훗날 코볼이 자바에게 자리를 빼앗길 때, 유닉스는 메인 프레임의 자리를 빼앗는 경지에 이르게 됩니다. 아무튼, 어셈블리어로 만들어진 유닉스는 나중에 **C 언어로 다시 프로그래밍되어 탄생**합니다. 이렇게 만들어진 유닉스는 최종적으로 벨 연구소의 산물이 되었습니다. C 언어는 유닉스를 위한 프로그래밍 언어였습니다. 지금이야 널리 쓰이지만 말이죠.

유닉스와 C 언어는 무료로 공개되었고 대학 등에서 널리 사용이 되었습니다. 사실상 유닉스와 C 언어로 인해서 일반인들도 컴퓨터를 더 많이 접하게 되었습니다. 또한 이후의 **운영체제들은 C 언어로 개발되는 상황**에 놓이게 됩니다. 이 C 언어가 상당히 효과적이라는 것을 알 수 있는 부분입니다. 지금도 많이들 사용하고 있으니까요.

여러 대학에서는 유닉스와 C 언어를 가르쳐서 많은 기술자들을 만들어냅니다.

# C++
![C++의 로고](https://drive.google.com/uc?export=view&id=1FVX6_TmRIaNdGi2blJgk18Lh6xI8KSO2)

1985년에는 C 언어에 객체지향을 첨가한 **C++**가 등장합니다. C 언어에 이어서 익숙한 이름이 등장을 하죠. **비아르네 스트로우스트루프(Bjarne Stroustrup)**라는 사람이 개발했고 C 언어를 발전시켰기 때문에 더 강력했습니다. 하지만 처음 나왔을 때엔 인기가 별로 없었습니다.

객체지향이라는 개념 자체는 과거에도 있었지만 인기가 없어서 잘 쓰이지 않았습니다. 그래서 C++도 그닥 큰 인상을 주지 못했던 것이 있는 듯합니다. 시대가 흐르면서 프로그래밍의 세계는 점점 복잡해져갔습니다. 기술이 발전해가니까 발상이 새롭게 생겨나는 건 당연하기 때문입니다. 유지보수에 대한 문제들이 점점 나타나기 시작했고 **1990년대에 들어서 C++은 빛을 보기 시작**합니다.

프로그래밍의 세계에서 유지보수가 편한 프로그래밍 언어가 선택되는 것은 자연스러운 현상입니다. 그렇기 때문에 객체지향 프로그래밍이 빛을 보게 된 것입니다. 왜 그런 것인가에 대해서는 앞으로 여러분이 프로그래밍을 더 공부하다보면 알게 될 겁니다. 뭐 아무튼 C++는 컴퓨터의 주류 운영체제가 **윈도우**가 되기 시작했을 무렵부터 더욱 더 빛을 발하기 시작했습니다.

90년대 당시에 윈도우가 개발되면서 **GUI**가 더욱 활발하게 개발이 시작되었고 이 개발에 어려움이 있었지만 윈도우를 만든 언어가 C 언어였기 때문에 **C 언어와 호환이 되는 C++은 좋은 대안**이 될 수 있었습니다.

지금도 소프트웨어의 개발에 있어서는 C와 C++이 압도적입니다. 최근 2021년 6월에 공개되었던 **윈도우 11도 여전히 C와 C++로** 개발이 되었으니까요.

# 자바(JAVA)
![자바의 로고](https://drive.google.com/uc?export=view&id=1qScgOsAQ07Dv_OaS47p9bsuAkuFmNv7r)

1995년에 개발된 자바는 C++가 복잡하다는 이유로 개발이 되었습니다. 자바를 만든 사람은 **썬 마이크로시스템즈(이하 썬)**의 **제임스 고슬링**이라는 사람입니다. 자바는 프로그래밍 언어였지만 PC에서 쓸 목적으로 개발된 것은 아니었습니다. 가전제품에 들어갈 프로그램에 쓸 언어였는데, 원래는 C++을 넣으려고 했습니다. 하지만 복잡하다는 이유로 자바가 탄생하게 되었습니다.

그런데 어쩌다보니 코볼을 대체하는 프로그래밍 언어의 위치에 올랐고 정보를 처리하는 언어 중에서 1순위는 단연 자바가 되었습니다. 자바는 지금도 다양하게 사용되고 있습니다. 본래 웹에 쓰일 용도는 아니었지만 웹 프레임워크도 존재하고 윈도우에서 돌아가는 여러가지 소프트웨어도 만들 수 있습니다. 심지어는 게임도 만들 수 있죠. 물론 게임 개발은 위의 두 언어도 가능합니다.

자바는 상당히 인기가 있었는데 그 인기 때문이었는지 **오라클**이 2010년에 **썬을 인수**하게 됩니다. 그래서 자바도 자연스럽게 오라클의 손으로 넘어가죠. 그 이전에는 **윈도우를 만든 마이크로소프트**에서도 자바에 관심을 보였습니다. **썬에서 개발한 JVM**에 자신들의 독자적인 기능을 넣다가 소송을 당하기까지 하죠. 그러다가 마이크로소프트에서 탄생한 게 **C#**입니다. 자바와 C++에 큰 영향을 받았죠.

# 자바스크립트
![자바스크립트의 로고 (가운데)](https://drive.google.com/uc?export=view&id=1WU_pZpMVRLE5-VVE6l0CluqTdbcgicBq)

자바와 마찬가지로 1995년에 최초로 개발된 자바스크립트는 원래 **라이브스크립트라는 이름**으로 개발이 되었습니다. 그런데 자바가 잘 나가니까 그 인기에 숟가락을 좀 얹으려고 자바스크립트라는 이름으로 바꾸게 됩니다.

자바스크립트는 본래 **웹 서버**에서 사용될 언어였습니다. 웹서버를 처음으로 만든 기업은 **넷스케이프**라는 곳입니다. 그 곳에서 자바스크립트를 사용하려고 했는데.. 그닥 효율은 좋지 않았는지 사용되지 않았고 웹 브라우저에 내장되는 신세로 전락하고 맙니다. 그런데 이것이 신의 한수였죠.

당시 **플래시**라는 기술이 있었습니다. 애니메이션을 통해서 웹을 구성할 수 있었죠. 플래시는 웹에서 동적인 제어를 하는 유일한 시스템이었습니다. 하지만 **보안상의 문제**로 플래시는 몇년 전에 나가리되었습니다. 그 자리를 자바스크립트가 차지하게 되었죠. 자바스크립트는 현재 상당히 거대해졌습니다. 웹을 이루는 세가지의 요소인 HTML, CSS, JS로 불림과 동시에 자바스크립트는 단순히 웹에서 돌아가기만 하는 언어는 아니게 되었으니 말입니다.

지금은 **자바스크립트로 PC 프로그램을 프로그래밍**할 수도 있게 되었습니다. 사실상 자바스크립트의 기술이 강력해짐에 따라 웹의 환경이 점점 발전하고 있죠. 웹에서 노래를 듣고 이미지를 편집하거나 영상을 제작하기도 합니다. 웹 프로그래밍에서 가장 중요한 기술이기도 합니다. 인기가 없었지만 이제는 인기가 아주 많은 언어가 되었고 웹 프로그래밍의 세계가 급변하기 때문에 정말 다양한 오픈소스들이 나타나고 있습니다.

자바스크립트의 장점은 오픈소스라는 점이고 관련 기술이 빠르게 등장한다는 것입니다. 하지만 단점은 마찬가지로 기술이 빠르게 등장하기 때문에 트렌드가 급변한다는 것이죠. 뭐 그럼에도 자바스크립트는 아직 잘 살아있습니다. 웹 프로그래밍을 할 때에 백엔드를 자바로 할지언정 프론트는 자바스크립트를 택하는 경우가 많습니다.

<Line />

여기까지가 대략적인 프로그래밍 언어의 역사의 흐름입니다. 이외에도 **다른 자잘한 언어들은 많습니다.** 당장에 **파이썬** 같은 것들이 있죠. 하지만 프로그래밍 언어 세계에서의 큼지막한 맥들은 바로 위의 저것들입니다. 기계어부터 시작된 프로그래밍 언어들이 지금까지 다양한 언어를 만들어온 셈이죠. 앞으로도 프로그래밍 언어는 발전할 것이고 다양한 언어들이 생겨날 겁니다.

자바스크립트는 사실 그다지 큰 맥을 차지하지는 않았는데 저기에 들어가 있는 이유는 요즘은 컴퓨터와 웹은 떼려야 뗄 수 없는 관계에 있고 웹이 발달함에 따라 자바스크립트가 큰 위상을 얻었기 때문입니다. 현대에 이르러서는 웹 프로그래밍도 어마어마한 위치를 갖기 때문이죠. 아무튼, 이번 글은 여기까지 입니다. 다음 글은 드디어 웹에 대한 이야기입니다.

<NoteBottom number='1' first={true}>보통은 컴파일이라고 부르지만 어셈블리어를 기계어로 바꾸는 과정은 너무나도 단순해서 이것을 담당하는 소프트웨어를 어셈블러라고 부른다.</NoteBottom>
<NoteBottom number='2'>형편이 없다거나 수준이 낮다는 의미가 아니라 Low Level 언어라는 의미로 기계어에 가까운 언어들을 말한다. 반대어는 고급 언어로 인간들이 이해할 수 있는 좀 더 간편한 언어들을 의미한다.</NoteBottom>


이번 글은 개발을 위한 프로그래밍 지식 3편입니다. 프로그래밍 언어 자체에 대해서는 저번 글에서 이미 이야기를 했으니까 이번 글에서는 프로그래밍 언어의 역사에 대해 알아봅시다. 저번 글은 프로그램과 프로그래밍 언어 이 링크를 참고하시면 됩니다. 그럼 바로 본론으로 들어갑시다! 20세기 중반에 컴퓨터가 등장함에 따라 프로그래밍도 같이 시작되었다고 할 수 있습니다. 초창기 컴퓨터라고 할 수 있는 에니악과 그 비슷한 시기의 컴퓨터들은 오로지 계산을 위해서 존재했고 원하는 결과를 얻기 위해서는 긴 작업을 필요로 했습니다. 에니악의 경우에는 프로그래밍 언어가 아닌 천공 카드와 배선판을 이용해 프로그램을 실행했습니다. 이는 매우 불편한 작업이었고 심지어는 프로그램을 바꾸려면 배선판을 전부 손봐야했습니다. 이러한 문제점을 개선한 것이 바로 에드박과 에드삭 같은 컴퓨터들이었고, 실질적인 프로그래밍의 영역은 이 때부터 시작됩니다.

개발을 위한 프로그래밍 지식 3편 - 프로그래밍 언어의 역사


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, ProgrammingGuideMessage
} from '@/components/Post';

<ProgrammingGuideMessage />

이번 글은 개발을 위한 프로그래밍 지식 2편입니다. 저번 글에서는 컴퓨터에 대한 역사를 알아봤습니다. 이번 글에서는 프로그램과 프로그래밍 언어에 대해 알아보려고 합니다. 저번 글처럼 긴 글이 될 것 같지는 않습니다.

# 프로그램
**컴퓨터의 등장**으로 인해서 **인류는 복잡한 계산을 기계에게 시켜** 편해질 수 있었습니다. 기계들은 인간보다 빠르게 어려운 계산도 해내며 지치지도 않고 투정을 부리지도 않습니다. 그저 인간이 의도한대로 움직이는 게 컴퓨터의 역할이죠. 컴퓨터는 단순히 계산을 목적으로 하는 기계에서 좀 더 다양한 기능을 갖게 되었습니다. 오늘날의 컴퓨터는 영상도 재생하고 심지어 그 영상을 만들 수도 있죠.

지금 하고자 하는 말은 컴퓨터 안에 어떠한 것들이 있길래 이 컴퓨터들이 임무를 수행할 수 있냐는 것입니다. **기계는 스스로 생각을 할 수가 없습니다.** 반드시 누군가 뭘 해야 하는지 알려줘야 합니다. 그래서 컴퓨터에는 컴퓨터가 수행해야 할 목록들이 입력되어 있습니다. 입력된 내용에 따라 임무를 수행하죠.

**프로그램**이란 바로 그러한 목록을 말합니다. 프로그램은 특정한 알고리즘을 갖고 있으며, 그 알고리즘에 따라 움직입니다. 사용자가 무엇을 하면 프로그램은 무엇을 해야하는지에 대한 명령들의 모음이 프로그램이라고 할 수 있습니다.

<P>말이 어려운데 키보드 <Kbd>A</Kbd>를 <Strong>누를 경우에 컴퓨터는 어떠한 동작을 하게끔</Strong> 되어 있는 것. 이 프로그램입니다.</P>

![OS도 프로그램이다.](https://drive.google.com/uc?export=view&id=1EddEJ4oXMRa5-AYBDi-Y_O-Ts0lPcri4)

예를 더 들어보면, **컴퓨터의 OS**는 하나의 프로그램입니다. 어마어마하게 큰 프로그램이죠. **명령 프롬프트**나 **웹 브라우저**들도 프로그램입니다. 프로그램 안에 프로그램이 있는 셈이죠. 이렇게 **사용자의 입력을 받으면 특정한 반응을 하게 되어있는** 명령의 집합이 프로그램입니다.

컴퓨터에는 OS라는 프로그램이 있어서 사용자의 편의를 봐줄 수가 있는 것이죠. 메모를 해야 할 때면 메모장이 도와주고, 이미지를 봐야 할 때면 이미지 뷰어가 도와주는 겁니다.

## 프로그래밍과 프로그래머
프로그램을 만드는 행위를 **프로그래밍**이라고 합니다. 프로그램은 간단하거나 복잡한 어떠한 알고리즘을 적용해서 만들게 됩니다. 이런 일을 하는 사람들을 **프로그래머**라고 부르고 더 포괄적인 의미로는 개발자라고 부릅니다. 프로그래머들은 어떠한 무언가에 대해서 구조적으로 접근하고 그 무언가의 여러가지 측면을 생각할 수 있어야 합니다.

프로그래머가 프로그래밍을 통해 만드는 프로그램도 결국 사용자의 명령을 받아 그 명령에 따른 어떠한 반응을 하게끔 설정한 명령들의 집합체입니다. 하지만 굳이 명령어들의 집합체일 필요는 없고 그냥 명령어가 하나만 있고, 그 명령어를 실행하는 도구를 만들더라도 그것은 프로그램입니다.

우리는 개발을 위해 공부를 하고 있으니까 정확히는 프로그래머가 되는 것이 목적입니다.

## 프로그래밍 언어
![다양한 프로그래밍 언어가 있다.](https://drive.google.com/uc?export=view&id=1WEGirmiDkBI1VDqlG3KxNmgKb4Of7Dq9)

프로그래머들이 **컴퓨터와 대화를 하기 위해** 존재하는 것이 **프로그래밍 언어**입니다. 프로그래밍 언어는 **컴퓨터가 이해할 수 있고 사람도 이해할 수 있는 언어**이고, 일종의 약속입니다. 프로그래머들은 프로그래밍 언어를 통해서 프로그래밍을 이루어냅니다. 프로그래밍은 코드를 작성한다는 의미에서 **코딩**이라고도 부릅니다.

대화라는 표현 보다는 **명령**이라고 표현하는 게 더 적당할 것 같네요. 프로그래머는 프로그램을 통해 컴퓨터에게 명령을 내리는 사람인 것이고, **프로그래밍 언어는 명령을 내리기 위해 존재**하는 컴퓨터가 이해가 가능한 언어인 것입니다.

프로그래밍 언어는 아주 다양하게 많습니다. 많이 쓰이는 인기가 많은 언어도 있고 인기가 없는 언어도 있습니다. 프로그래밍의 세계는 트렌드가 존재하고 프로그래머들은 이 트렌드를 따라가는 게 보통입니다. 그래서 언어의 인기는 영구적이지 않고 상황에 따라 변합니다.

널리 알려져 있는 프로그래밍 언어는 다음과 같습니다. 사실은 더 많은데 유명하고 당장 생각나는 것만 넣어봤습니다.

* 자바
* C / C++ / C#
* 파이썬
* 자바스크립트
* 코틀린
* Go

# 프로그램의 목적
그렇다면 프로그램이 존재하는 이유는 무엇일까요. 간단합니다. **인간의 반복 작업을 최소화하고 편리함을 얻기 위함**입니다. 어려운 일, 복잡한 일은 컴퓨터에게 맡기고 인간은 다른 일에 몰두할 수 있게 만드는 겁니다. 그래서 세상에는 정말 다양한 프로그램들이 많이 존재합니다. 사람들이 어떤 불편함을 겪고있는지를 고려해서 특정한 사람들을 위한 프로그램을 제작하는 사람들도 있을 정도입니다. 프로그래머들은 이런 선구안을 가진다면 더 뛰어난 프로그래머가 될 수도 있습니다.

계산기로써의 측면이 강했던 과거의 컴퓨터들이 이러한 과정으로 인해 탄생했던 것입니다. 현재도 다양한 프로그램이 탄생했다가 사라졌다가를 반복하고 있습니다.

# 소프트웨어
소프트웨어는 같은 걸로 취급되는 경우가 많은데 사실은 **소프트웨어가 더 상위의 개념**입니다. 소프트웨어는 프로그램과 데이터로 구성됩니다. 소프트웨어에서 프로그램은 명령에 따라 동작하는 부분이고, 데이터는 프로그램에 사용되는 파일이나 프로그램의 동작에 의해 출력된 파일등을 말합니다.

데이터인 동시에 프로그램인 경우도 있는데 바로 프로그래머가 작성한 코드 파일입니다. 이는 파일 자체가 프로그램의 기능을 할 수 있기 때문에 데이터이기도 하고 프로그램이기도 합니다. 참 복잡한 이야기입니다.

<Line />

프로그램에 대한 이야기는 이정도면 충분한 것 같습니다. 사실은 더 깊게 들어갈 수도 있는데 그것은 나중에 기회가 되면 다뤄보도록 하겠습니다. 이번 글에서는 프로그램과 프로그래밍 언어에 대해서 알아봤습니다. 다음 글에서는 **프로그래밍 언어의 역사**에 대해서 알아볼까 합니다. 프로그래밍의 역사가 작성되면 웹에 대한 내용을 작성할 예정입니다.


이번 글은 개발을 위한 프로그래밍 지식 2편입니다. 저번 글에서는 컴퓨터에 대한 역사를 알아봤습니다. 이번 글에서는 프로그램과 프로그래밍 언어에 대해 알아보려고 합니다. 저번 글처럼 긴 글이 될 것 같지는 않습니다. 컴퓨터의 등장으로 인해서 인류는 복잡한 계산을 기계에게 시켜 편해질 수 있었습니다. 기계들은 인간보다 빠르게 어려운 계산도 해내며 지치지도 않고 투정을 부리지도 않습니다. 그저 인간이 의도한대로 움직이는 게 컴퓨터의 역할이죠. 하지만 말이죠 컴퓨터는 단순히 계산을 목적으로 하는 기계에서 좀 더 다양한 기능을 갖게 되었습니다. 컴퓨터는 어떻게 변해온 것일까요.

개발을 위한 프로그래밍 지식 2편 - 프로그램과 프로그래밍 언어


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';

<ProgrammingGuideMessage />

이번 글은 **개발을 위한 프로그래밍 지식 1편**으로, 이번 글에서는 간단하게 **컴퓨터의 역사**에 대해서 알아보려고 합니다. 컴퓨터의 역사를 알아보는 이유는 프로그램과 프로그래밍 언어와 밀접한 관계가 있기 때문입니다. 오늘날의 인류는 컴퓨터와 떼려야 뗄 수 없는 관계에 있고 개발자가 되려면 더더욱 그럴 겁니다. 그러니 프로그래밍 언어의 이야기를 하기에 앞서 컴퓨터에 대한 이야기를 한 번 해보도록 합시다.

다만, 시작하기에 앞서 미리 전해둘 것은 대략적으로 알아보는 것이기 때문에 심도 있게 들어가는 것은 아니라는 것입니다.

# 컴퓨터의 역사
우리는 보통 컴퓨터라고 하면 게임을 하거나 웹 서핑을 할 수 있는 일반적이고 보편적인 PC를 생각할 겁니다. 저도 그렇고 여러분들도 아마 그럴 겁니다. 그런데, 컴퓨터는 사실 계산장치입니다. 컴퓨터라고 하는 단어도 **계산하다**라는 의미의 라틴어인 **Computare**에서 왔다고 하기도 합니다. 그렇게 멀리가지 않아도 영단어인 **Compute**도 계산하다 라는 의미를 가졌습니다.

어원에서 알 수 있듯이 **컴퓨터는 연산을 돕는 도구**로부터 그 발상이 시작됐다고 할 수 있겠습니다. 말 그대로 **컴퓨터는 인간이 하기 어려운 계산을 편하게 하기 위한 기계**인 것입니다. 오늘날처럼 거창한 기능이 탑재된 것은 비교적 역사가 짧습니다. 그 이전에는 컴퓨터는 순수하게 계산을 위한 도구였습니다.

## 16세기 이전의 컴퓨터
오늘날의 컴퓨터의 이미지가 너무 강렬해서 주판을 컴퓨터라고 하면 미친놈 소리를 듣겠죠? 그런데 진짜로 **컴퓨터의 이전에 인간의 계산을 돕는 도구는 바로 주판**이었습니다. 오늘날의 **GUI**까지는 아니지만 직관적으로 수량을 표현할 수 있어서 계산을 편하게 만들어주는 주판은 고대의 메소포타미아 문명에서 처음 사용되었다고 전해집니다. 이 주판의 존재로 인해서 사람은 계산을 엄청 편하게 할 수 있었습니다.

![주판 / 출처 위키백과](https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/Soroban.JPG/300px-Soroban.JPG)

이 주판도 **하나 하나 계산하는 게 불편**해서 **하나의 도구로 계산을 편하게 하기 위해** 고안되었겠죠. 인간은 언제나 불편하면 편리함을 추구하려고 하는 특성이 있습니다. 인류의 문명이 발전해온 이유와 앞으로도 발전할 수 있는 이유는 바로 이 편리함을 추구하기 때문입니다. 아무튼, 주판은 **Compute**에 걸맞는 기능을 가진 녀석이죠.

하지만 이 이후, 16세기까지는 별다른 계산을 돕는 도구는 나타나지 않았습니다.

## 17세기, 기계식 계산기의 등장
![블레즈 파스칼 / 출처 위키백과](https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Blaise_pascal.jpg/220px-Blaise_pascal.jpg)

![파스칼라인 / 출처 위키백과](https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Arts_et_Metiers_Pascaline_dsc03869.jpg/330px-Arts_et_Metiers_Pascaline_dsc03869.jpg)

1642년, 프랑스의 **블레즈 파스칼**은 10진수의 **덧셈과 뺄셈**을 수행할 수 있는 기계식 계산기를 만들어냈습니다. 이 계산기는 자신의 아버지가 좀 더 편한 환경에서 업무를 봤으면 하는 배경에서 만들게 되었다고 전해집니다. 이 계산기의 이름은 **파스칼라인**이었습니다.

![고트프리트 빌헬름 라이프니츠 / 출처 위키백과](https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Christoph_Bernhard_Francke_-_Bildnis_des_Philosophen_Leibniz_%28ca._1695%29.jpg/259px-Christoph_Bernhard_Francke_-_Bildnis_des_Philosophen_Leibniz_%28ca._1695%29.jpg)

1672년에는 **고트프리트 빌헬름 라이프니츠**라는 사람이 파스칼이 만든 기계식 계산기를 개선하여 **나눗셈과 곱셈**을 가능하게 만들었습니다. **이진법**이라는 것도 라이프니츠가 만들어냈습니다.

이진법은 0과 1만으로 모든 숫자를 표현하는 방법입니다. 이 이진법은 오늘날에도 널리 사용되고 있습니다. 특히나 기계적인 부분에 말이죠.

## 19세기, 찰스 배비지와 해석 기관
![찰스 배비지 / 출처 위키백과](https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Charles_Babbage_-_1860.jpg/244px-Charles_Babbage_-_1860.jpg)

**영국의 수학자이자 철학자였던 찰스 배비지**는 굉장히 선구적인 눈을 갖고 있었습니다. 1822년에 그는 로그함수, 다항함수, 삼각함수를 계산할 수 있는 기계식 계산기를 고안했습니다. **차분 기관**이라고 불렀던 이 기계는 당시 기술로 만들기엔 돈이 너무 많이 들어서 1855년에야 만들어졌다고 합니다.

![차분 기관 / 출처 위키백과](https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/050114_2529_difference.jpg/300px-050114_2529_difference.jpg)

1835년에는 차분 기관이 만들어지기도 전인 그 시기에 차분 기관을 좀 더 업그레이드시킨 해석 기관을 고안하기도 했습니다. 찰스 배비지의 무서운 점은 이 해석 기관에 있습니다. 이 해석 기관은 수를 **저장**하고, 저장된 수를 **계산**할 수 있고, 기계를 **제어**할 수 있는 장치와 **입출력**까지 가능했는데, 정작 만들어지지는 못했습니다만 현대에 사용되는 컴퓨터에 전부 포함되어 있는 기능이었습니다.

학자들은 이 해석 기관을 **최초의 프로그래밍이 가능한 컴퓨터**로 인정하고 있다고 합니다. 찰스 배비지의 선구안이 돋보이는 순간이죠. 단순 이론 뿐이지만 이 이론은 시대를 넘어섰다고 할만합니다.

## 전쟁이 가져온 컴퓨터의 발전
전쟁을 할 때마다 인류는 발전해왔습니다. 다양한 기술들이 전쟁에 사용되기 위해 만들어지곤 하죠. 컴퓨터 또한 그렇게 발전하기 시작했습니다. 이 시기에는 다양한 연도에 다앙한 발전이 이루어져서 정확한 순서는 의미가 없습니다.

### 튜링 머신
![앨런 튜링 / 출처 위키백과](https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Alan_Turing_Aged_16.jpg/235px-Alan_Turing_Aged_16.jpg)

튜링 기계라고도 하는 이 개념은 1936년에 영국의 수학자인 **앨런 튜링**이 고안해냈습니다. 알고리즘과 계산에 대한 혁신적인 이론을 만들어냈죠. 튜링 머신은 실제로 존재하는 기계는 아니었고 그저 이론이었습니다. 이 이론이 지금의 컴퓨터와 상당히 비슷하다는 점을 생각해볼때 앨런 튜링이라는 이 사람도 대단한 사람입니다.

훗날 이 이론은 실현됩니다.

### 콘라트 추제의 Z 시리즈
![콘라트 추제 / 출처 위키백과](https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Konrad_Zuse_%281992%29.jpg/220px-Konrad_Zuse_%281992%29.jpg)

마징가Z 마냥 이름에 Z가 들어가는 컴퓨터가 있었습니다. 독일의 **콘라트 추제**라는 사람이 개발한 Z1과 Z3이라는 컴퓨터는 현대의 컴퓨터와 상당히 유사하다고 합니다. 특히나 Z3은 1941년에 만들어졌지만 워낙 마이너했기 때문에 알려져 있지 않았고, 그 존재가 나중에나 드러나게 되었습니다.

Z3은 앨런 튜링이 고안했던 튜링 기계의 실현이라고 할 수 있을 정도로 상당한 기능을 가졌던 컴퓨터라고 합니다. 실제로 본 적 없어서 모르겠지만요.

### 콜로서스
역사에 가려졌던 컴퓨터는 하나가 더 있었습니다. 바로 콜로서스라는 이름의 컴퓨터인데 이 컴퓨터가 알려져있지 않았던 이유는 국가 기밀이었기 때문입니다. 그래서 한참 나중에야 알려지게 되었습니다.

현재는 콜로서스가 **최초의 프로그래밍이 가능했던 전자 컴퓨터**라고 알려져 있습니다.

### 에니악
1946년에 존 에커트와 존 모클리에 의해 개발된 에니악은 상당한 크기를 자랑하는 컴퓨터였습니다. 에니악은 **Electronic Numerical Integrator And Computer**의 약자로 **ENIAC**이라고 표현합니다.

![에니악 / 출처 위키백과](https://upload.wikimedia.org/wikipedia/commons/4/4e/Eniac.jpg)

에니악은 어마어마한 연산이 가능했지만 그 기능과는 별개로 어마어마한 단점이 있었습니다. 상당하게 거대했고 프로그램을 바꿀 때엔 배선을 바꿔야했습니다. 부품의 교체가 필요했다는 것이죠. 이게 또 겁나게 많아서 어마어마한 시간을 잡아먹었다고 합니다. 게다가 어마어마하게 무거웠습니다. **컴퓨터 하나가 방 전체를 차지하는 것에 더불어 그 무게가 30톤**이라면 믿겠습니까? 이렇게 비효율적인 에니악이었지만 기능 자체는 훌륭했고 전쟁에 쓰이게 됩니다.

위 두 컴퓨터가 알려져 있었더라면 에니악은 최초의 컴퓨터라는 수식어를 아주 잠깐이라도 가지지 못했을 겁니다. 이 말을 반대로 말하면 최근까지는 최초의 컴퓨터라고 알려져 있었다는 것이죠.

<P>에니악은 기능은 훌륭했지만 단점은 많았기에 훗날 <Strong>존 폰 노이만</Strong>이라는 천재 과학자이 의해 개선됩니다. <Gray>(라고 알려지게 됩니다.)</Gray></P>

## 에드삭과 에드박
![존 폰 노이만 / 출처 위키백과](https://upload.wikimedia.org/wikipedia/commons/5/5e/JohnvonNeumann-LosAlamos.gif)

에니악의 단점은 프로그램을 바꿀 때에는 **아주 긴 작업을 해야 했기 때문에 컴퓨터를 종료했어야 했다**는 점이었습니다. 헝가리 출신으로 미국에서 수학자로 활동하고 있었던 **존 폰 노이만**은 이런 에니악의 단점을 커버하기 위한 어떤 이론을 제안했습니다. 바로 **프로그램 내장 방식의 컴퓨터**였죠.

어떠한 기억 장치를 마련해두고 이 안에 프로그램과 명령을 기억하는 것이었습니다. 상당히 효율적인 방식이었죠. 존 에커트와 존 모클리는 이 이론을 그대로 적용한 **에드박(EDVAC)**을 선보였습니다.

라고 하면 얕은 지식이고, 진실은 다릅니다. 존 에커트와 존 모클리는 이미 **에니악을 만들었을 때부터 그 단점을 파악**하고 있었고 **그들 자신들이 이를 개선한 것이 에드박**입니다. 세상에 폰 노이만 구조라고 알려진 프로그램 내장 방식은 사실상 두 사람의 아이디어인 것입니다. 이렇게 된 계기는 간단합니다.

에드박이 나오기 이전에, 허먼 골드스타인이라는 사람에게 연락을 받은 존 폰 노이만은 에드박에 대한 내용을 정리해서 골드스타인에게 전달했습니다. 하지만 골드스타인은 마치 존 폰 노이만이 프로그램 내장 방식을 제안한 것처럼 배포해버린 겁니다. 그래서 지금까지 폰 노이만 구조라고 불리죠.

아무튼 존 폰 노이만의 보고서에 대한 내용이 영국의 케임브리지 대학에까지 전달이 되어 그 곳에서 **에드삭(EDSAC)**이라는 컴퓨터가 개발되었습니다. **에드박 보다 먼저**말이죠. 참 신기한 일이 아닐 수가 없습니다. 에드삭은 모리스 월크스라는 사람에 의해 만들어졌고 대학에서 바로 사용할 수 있는 소형 컴퓨터였다고 합니다.

근데 제가 보기엔.. 에드삭과 에드박은 에니악의 크기와 비교해서 별반 차이는 없는 것 같습니다. 뭐 아무튼 결과적으론 존 폰 노이만도 컴퓨터의 역사에 큰 이바지를 한 셈이죠.

## 유니박
![유니박 / 출처 위키백과](https://upload.wikimedia.org/wikipedia/commons/5/55/Museum_of_Science%2C_Boston%2C_MA_-_IMG_3163.JPG)

에니악을 개발했던 존 에커트와 존 모클리는 회사를 하나 차리는데, EMCC라는 이름의 회사였습니다. 이들은 **바이낙(BINAC)**이라는 컴퓨터를 개발해서 판매하기 시작했습니다. **최초의 상업용 컴퓨터**입니다. 그 기능은 좀 구렸는지 오작동이 있었나봅니다. 아무튼, 현대적 의미의 컴퓨터의 시작을 알렸던 그들은 상업용 컴퓨터의 시작도 알린 셈입니다.

EMCC는 1950년에 레밍턴 랜드라는 회사에 인수되고 두 사람은 1951년에 **유니박(UNIVAC)**이라는 컴퓨터를 만들게 됩니다. 에니악보다 훨씬 작은 사이즈에 작은 부품이 들어갔지만 그 기능은 에니악의 20배에 달했고 1952년부터 본격적인 판매가 시작됩니다. 군부터 시작해서 민간 기업에까지 판매를 하게 되죠.

유니박은 총 46대가 생산되었고 당시 가격이 **150만 달러**로까지 점프하면서 상당한 위용을 자랑했다고 합니다.

<Line />

제가 아는 한, 컴퓨터의 역사적인 행보는 여기까지입니다. 이 이후의 컴퓨터들은 우리가 아는 현대의 컴퓨터들이죠. 이번 글에서는 간단하게 컴퓨터의 역사에 대해 들여다봤습니다. 다음 글에서는 이 컴퓨터라는 것 위에서 돌아가는 프로그램과 프로그래밍 언어에 대해 알아봅시다.


이번 글은 개발을 위한 프로그래밍 지식 1편으로, 이번 글에서는 간단하게 컴퓨터의 역사에 대해서 알아보려고 합니다. 컴퓨터의 역사를 알아보는 이유는 프로그램과 프로그래밍 언어와 밀접한 관계가 있기 때문입니다. 오늘날의 인류는 컴퓨터와 떼려야 뗄 수 없는 관계에 있고 개발자가 되려면 더더욱 그럴 겁니다. 그러니 프로그래밍 언어의 이야기를 하기에 앞서 컴퓨터에 대한 이야기를 한 번 해보도록 합시다. 우리는 보통 컴퓨터라고 하면 게임을 하거나 웹 서핑을 할 수 있는 일반적이고 보편적인 PC를 생각할 겁니다. 저도 그렇고 여러분들도 아마 그럴 겁니다. 그런데, 컴퓨터는 사실 계산장치입니다. 컴퓨터라고 하는 단어도 계산하다라는 의미의 라틴어인 Computare에서 왔다고 하기도 합니다. 그렇게 멀리가지 않아도 영단어인 Compute도 계산하다 라는 의미를 가졌습니다.

개발을 위한 프로그래밍 지식 1편 - 컴퓨터의 역사


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';

<Message color='yellow'>
  <p>웹 개발을 위한 CSS 가이드는 HTML에 대한 기초적인 지식을 필요로 합니다. <A type='blog' href='/post/2021-05-02-01-complete-html-guide'>이 링크</A>를 통해서 학습하시고 이 가이드를 학습하기를 권장드립니다.</p>
</Message>

이 글은 **웹 개발을 위한 CSS 가이드** 시리즈를 모아두는 것을 목적으로 하는 글입니다. CSS 가이드는 HTML 가이드에 이어서 웹 개발에 입문하는 분들을 위해 만들어진 두번째 가이드 시리즈 모음 입니다. 웹 개발을 위한 CSS 가이드는 CSS를 통해서 HTML의 스타일을 추가하고 자유롭게 디자인할 수 있도록 도와주고 원하는 웹사이트를 만들 수 있도록 도와주는 시리즈 입니다.

순수한 강의 목적인 것만은 아니며 스스로 복습하는 느낌으로 글을 작성하고 있습니다. 글이 작성되면 이 페이지에도 업데이트가 됩니다. 현재는 글들을 옮기는 중이기 때문에 아직은 준비되어 있지 않습니다.


이 글은 웹 개발을 위한 CSS 가이드 시리즈를 모아두는 것을 목적으로 하는 글입니다. CSS 가이드는 HTML 가이드에 이어서 웹 개발에 입문하는 분들을 위해 만들어진 두번째 가이드 시리즈 모음 입니다. 웹 개발을 위한 CSS 가이드는 CSS를 통해서 HTML의 스타일을 추가하고 자유롭게 디자인할 수 있도록 도와주고 원하는 웹사이트를 만들 수 있도록 도와주는 시리즈 입니다.

웹 개발을 위한 CSS 가이드 모음


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';

이 글은 개발에 대한 프로그래밍 지식을 공부하기에 앞서, 프로그램은 무엇이고, 프로그래밍은 또 무엇인지 알아보기 위한 **개발을 위한 프로그래밍 지식**의 모음집입니다. 어느정도 개념에 대해서 알고 넘어가면 좋지 않을까 싶어서 작성하는 글이 될 듯 합니다. 이 글은 앞으로 작성될 가이드들의 첫 글에 링크될 것 같습니다.

우리는 사실 프로그래밍이 뭐하는 것인지만 알면 됩니다. 그리고 프로그램이라는 것이 어떻게 돌아가는지만 알면 되죠. 하지만 우리는 이것들이 왜 탄생하게 되었는지도 간단하게 알아볼 겁니다. **컴퓨터의 역사**를 살짝 들여다보고 여기서부터 나타나게 되는 **프로그램과 프로그래밍 언어**에 대해 알아보는 시간을 가질 겁니다. 이것들 역시 지식이 될 수 있기에 한 번 재미삼아 알아보는 겁니다.

중요한 것은 이것은 강의가 아니라는 것입니다. 제가 공부를 하기 위해 모아놓은 지식들이고 틀린 정보가 들어있을 수도 있습니다. 이 경우엔 발견하는 족족 새롭게 고칠 예정입니다. 아무튼, 저와 함께 공부를 한다는 것에 의의를 두시면 됩니다. 이 글을 보는 사람들이 없어도 저는 이 블로그를 공책삼아 계속 기록해 나아갈 겁니다.

# 목차
<Message color='blue'>
  <p>이 아래에는 각 글로 연결되어있는 항목을 나열한 목록이 있습니다. 링크가 되어있지 않으면 작성 해야하는 컨텐츠이며 중간 중간에 링크는 없지만 굵은 글씨는 여러가지 파트로 구성되어 있는 주제임을 의미합니다.</p>
</Message>

* **컴퓨터와 프로그램**
  * [컴퓨터의 역사](/post/2021-05-03-01-history-of-computer)
  * [프로그램과 프로그래밍 언어](/post/2021-05-03-02-program-and-programming)
  * [프로그래밍 언어의 역사](/post/2021-05-03-03-history-of-programming-language)
* **웹과 프로그래밍**
  * [인터넷과 웹의 등장](/post/2021-05-04-01-origin-of-internet)
  * [웹의 역사](/post/2021-05-04-02-history-of-web)
  * [웹 프로그래밍](/post/2021-05-04-03-web-programming)

# 개발의 첫걸음
위의 지식들은 개발을 하기에 앞서 알아보는 사전 지식입니다. 이제부터는 본격적인 개발을 위한 공부를 진행해야합니다. 프로그래밍 언어는 많고 다양한 프로그래밍 분야가 있습니다. 게임을 개발하는 분야도 있고 윈도우 프로그램을 개발하는 분야도 있고 스마트폰의 발달로 인해서 생겨난 안드로이드 프로그래밍, iOS 프로그래밍도 있습니다.

여러분이 어떤 분야의 프로그래밍을 하려고 하는지에 따라 배우면 좋은 언어들은 달라집니다.

## 웹 개발
<P>이 블로그에 준비되어 있는 것은 현재는 <Strong>웹 프로그래밍 분야</Strong>이고 점점 늘어날 겁니다. <Strong>HTML</Strong>, <Strong>CSS</Strong>, <Strong>자바스크립트</Strong>가 기본적인 웹 프로그래밍에 쓰이는 언어들입니다. 웹 프로그래밍은 점점 발전하고 있어서 사용자와 웹 페이지간의 커뮤니케이션을 통해 다양하게 변화하는 다양한 웹 프로그램을 만들어낼 수 있습니다. 웹을 통해서 서비스하는 무언가를 구상하고 있다면 웹 개발을 배워야 합니다.</P>

## 앱 개발
**안드로이드**나 **iOS**에서 사용할 어플을 개발하는 언어로는 **자바**나 **코틀린**이 압도적으로 유명하고 데이터가 많습니다. 물론 만드는 게 모바일용 게임이라면 아래의 게임 개발의 영역입니다만은 그게 아니라면 자바나 코틀린을 배워 안드로이드 개발을 할 수 있고 **스위프트(Swift)**를 이용해 iOS 개발을 할 수 있습니다.

## 게임 개발
<P><A type='normal' href='https://unity.com/kr'>유니티 엔진</A>과 <A type='normal' href='https://www.unrealengine.com/ko/'>언리얼 엔진</A>을 필두로 세상에는 다양한 게임 엔진이 있습니다. 게임 엔진에 따라서 개발할 수 있는 언어도 천차만별이지만 일반적으로 게임 개발이라고 하면 <Strong>C</Strong>, <Strong>C++</Strong>, <Strong>C#</Strong>이 압도적으로 점유율이 높습니다. 게임 엔진과 함께 해당 언어들을 같이 배워보는 것도 좋을 것 같습니다. 물론 사용하는 게임 엔진에 따라 달라진다는 점은 다시 한 번 알려드립니다.</P>

## 윈도우 개발
윈도우 프로그램을 개발하는 언어로는 **자바**, **파이썬**, **C**, **C++**, **C#**, **자바스크립트** 등이 있습니다. 더 많은데 자바스크립트로도 윈도우 프로그램을 개발 할 수가 있다는 것이죠. 다소 정보가 부족해서 문제일 뿐.. 아무튼 윈도우 프로그래밍에 관심이 있다면 해당 언어들이 지원해주는 윈도우 개발을 위한 라이브러리 같은 걸 찾아보면 될 것 같습니다.

<Line />

<P>이것들 외에도 다양한 프로그래밍 분야가 있고 선택지는 많습니다. 이 블로그에서는 저것들 중에서 웹 개발을 중점으로 다룹니다. 웹 개발을 시작하고 싶으신 분들은 일단 <Strong>HTML</Strong>부터 함께 달려보는 게 좋을 것 같습니다. <A href='/post/2021-05-02-01-complete-html-guide' type='blog'>웹 개발을 위한 HTML 가이드 모음</A>을 참고해보세요! <Gray>(아직 목록의 내용을 하나 하나 채워가는 중입니다.)</Gray></P>


이 글은 개발에 대한 프로그래밍 지식을 공부하기에 앞서, 프로그램은 무엇이고, 프로그래밍은 또 무엇인지 알아보기 위한 개발을 위한 프로그래밍 지식의 모음집입니다. 어느정도 개념에 대해서 알고 넘어가면 좋지 않을까 싶어서 작성하는 글이 될 듯 합니다. 이 글은 앞으로 작성될 가이드들의 첫 글에 링크될 것 같습니다. 우리는 사실 프로그래밍이 뭐하는 것인지만 알면 됩니다. 그리고 프로그램이라는 것이 어떻게 돌아가는지만 알면 되죠. 하지만 우리는 이것들이 왜 탄생하게 되었는지도 간단하게 알아볼 겁니다. 컴퓨터의 역사를 살짝 들여다보고 여기서부터 나타나게 되는 프로그래밍의 역사를 알아보는 시간을 가질 겁니다. 이것들 역시 지식이 될 수 있기에 한 번 재미삼아 알아보는 겁니다.

개발을 위한 프로그래밍 지식 모음


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';

이 글은 **웹 개발을 위한 HTML 가이드**의 모음집 입니다. 처음부터 끝까지 순서대로 보기 쉽게 목록으로 가이드를 모아두었습니다. HTML은 웹 개발에 있어서 가장 아주 매우 기초적인 기술입니다. 웹 개발을 위한 HTML 가이드는 HTML을 모르는 분들이 HTML의 기능들에 대해서 배우고 웹 페이지의 뼈대를 구성할 수 있게 도와주는 시리즈 입니다. 웹 개발을 위한 HTML 가이드에서 저와 함께 HTML을 접하고 차근 차근 익숙해지는 것이 목적입니다. 아무것도 모르는 분들도 웹 개발을 시작할 수 있습니다. 저와 함께 시작해봅시다.

순수하게 강의 목적만 있는 것은 아니며 제가 다시 처음부터 공부한다는 생각으로 조사하고 복습하는 느낌으로 작성하고 있습니다. HTML은 웹 개발에 있어서 기초가 되는 부분인 만큼 중요하게 다루고 있습니다.

<Message color='y'>
  <p>HTML을 공부하기에 앞서 프로그래밍이란 무엇이고, 프로그래밍 언어는 무엇이며 웹과는 무슨 관련이 있는지를 다룬 <A href='/post/2021-05-02-02-complete-programming-knowledge' type='blog'>개발을 위한 프로그래밍 지식</A> 글을 먼저 보고 오시는 것을 추천드립니다.</p>
</Message>

# 목차
<Message color='blue'>
  <p>이 아래에는 각 가이드로 연결되어있는 항목을 나열한 목록이 있습니다. 링크가 되어있지 않으면 작성 해야하는 컨텐츠이며 중간 중간에 링크는 없지만 굵은 글씨는 여러가지 파트로 구성되어 있는 가이드임을 의미합니다.</p>
</Message>

* [HTML이란?](/post/2021-05-06-01-html-intro)
* [기본적인 문법](/post/2021-05-07-01-html-syntax)
* [태그의 유형](/post/2021-05-08-01-html-block-inline-tag)
* [태그와 태그의 관계](/post/2021-05-26-01-parent-child-sibling)
* [정비 - 개발환경 구축하기](/post/2021-06-02-01-development-environment)
* [HTML의 기본적인 구조](/post/2021-06-05-01-html-basic-structure)
* [시맨틱 태그](/post/2021-06-17-01-semantic-tags)
* [주석](/post/2021-06-19-01-comment)
* [공간 할당 태그(div, span)](/post/2021-06-25-01-div-and-span-tag)
* [제목 태그(h1~h6)](/post/2021-07-19-01-heading-tags)
* [문단 태그(p)](/post/2021-08-24-01-pragraph-tag)
* [번외 - **index.html**이라는 이름에 대해](/post/2021-09-04-01-filename-index)
* [정비 - Visual Studio Code 사용하기](/post/2021-09-13-01-vscode-install)
* [정비 - VSCode 추천 확장 프로그램](/post/2021-09-23-01-vscode-extension)
* [링크 태그(a)](/post/2021-09-25-01-link-tag)
* [번외 - 웹과 컴퓨터의 경로(주소)](/post/2021-10-02-29-about-path)
* **텍스트 관련 태그**
  * [굵기와 기울기 태그(b, strong, i, em)](/post/2021-10-30-31-text-bold-and-italic-tags)
  * [개행과 가로줄 태그(br, hr)](/post/2021-11-12-32-br-and-hr-tag)
  * [윗첨자와 아랫첨자 태그(sup, sub)](/post/2021-11-15-33-sub-and-sup-tag)
  * [텍스트의 추가, 제외 태그(ins, del)](/post/2021-11-17-34-ins-and-del-tag)
  * [취소선(s)과 밑줄 표현](/post/2021-11-26-35-u-and-s-tag)
  * [인용 태그(q, blockquote)](/post/2021-12-30-36-q-and-blockquote-tag)
  * [하이라이트 태그(mark)](/post/2022-01-10-37-mark-tag)
  * [small 태그](/post/2022-01-11-38-small-tag)
  * [code, pre 태그](/post/2022-03-29-39-code-and-pre-tag)
  * [번외 - 탈출문자 사용하기](/post/2022-04-14-40-string-escape)
  * 그 외의 텍스트 태그들
* **이미지 관련 태그**
  * 이미지 태그(img)
  * 심화 - 이미지맵 태그(map, area)
* **목록 관련 태그**
  * 순차 목록과 비순차 목록 태그(ol, ul, li)
  * 용어 설명 목록 태그(dl, dt, dd)
* **테이블 관련 태그**
  * 테이블 태그(table, tr, th, td)
  * **테이블 태그 심화**
    * 테이블 태그 심화 1) thead, tbody, tfoot
    * 테이블 태그 심화 2) colgroup, col, caption
* **폼 관련 태그**
  * form 태그
    * form 태그 심화
  * input 태그 1) 기본적인 속성
  * input 태그 2) 여러가지 타입
  * input 태그 3) 데이터 검증
  * textarea 태그
  * button 태그
  * select 태그
  * fieldset 태그
  * datalist 태그
* **멀티미디어 관련 태그**
  * 멀티미디어 태그들(audio, video, source)
  * iframe 태그
  * figure, figcaption 태그
* **레이아웃 태그들**
  * 레이아웃 태그 1) header, nav, main
  * 레이아웃 태그 2) aside, footer
  * 레이아웃 태그 3) article, section
* 메타데이터 태그들(meta)
* 요약 태그(details, summary)
* **CSS 관련**
  * style 속성
  * style 태그
  * link 태그
* **JS 관련**
  * script 태그
  * JS 이벤트와 관련된 속성들
* **HTML 심화**
  * 커스텀 속성 사용하기
  * 섹션(Section)과 아웃라인(Outline)
  * 웹표준에 대해
  * 브라우저 지원 고려하기

# 참고 사이트
아래의 사이트에선 HTML 뿐만 아니라 다른 웹 기술도 함께 학습할 수 있습니다. 저 또한 아래의 사이트들에서 많은 것들을 참고합니다. 보다보면, 또 코드를 작성해보면 익숙해지고 자연스러워집니다. 그렇기 때문에 여러분들에게도 추천드립니다.

<Ul>
  <li><A type='normal' href='https://www.w3schools.com/html/default.asp'>w3c schools</A> - 이 사이트의 이름은 w3c에서 비롯되었지만 큰 관련은 없습니다. 여기에서 html 뿐만이 아닌 다양한 웹 기술에 대해서 학습할 수 있습니다. 단점이라면 한글이 없습니다.</li>
  <li><A type='normal' href='https://developer.mozilla.org/ko/docs/Web/HTML'>MDN Web Docs</A> - 위와 비슷한 사이트입니다. 다양한 웹 기술에 대해서 학습할 수 있습니다. 한글 번역이 조금 이루어져 있습니다.</li>
</Ul>

# 다음 단계
여러분이 HTML을 학습했다고 해서 웹 프로그래밍을 할 줄 알게 된 것은 아닙니다. 여러분은 이제 더 높은 그라운드로 향해야 합니다. 그러기 위해서는 더 많은 공부를 해야하죠. HTML은 가장 기초가 되는 부분입니다. 이 기초가 되는 HTML 조차도 더 파고들면 난이도가 높아집니다.

<P>여러분이 기본적인 웹 프로그래밍을 위해서는 HTML과 함께 기초가 되는 <Strong>CSS</Strong><NoteTop number='1' />와 <Strong>Javascript</Strong><NoteTop number='2' />를 알아야 합니다. 그럼 이제 뭘 해야 하는지 알겠죠? 맞습니다! 공부를 하면 됩니다!</P>

## CSS 가이드
<P><Strong>CSS</Strong>는 마크업 언어인 HTML의 디자인을 만들어주는 <Strong>스타일 시트 언어</Strong>입니다. HTML로 마크업한 웹 페이지에 다양한 디자인을 부여할 수 있습니다. 기본적인 HTML 지식이 필요하기 때문에 어느정도는 익혀두고 CSS 가이드를 열람 하시기 바랍니다. 해당 가이드는 <A type='blog' href='/post/2021-05-02-03-complete-css-guide'>이 링크</A>를 타고 넘어가시면 됩니다.</P>

<NoteBottom number='1' first={true}>웹의 디자인을 담당하는 언어. 어떻게 꾸미느냐에 따라 웹의 분위기가 달라진다.</NoteBottom>
<NoteBottom number='2'>웹을 동적으로 컨트롤 할 수 있는 언어. HTML과 CSS를 동적으로 조정할 수 있다.</NoteBottom>


이 글은 웹 개발을 위한 HTML 가이드의 모음집 입니다. 처음부터 끝까지 순서대로 보기 쉽게 목록으로 가이드를 모아두었습니다. HTML은 웹 개발에 있어서 가장 아주 매우 기초적인 기술입니다. 웹 개발을 위한 HTML 가이드는 HTML을 모르는 분들이 HTML의 기능들에 대해서 배우고 웹 페이지의 뼈대를 구성할 수 있게 도와주는 시리즈 입니다. 웹 개발을 위한 HTML 가이드에서 저와 함께 HTML을 접하고 차근 차근 익숙해지는 것이 목적입니다. 아무것도 모르는 분들도 웹 개발을 시작할 수 있습니다. 저와 함께 시작해봅시다.

전체 포스트 36건

웹 개발을 위한 HTML 가이드 모음