[HTML] 웹개발자 2년차가 되어서야 정리해보는 HTML이란 무엇인가 | 마크업 언어

 

문득 매일 보는 HTML 코드이지만 HTML에 대해 제대로 공부한 적이 없다는 생각이 들었다. 
물론 학교에서도 배웠고, 실무하면서 필요한 정보만 쏙쏙 뽑아먹으며 공부했지만, 
학교에서 배운건 시험본 후 까먹어버렸고, 필요할 때만 얻었던 정보들은 휘발되어 버렸다. 

웹개발자로 일하면서, 누군가 나에게 HTML이 뭐에요?라고 물어본다면
나는 뭐라고 설명해줄 수 있을까? 
"어... 음... 그러니까 우리가 보는 브라우저에서 보이는 웹페이지의 뼈대를 만들어주는 거에요"라고만 설명할 수 있을 거 같다. 
이게 최선일까... 조금 부끄러워 진다. 

그래서 HTML에 대해 제대로 공부해보기로 했다. 

---

HTML이란? 

우선 한가지 말하고 싶은 것이 있다. 
HTML은 프로그래밍 언어가 아니다. 
프로그램을 만들기 위해 사용하는 언어가 아니라는 뜻이다. 

그럼 HTML이 뭔데?? 
HTML은 마크업 언어이다. 
마크업이라는 단어가 생소할 수도 있다. 

자 영화 포스터를 만든다고 생각해보자. 
처음에는 이런식으로 기획하지 않겠는가? 

 

이때 어디에 무엇이 들어가는지 설명하는 글씨들이 바로 마크업이다. 

---

우리가 워드에서 특정 글자의 색을 바꾸고, 크기를 바꿀 수 있는 이유는 
눈에 보이지는 않지만 그 문서가 마크업 언어로 이루어져있기 때문이다. 
그리고 웹페이지를 표현하기위해 사용하는 마크업 언어가 HTML이다. 

지금 이 글을 읽고있는 이 페이지도 마크업 언어로 이루어져 있다. 
지금 우클릭을 한 후 검사버튼을 눌러보자.

(PC에서만 된다. 크롬 이외의 브라우저는 다를 수도 있다. )
그러면 이런 코드들이 보일 것이다. 
이게 바로 HTML이다! 

 

HTML은 인간으로 치면 뼈에 해당한다. 
아무리 빵빵한 근육이 있어도 뼈가 없다면... (어우 상상하기 싫다)
그래서 웹페이지를 제작할 때 가장 먼저 작성하는게 HTML이다. 
이후 CSS로 살을 입히고, 자바스크립트로 움직이게 만든다!

---

마크업 언어가 무엇이고, 웹페이지에서 HTML의 역할에 대해 배웠다. 
이제 HTML에 더 깊게 알아보자!

HTML은 Hyper Text Markup Language의 약자이다. 
마크업 언어에 대해서는 이미 설명했고 하이퍼 텍스트가 무엇인지만 알면 
HTML에 대해 완벽히 설명할 수 있다. 

하이퍼 텍스트란 말 그대로 초월 텍스트, 뛰어넘는 텍스트라는 뜻이다. 
글자와 페이지 사이를 뛰어다니는 그림을 상상하면 된다. 
우리는 다른 페이지로 이동하기 위해 그 페이지와 연결되어 있는 글자 혹은 이미지를 클릭한다. 

이때 다른 페이지와의 연결을 '하이퍼 링크'라고 부르고, 
하이퍼링크를 포함하는 글자는 '하이퍼 텍스트', 이미지는 '하이퍼 미디어'라고 부른다. 
그러면 하이퍼텍스트 마크업 언어란 하이퍼텍스트를 표현하는 언어라고 생각하면 된다. 

---

자 이제 HTML이 무엇인가에 대해서는 모두 설명한 것 같다. 
다음 포스팅에서는 HTML을 작성하는 법에 대해 정리해보려 한다. 

---

참고한 사이트

https://www.w3schools.com/html/html_intro.asp

W3Schools.com

https://www.w3.org/WhatIs.html#:~:text=Hypertext%20is%20text%20which%20contains,video%20and%20sound%20%2C%20for%20example.

What is Hypertext?