by
Dec 19. 2016
html 이란? 속 시원한 HTML 뜻 풀이
HTML의 의미를 명확하게 알아보자
HTML : Hyper Text Markup Language
하이퍼 텍스트 마크업 랭귀지
html이란 무엇인가?
html 뜻
html 개념
여러분들은 HTML에 대해 잘 이해하고 계신가요?
요즘 HTML은 웹개발자와 웹디자이너뿐만 아니라 일반인들도 블로그를 통해서나 대학교 교양 강의, 그리고 그룹 스터디로 많이들 접하고 있습니다. 그만큼 쉽고 빠르게 배울 수 있고 내 손으로 홈페이지나 블로그를 꾸밀 수 있기 때문이죠.
하지만 HTML이 정확히 무슨 뜻인지, 그리고 왜 HTML을 이용하여 웹 문서를 작성해야 하는지에 대해 궁금증을 가져본 적은 없신가요?
저는 HTML을 공부하면서 '보여지는 결과 화면은 같은데, 왜 다른 태그가 존재하는 것일까?'라는 것이 제일 처음으로 궁금했습니다. (저만 궁금한 것일 수도....)
제가 왜 이런 의문을 가졌었는지, 아래의 HTML 코드에서 주황색 줄이 쳐진 부분을 잠깐 살펴보도록 하죠. 서로 다른 세 개의 태그가 있습니다. 이탤릭체로 표현하는 <i> 태그, 주소를 표현하는 <address> 태그, 인용구를 표현하는 <cite>태그.
이처럼 쓰임이 다른 세 가지 태그가 존재하는 반면, 오른쪽의 결과 화면에서는 모두 같은 결과를 보여주고 있습니다.
이렇게 같은 결과를 보여주는 태그를 왜 굳이 각각 다른 태그로 적어야 하는지 궁금했던 적은 없으신가요?
이러한 것들이 궁금하다 보니, HTML이 정확히 무슨 의미인지, 왜 써야 하는지가 궁금했습니다. 그런데 아무리 검색을 해봐도 HTML의 의미를 속 시원하게 알려주는 곳은 없었습니다. (한번 네이버와 구글에 검색해보세요. HTML이 무슨 의미인지... 저만 이해 못하는 것일 수도....)
그래서 저는 열심히 찾아 공부했고, 그 결과 명확하고 속이 시원한 해답을 찾아냈습니다. 그리고 맹목적으로 HTML 코드만 열심히 따라 하는 비전공 지인들에게 HTML의 뜻이 무엇인지 물어보고 잘 모르면 설명을 해주며 온갖 오지랖은 혼자 다 떨며 지냈습니다. (다행인 것은 피드백이 좋아 아직도 계속 오지랖 떨고 있다는...)
이제는 온라인에서 오지랖을 떨 차례인 것 같네요.
초등학생도 이해할 수 있도록 쉽게 설명해드릴 테니 HTML을 명확하게 이해하시어 찝찝함이 없이 재밌게 HTML을 학습하시길 바라겠습니다.
# Hyper Text
하이퍼 텍스트(Hyper Text)
Hyper의 뜻은 '뛰어넘다', '초월하다'의 의미를 가지고 있습니다. Hyper Text란 글자 그대로 직역해보면 'text를 뛰어넘는다'는 의미를 가지고 있죠. 그렇다면 대체 'text를 뛰어넘는다'는 것이 어떤 의미인지 차근차근 알아보도록 합시다.
1. text 란?
제일 먼저 text가 무엇인지 알아보죠. text란 상대방에게 의미를 전달하는 목적을 가지고 숫자(123...), 알파뱃(abc...), 기호(^%$...) 등으로 글 또는 문서를 표현하는 것을 말합니다. 사실 text의 사전적 의미를 모르는 분들은 없을 겁니다.
하지만, text 정보를 우리가 어떻게 접근하며, 원하는 것을 어떻게 습득하는지에 대해 고민해본 적은 사실 없을 겁니다.
예를 들어 책을 읽는다고 가정해봅시다.
우리는 책 표지를 펴고 한 장 한 장 손으로 넘기며 책을 읽습니다. 목차를 보고 원하는 정보가 있는 페이지를 확인한 후, 책장을 넘깁니다. 그리고 원하는 페이지에 도달하여 위에서 아래로 쭈욱 훑어보면서 원하는 정보를 찾죠.
어때요. 뭔가 순차적으로 접근한다는 생각이 들지 않나요? 우리나라 기준으로 왼쪽에서 오른쪽으로, 위에서 아래로 Text를 읽어 내려가면서 정보를 습득합니다. 정보에 대해 순차적으로 접근하는 것이죠.
이것이 바로 text입니다. 정보에 순차적으로 접근하며, 정보를 순차적으로 습득합니다.
사실, 일반적인 text의 성질을 갖고 있는 수 백 장 또는 수 천 장이나 되는 두꺼운 책장을 하나하나 넘기며 원하는 정보를 찾기에는 너무나 귀찮고 힘이 듭니다. 한 번에 원하는 페이지와 원하는 내용으로 순간 이동을 했으면.... 하는 생각이 들기도 하죠.
한 가지 방법이 있는데 한 번 따라 해 보세요. 집에 있는 가장 두꺼운 책 아무거나 꺼내서 목차 페이지를 펼쳐보세요. 그리고 그 목차들 중에서 하나를 손가락으로 눌러보세요. "얍!!" 이렇게 외치면서. 어때요. 매직입니다.
...ㅈㅅ
2. Hyper Text (하이퍼 텍스트) 란?
Hyper Text는 'Text를 뛰어넘다'는 의미를 가지고 있다고 말씀드렸습니다. 앞서 말씀드린 텍스트의 정보에 대한 접근인 순차적 접근을 뛰어넘는다는 의미를 가집니다.
바로 이런 것이죠.<-요거 한번 클릭해보세요.
어때요? 지금 보고 계신 제 글과는 다른 페이지로 그냥 한 번에 이동하죠?
책을 펼치고 목차를 확인하고 해당 페이지로 책장을 넘겨 이동하는 일반적인 Text 방식과는 확실히 다릅니다. 클릭 한 방이면 이동하죠.
이제 다시 저 링크를 클릭해서 들어가 보시면 아래와 같은 목차가 보일 겁니다.
해당 링크로 들어가셔서 목차들 중에서 아무거나 한번 눌러보세요. 어때요. 다른 페이지로 이동하는 것이 아닌, 같은 페이지 내의 다른 정보로도 순간 이동이 됩니다.
보셨나요? 이게 바로 하이퍼 텍스트입니다. 일반적인 텍스트의 순차적 접근법을 뛰어넘는 비순차적 접근법을 표현하고 있는 것이죠. 다른 페이지로 이동하는 것과, 같은 페이지 내의 다른 데이터로 이동하는 것. 이것이 바로 하이퍼 텍스트의 개념입니다.
그렇다면 여기서, 어떻게 클릭만 하면 해당 페이지로 순간 이동하는지 그 방법에 대해 궁금해집니다. 그렇죠?
그래서 다음에 설명을 드릴 것이 바로 Markup Language(마크업 랭귀지)입니다.
# Markup Language
마크업 랭귀지는 '표시하다'를 의미하는 마크업과 '언어'라는 의미를 가진 랭귀지가 합쳐진 것입니다.
'마크업'의 의미와 '언어'의 의미를 각각 가볍게 알아보고 본격적으로 마크업 언어에 대해 알아봅시다.
1. Markup 이란?
'마크업'이란 어딘가에 Mark, 즉 표시를 해두는 것을 뜻합니다.
그렇다면 무엇을, 대체 왜 표시하는지 알아보도록 하죠.
예 1) 표시가 없을 때
양말 노점 노하우 전수 30년 노점 장사를 통해 쌓은 노하우를 직접 전수해드립니다. 하루 매출 100만 원 보장! 대전 서구 XX카페 010-8XX2-XX21
예 2) 표시가 있을 때
- 제목: 양말 노점 노하우 전수
- 내용: 30년 노점 장사를 통해 쌓은 노하우를 직접 전수해드립니다. 하루 매출 100만 원 보장!
- 주소 및 연락처: 대전 서구 XX카페 010-8XX2-XX21
예 1) 보다는 예 2)가 보기에 편합니다. 왜냐하면 제목이 어떤 것인지, 내용이 어떤 것인지. 그리고 단락이 구분이 되어있기 때문이죠. 이 모든 것은 마크업 언어를 통해 구조적으로 표현이 가능합니다.
제목이 어디서부터 어디까지인지, 본문은 어디부터인지, 주소는 어디에 있는지, 강조할 부분은 어디인지 등 등 많은 것을 구조적으로 표현할 수 있는 것이죠.
문서를 구조적으로 표시하기 위한 것이 마크업의 개념입니다.
2. Language 란?
Language. 언어라는 뜻이죠. 이 뜻을 모르는 분들은 없을 것입니다.
하지만 HTML에서 말하는 언어라는 것은 영어, 한국어, 프랑스어 등과 같이 사람과 사람 사이의 의사소통을 하기 위한 언어가 아닙니다. 컴퓨터와 의사소통을 하기 위한 언어인 것이죠.
우리의 컴퓨터는 정말 너무나 단순합니다. 우리가 시키지 않는 일은 절대 하지 않죠. 자기가 알아서 할 줄 아는 것은 없습니다. 컴퓨터에 무언가 일을 시킬 때 명령을 해야 하는데, 컴퓨터에 마이크 꽂고 얘기한다고 해서 컴퓨터가 알아듣는 것이 아닙니다. 컴퓨터가 이해할 수 있는 방식과 방법대로 명령을 해야 한다는 것이죠.
하지만 컴퓨터가 이해할 수 있는 언어는 인간이 이해하기에 너무나 어렵습니다.
음.....그래..... Neo가 된 기분...그 사이를 적절하게 연결해주는 것이 바로 C, JAVA, Python 등 이러한 언어들입니다. 컴퓨터와 인간이 서로 의사소통을 할 수 있도록 해주는 것이죠.
따라서 HTML의 Markup Language를 통해 우리는 컴퓨터에게 명령하여 무언가 일을 시키는 것입니다.
3. Markup Language
마크업도 알았고, 언어도 알았으니 HTML에서의 마크업 언어가 왜 쓰이는지에 대해 좀 더 자세히 알아보죠.
HTML에서 얘기하는 마크업 언어(Markup Language)도 C, JAVA 등의 언어와 마찬가지로 컴퓨터와 의사소통하고 명령을 내리기 위한 언어입니다. 우리가 웹 상에 표시하고 싶은 내용들을 HTML 문서로 작성하면, 컴퓨터는 웹브라우저를 통해 HTML 문서를 읽어 들이고 모니터에 표현하여 우리에게 보여주는 것이죠.
* 여기서 잠깐, 웹 브라우저란?
웹을 둘러볼 수 있게 하는 응용 프로그램을 말합니다. 영어로는 browser.
웹 브라우저: 크롬, 사파리, 오페라, 인터넷 익스플로러, 파이어폭스이렇게 우리는 HTML의 마크업 언어를 통하여 웹 브라우저에게 '이렇게 표현해달라', '저렇게 표현해달라'라고 명령을 내리는 것입니다.
처음에 언급한 Hyper Text를 가능하게 하는 Hyper Link 기능도 마크업 언어가 담당합니다.
바로 <a></a>라는 태그를 통해서 구현하죠.
<a href="http://www.naver.com">네이버로 가기</a>
이렇게요. 이러한 HTML 태그를 웹 브라우저가 읽어 들여 Hyper Link 기능을 구현하여 보여주는 겁니다.
*여기서 잠깐, 태그(Tag)란?
마크업 언어는 문서의 구조를 표현하는 언어라고 했습니다. 그 표현하는 방법을 '태그'라는 것을 통해서 하게 되죠. 태그는 꼬리표를 뜻합니다. 우리가 옷을 새로 사면 태그가 달려있죠.
"옷 환불하기 전에 택 떼 지마!!!". 예 맞아요 그거예요.
Tag이러한 Tag의 존재 이유는 바로 이것이 달려있는 상품에 대한 정보들을 갖고 있기 때문입니다. HTML에서 Tag의 기능도 마찬가지입니다. <a>라는 태그를 사용하면 하이퍼 텍스트 기능을, <strong> 태그를 쓰면 굵은 글씨로 강조하는 기능을 수행해달고 표시해두는 것입니다.
여기서는 태그의 개념만 알고, 각각의 종류와 기능들은 다른 곳에서 학습하시기 바랍니다.
* 마크업 언어를 써서 표현하는 이유_1. 웹 브라우저에게 명령하기 위해
내가 만든 컨텐츠를 잘 표현해달라고 컴퓨터에게 명령을 해야 합니다. 그 명령을 마크업 언어를 통해 할 수 있으며, 웹 브라우저는 이러한 명령들을 읽어 들여 컨텐츠 제작자가 원하는 방향대로 정확하게 문서를 표현하는 것입니다. 웹 브라우저에게 명령하기 위해 마크업 언어가 필요한 것이죠.
* 마크업 언어를 써서 표현하는 이유_2. 문서 작성에 대한 협업과 유지 보수를 위해
- 제목: 양말 노점 노하우 전수
- 내용: 30년 노점 장사를 통해 쌓은 노하우를 직접 전수해드립니다. 하루 매출 100만 원 보장!
- 주소 및 연락처: 대전 서구 XX카페 010-8XX2-XX21
위의 예처럼 마크업 언어를 통하여 문서를 구조적으로 표시를 해두는 것은, 같이 문서를 작성하는 개발자나 디자이너들과의 협업을 위해서 필요합니다. 어디가 주소고 어디가 제목이며 어디가 본문인지 태그만 봐도 알 수 있기 때문이죠. 또한 유지 보수하며 수정하기에도 좋게 하는 것입니다.
* 마크업 언어를 써서 표현하는 이유_3. 정보를 수집하는 검색 엔진에게 정확한 자료를 제공하기 위해
우리 인간의 눈에만 보기 좋으라고 마크업 언어로 표시하는 것은 아닙니다. 또 다른 이유가 있죠. 보기에 좋다는 것은 바꿔 말하면 찾기 쉽다는 것이고, 찾기 쉽다는 것은 검색이 가능하다는 것을 뜻합니다. 검색이 가능하면 원하는 정보를 손쉽게 습득할 수 있는 것입니다. 컴퓨터 또한 마크업 언어의 태그를 통하여 정보를 손쉽게 습득할 수 있는 것입니다.
웹 사이트를 마구 마구 돌아다니면서 데이터를 자동으로 수집하는 웹 크롤러라는 것이 있습니다. 보통은 네이버, 구글과 같은 검색 엔진들이 최신 데이터를 모으기 위해 사용하는 자동화 기술이죠. 한마디로 로봇이 이쪽저쪽을 돌아다닌다고 보시면 됩니다.
https://www.flickr.com/photos/ravi-shah/20765827616이렇게 검색 서비스 업체들은 웹 크롤러를 통하여 항상 최신 웹 데이터들을 긁어모으고 저장을 해두며 검색을 하는 사용자들에게 검색 결과를 제공해줍니다. 그런데 컴퓨터는 어떤 게 제목인지 어떤 게 내용인지, 그리고 어떤 게 주소인지 태그 없이 내용만을 읽고서는 스스로 판단할 수 없습니다.
하지만 우리 인간은,
양말 노점 노하우 전수!
30년 노점 장사를 통해 쌓은 노하우를 직접 전수해드립니다. 하루 매출 100만 원 보장!
대전 서구 XX카페 010-8XX2-XX21
이렇게만 적어도 짐작으로 제목이 어디인지, 본문 내용이 어디인지, 주소가 어디인지 읽으면서 알 수 있죠. 물론 태그가 있다면 좀 더 빠르고 쉽게 구조를 파악할 수 있습니다.
반면에 컴퓨터는 모릅니다. 저 글자들을 읽고 알아서 해석할 수 있는 능력이 없습니다. 그래서 이 웹 크롤러라는 로봇이 HTML 문서 내에 있는 Tag를 읽고 그 태그를 통해 구조를 알 수 있는 것입니다. <h1> 태그가 표시하고 있는 부분이 제목이겠구나, <address> 태그가 표시하고 있는 부분이 주소겠구나 하면서 말이죠. 태그 자체가 그러한 의미들을 가지기 때문입니다.
웹 정보를 수집하는 컴퓨터 로봇인 웹 크롤러에게 정확한 정보를 제공하기 위한 것은, 컨텐츠를 제작하는 입장에서는 너무나도 중요합니다. 웹에서는 단순히 나의 모습과 생각들을 업로드하는 것 이상으로 드러내고 자랑하고 싶어 합니다. 기업들과 블로그를 운영하려는 사람들로 따지자면, 정확한 타겟에게 우리의 컨텐츠가 노출이 잘 되고 광고가 잘 되길 원한다는 것이죠.
그런 의미에서 웹 컨텐츠 소비자들이 단순한 검색만으로 나의 컨텐츠에 손 쉽게 접근할 수 있도록 하는 것이 필요합니다. 이러한 데이터를 수집하는 것이 웹 크롤러고 이들이 오류 없이 정보를 이해하고 전달하여 검색이 잘 될 수 있게 하는 것이 필요합니다. 그러려면 문서를 구조화하여 정확한 데이터를 표시해두어야 하는 것이죠.
정리하자면,
마크업 언어는 웹 브라우저에게 내 컨텐츠를 어떻게 표현해야 하는지 명령하는 언어이며, 함께 일하는 인간들뿐만 아니라 웹 크롤러라는 데이터를 긁어 수집하는 로봇들에게도 웹 문서 내의 데이터들을 구조적으로 표시하여 정보를 전달하는 언어입니다.
이것이 HTML에서의 마크업 언어입니다.
# 결론
이제는, 여러분들도 필자가 서론에 언급했던, 필자가 가진 의문들에 대한 답을 해줄 수 있게 되었습니다.
아래 이미지에서 보이 듯, 왜 결과가 같은 태그를 각기 다른 태그를 사용하여 HTML 문서에 표현해야 하는지에 대해 말이죠. (아직도 잘.... 모르시겠다면 108독을 권합닏...............ㅠ 메일 주세요...... 흙)
