[HTML] Chapter 01. HTML 기본 개념

1. HTML (Hyper Text Markup Language)은 무엇인가? 

HTML은 서버애플리케이션에서 작동하는 소프트 웨어를 실행하는 프로그래밍 언어를 말한다.

서버 애플리케이션이란 하드웨어에서 직접 실행하는 애플리케이션이 아닌 서버를 통해 작동한다. 

 HTML은 언어를 초월하여 데이터의 구조를 표현하는 언어(규칙)을 말한다.

HTML을 통해 구설된 구조와 데이터는 웹 브라우저를 통하면 시각적으로 표현된다.

 

즉, HTML은 웹 브라우저를 통해 데이터를 시각적으로 구조화하는 언어를 말한다.

HTML의 프로그램 구성은은 글자이지만 출력되는 방식은 이미지이다. 

 

2. 웹 브라우저 (Web Browser)은 무엇인가? 

HTML언어를 받아 시각적으로 표현해주는 애플리케이션이다.

웹 브라우저를 거치지 않은 HTML은 단순한 데이터의 집합체이다.

때문에 시각적인 구성을 가지고 사용자가 사용하기 위해서는 웹 브라우저를 거쳐야한다. 

 

3. 마크업(Mark up)은 무엇인가? 

데이터를 구조화하는 방법을 말한다.

마크업을 통하여 데이터의 복합적인 모양을 표현하기 쉽다. 

 

위와 같이 독립적인 데이터를 각각 개별적인 모양으로 조합하거나 혹은 포함관계로 구성할 수 있다.

이러한 데이터의 범위나 포함, 정렬을 마크업이라고 한다. 

 

데이터 사이의 포함관계를 표현하는 언어라는 점을 반드시 기억하자.

이를 이해한다면 HTML 전반적인 내용이 더욱 쉽게 이해될 것이다. 

 

4. 태그 (Tag)란 무엇인가?

컴퓨터에게 데이터의 구별을 알리기 위한 방법이다.

컴퓨터는 사람과 글을 읽는 방법이 다르기 때문에 각각의 데이터를 <>라는 태그를 통해서 구별한다.

태그는 시작 태그와 종료 태그가 한 쌍으로 구성되어 있으며 그 사이에 데이터를 넣어서 구성된다. 

 

즉, 컴퓨터에게 모양을 설명하기 위해서는 컴퓨터의 언어로 설명해야 한다는 것이다.

다만 컴퓨터는 데이터의 경중을 판단하지 않고, 사람이 구성한 규칙에 의해 인식한다. 

 

5. 들여쓰기 (Indent)란 무엇인가?

태그의 포함관계를 보기 좋게 하기 위해 Tab키를 이용하여 들여 넣는 방법을 말한다.

문장의 시작점이 달라져 각 데이터의 구성과 정보를 ‘사람’이 인지하기 쉽다.

 

프로그래밍은 대부분 협업 관계이기 때문에 반드시 들여쓰기를 통해 구성하는 데이터를 명확히 구분할 수 있어야 한다. 

 

6. 웹 페이지의 구조를 보는 방법

F12를 통해 웹 페이지의 내부 구조를 파악할 수 있다. 해당 페이지를 보면 마크업과 데이터를 확인할 수 있다.

웹 페이지를 보면 html 태그 안에 head와 body가 있고, 이 사이에 수많은 데이터가 포함된 것을 확인할 수 있다. 

 

7. 확장자란 무엇인가?

확장자는 운영체제에서 데이터를 실행할 때 사용하는 소프트웨어를 지정하는 것을 말한다.

예를 들어 jpg는 이미지로 인식하도록 운영체제가 규칙을 가지고 있다.

txt를 비롯한 pptx, html 등 다양한 소프트웨어를 확장자로 구분할 수 있다.

html을 공부할 때 확장자를 보고, 수정하는 것이 중요한 이유는 '메모장'을 가지고 마크업 과정을 진행할 수 있기 때문이다. 

 

메모장에 html 문서로 데이터를 작성한 후 확장자를 html로 변경하면 다른 툴이 없이도 프로그래밍을 진행할 수 있다. 

 

8. 태그의 속성을 이해하자

 html의 태그는 <형식 속성=”값”> 자료 </형식>가 기본 속성이다. 일부 태그는 </형식> 태그 없이 단독으로 사용되기도 하지만 대부분의 태그는 위와 같이 적용된다. 태그에서 속성은 형식의 표현을 변경해주는 기능을 가지고 있다. 속성의 종류는 수천가지이므로 모든 속성을 이해하고 암기할 수는 없다. 때문에 해당 구조를 이해하자.