[HTML 강좌] 4. HTML은 웹사이트를 구성하는 웹 페이지를 만들때 가장 기본적으로 사용되는 기술입니다.
HTML은 "웹 페이지의 구조를 정의하는 기술"
건물을 지을때 건축물의 기둥과 벽을 웹 페이지의 기둥과 벽을 정의하는 기술이 HTML 이다.
HTML은 작성하고자하는 웹 페이지가 문단으로 구성되는지, 리스트로 구성되는지, 링크가 있는지를 기술하고, 이를 웹 브라우져나 검색엔진에서 명확히 인지할 수 있도록 하는데 사용이 됩니다.
학습 목표
HTML을 이루고 있는 Tag의 종류와 사용하는 방법을 인지함으로써 HTML의 기본 구성을 이해합니다.
또한 간단한 예제를 Visual Studio Code를 사용하여 작성하며, HTML을 Visual Studio Code에서 어떻게 작성하고 작성된 HTML 을 확인하는지를 습득하게 됩니다.
HTML이란?
HTML은 "Hypertext Markup Language"의 약어입니다.
Hypertext : Hyper + Text 의 합성어로, 1960년대부터 나온 용어로, 인터넷이 발전하면서 부각된 용어입니다. 정보를 표현하는 Text와 Text가 가르키는 자료를 연결하는 참조로 구성된 문장을 의미합니다. Hyper 는 이미 많이 들어보신 HyperLink 를 의미하며, Text는 문장을 표현하는 글자를 의미합니다. 정보를 표현하는 Text와 정보가 가르키는 자료를 연결하는 HyperLink가 합쳐져서 Hypertext가 되었습니다.
HTML 기본구조
Element : HTML 의 단락을 구성하는 최소 단위이며, Opening Tag + Content + Closig Tag로 이루어집니다.
Opening Tag + Closig Tag : Tag는 한 쌍으로 이루어져 있습니다. Opening Tag 와 Closing Tag가 쌍으로 구성되지 않으면 이상한 결과가 발생하게 됩니다. 단, Content 가 없을 경우에는 Opening Tag가 생략되고, Closing Tag 만으로 표기가 가능합니다.
Content : 단락의 내용을 구성합니다. Text 로 이루어져 있습니다.
Single elements
HTML의 Tag의 기본 구조를 따르지 않는 Single elements 도 존재합니다.
Single elements는 주로 문서에 무언가를 첨부할때 주로 사용되며 Content를 가지지 않습니다.
많이 쓰는 예로 문서에 이미지를 첨부할때 사용하는 <img> 등이 있습니다.
Nesting elements
Element 안에는 다른 Element가 들어갈수 있습니다.
이를 Nesting elements라고 지칭합니다.
<p> 여기는 <string>막새바람의 HTML 이해하기</string>입니다.</p>
주의해야 할 점은 Nesting elements의 Openign Tag/Closing Tag는 감싸고 있는 Tag 안에서 엇갈려 기록되면 안됩니다.
<p> 여기는 <string>막새바람의 HTML 이해하기입니다.</p> </string>
Block level element, Inline element
HTML은 두가지 유형의 element가 있습니다.
#Block level element : element 의 앞과 뒤에 새로운 줄이 자동으로 만들어져 Block으로 구성됩니다.
문서의 구조를 만들때 사용하게 되는 element로 대표적으로 <p>, <li>등이 있습니다.
#Inline element : Block level element내에 포함되어 있습니다. 새로운 줄을 만들지 않고, 단순히 문장을 꾸미거나 문장을 다른 페이지로 연결하는등의 기능을 합니다. 대표적으로 <em>, <strong>등이 있습니다.
여기까지 HTML를 이루고 있는 Element를 구성하고 있는 Tag와 그 종류에 대해서 알아보았습니다.
다음 글에서는 Element에 대한 설정을 하는 Attributes(속성)에 대해서 설명하도록 하겠습니다.
댓글