[HTML] ① HTML 소개

 

▶HTML이란?

HTML은 Hyper Text Markup Language의 약어입니다.

 

하이퍼텍스트(Hyper Text)는 링크로 연결된 텍스트 페이지를 말합니다.

예를 들어 지금 보고 있는 블로그 페이지도 하이퍼텍스트가 되겠죠?

현재의 포스팅을 끝까지 다 읽어야 다음 포스팅으로 갈 수 있는 것이 아니고, 언제든지 링크를 통해 다른 포스팅이나 내 블로그, 블로그 홈으로 갈 수 있는 것처럼

링크를 통해 자유롭게 이동이 가능하다는 것이 하이퍼텍스트의 가장 큰 특징이라고 볼 수 있겠습니다.

 

 

▶HTML 요소 구성

HTML은 다른 언어들보다 느슨한 문법을 가지고 있습니다.

구성에 맞지 않게 요소를 작성하더라도 에러 없이 요소가 제대로 렌더링되고 에러 또한 노출되지 않습니다.

그렇다 보니 표준을 준수하지 않고 코드를 작성하다 보면, 에상하지 못한 문제가 발생해 유지 보수 비용이 커집니다.

이런 특성에 대해서는 개발자가 항상 주의하며 코드를 작성해야 합니다.

 

요소는 크게 3가지 Content(내용), Start Tag(시작 태그), End Tag(종료 태그)로 나뉘며

이 3가지 구조를 합쳐 Element(요소)라고 부릅니다.

 

▷ Start Tag와 End Tage

단어 뜻 그대로 요소의 시작과 끝을 의미하는 태그입니다.

위의 그림을 참고하면, <p>가 Start Tag, </p>가 End Tag입니다.

태그는 <>로 구성되며 End Tag는 /가 포함됩니다. 대부분의 요소는 <div></div>, <article></article>처럼 Start Tag와 End Tag를 쌍으로 갖습니다.

 

▷ Void 요소

하지만 <input>이나 <hr>, <meta>, <link>처럼 End Tag가 없는 태그들 또한 존재합니다.

이런 요소를 Void 요소라고 부릅니다. Void 요소는 End Tag를 작성하지 않아도 일반 요소처럼 작동합니다.

Start Tag내에 /를 넣어 </input>처럼 작성하기도 하는데, 이런 방식을 Self-closing이라고 부릅니다.

Void 요소는 Start Tag만 작성하거나 Self-closing 형태로 작성하거나 두 가지 방식 중 선택해서 사용합니다.

 

▷ Content와 Element

Content는 Start Tag와 End Tag 사이의 내용을 의미합니다. 위의 그림에서 "Hello"라는 텍스트가 Content에 해당합니다.

Element(요소)는 앞서 설명한 Start Tag, End Tag, Content를 모두 합친 하나를 의미합니다.

 

▷ Attributes(속성)

속성(Attributes)는 태그의 동작을 제어하도록 사용자가 지정하는 값을 의미합니다.

다음 코드처럼 여러 방법으로 태그에 속성을 부여합니다.

<!-- 값을 넣지 않고 속성을 지정하는 방법 -->
<input disabled />

<!-- 따옴표 없이 값을 넣어 속성을 지정하는 방법 -->
<input value=hello />

<!-- 따옴표로 값을 넣어 속성을 지정하는 방법. 작은 따옴표, 큰 따옴표 모두 가능 -->
<input tpye="checkbox" />

id나 class, style처럼 모든 요소가 사용할 수 있는 속성도 있지만 checked나 autoplay처럼 HTML 요소의 종류에 따라 사용하는 속성이 정해지기도 합니다.

 

---

여기까지 HTML 소개를 해보았습니다 :)