> For the complete documentation index, see [llms.txt](https://docs.sysout.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sysout.co.kr/web/develop-page/html.md).

# HTML

## HTML

{% hint style="info" %}
[HTML](https://developer.mozilla.org/ko/docs/Glossary/HTML) (Hypertext Markup Language,하이퍼텍스트 마크업 언어)는 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다. 이는 개발자로 하여금 복잡하게도 간단하게도 프로그래밍 할 수 있습니다. HTML은 [elements](https://developer.mozilla.org/ko/docs/Glossary/Element)로 구성되어 있으며, 이들은 적절한 방법으로 나타내고 실행하기 위해 각 컨텐츠의 여러 부분들을 감싸고 마크업 합니다. [tags](https://developer.mozilla.org/ko/docs/Glossary/Tag) 는 웹 상의 다른 페이지로 이동하게 하는 하이퍼링크 내용들을 생성하거나, 단어를 강조하는 등의 역할을 합니다. 

참조 : [모질라 개발자 포럼 문서](https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started#html%EC%9D%B4%EB%9E%80)
{% endhint %}

### HTML의 구조

HTML은 태그(Tag) 형식으로 구조를 표현한다. 예를 들면 다음과 같다.

```html
오늘 점심 메뉴는 <b>피자</b>입니다!
```

![](/files/VSG8rArI63lH14P705ZH)

태그를 중첩하여 다양한 구조를 표현할 수 있다. HTML은 문서 객체 모델(DOM, Document Object Model) 형태로 표현될 수 있으므로 태그들을 각 계층별로 해석할 수도 있다.

```markup
<table>
    <thead>
        <tr>
            <th>이름</th>
            <th>가격</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>아메리카노</th>
            <th>1500</th>
        </tr>
        <tr>
            <th>카페라떼</th>
            <th>2300</th>
        </tr>
        <tr>
            <th>바닐라쉐이크</th>
            <th>3000</th>
        </tr>
    </tbody>
</table>
```

![(좌) 소스코드 (중) 영역구조 (우) DOM](/files/nqbSTkEY6CvmNVBv4co7)

태그에는 속성(Attribute)을 부여할 수 있다. 이러한 속성들을 이용하여 같은 태그이지만 다른 표현이 가능하다.

```markup
<div align="left">Hello World!</div>
<div align="center">Hello World!</div>
<div align="right">Hello World!</div>
```

즉 HTML을 배운다는 것은 다음을 배우는 것과 같다.

* 각각의 태그 별 효과와 특징
* 각각의 태그에 부여할 수 있는 속성