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은 이 태그로 이루어져 있다고 볼 수 있는 것이죠. 이번 글에서는 이 태그의 기본적인 문법에 대해서 알아보도록 하겠습니다.

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

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