- 이 글은 제가 공부를 하며, 이해한 것을 바탕으로 작성하는 글입니다.
- 그렇기에 틀리거나 잘못된 부분이 있을 수 있습니다.
- 글의 오류를 발견하시면, 댓글로 말씀해 주시면 정말 감사하겠습니다.
1. HTML이란?
HyperText Markup Language의 약자로, 웹 페이지를 위한 마크업 언어로 우리가 일상생활에서 매일 몇십 번씩 들어가는 홈페이지/웹페이지가 어떻게 생겼는지, 어떤 식으로 구성되어 있는지 브라우저(크롬, 익스플로러)에게 알려주는 마크업 언어.
무슨 언어라는 거 같은데 사실 무슨 말인지 알기 쉽지 않다. 랭귀지 밖에 모르겠다.. 단어를 하나씩 뜯어 살펴보며, 이해를 해 보자.
HyperText
1960년대 컴퓨터 개척자, 철학자인 테드 넬슨이 만든 말로 'hyper'(건너편, 초월)'와 'text'(문서)를 합성하여 만든 컴퓨터 및 인터넷 관련 용어로 파생 텍스트라고도 한다.
즉 어떠한 것을 초월한, 건너갈 수 있는 문서(책)라는 이야기다. 그렇다면 일반적인 문서, 책과는 다른 것을 의미하는 것일 것이다. 그럼 우선 우리가 잘 알고 있는 문서, 책에 대하여 생각을 해 보자.
책을 펼쳐보면, 처음에는 머리말, 목차, 그리고 내용이 있다. 이 내용은 보통 숫자를 이용해, 서열이 나눠져 있다. 대단원들이 있고 그 내부에는 중단원, 소단원과 같은 계층이 존재한다.
또한 우리는 책을 읽을 때, 순서대로 읽는다. 물론 내가 원하는 페이지로 넘길 순 있지만, 내가 45 페이지를 읽고 싶어 책을 넘긴다면, 첫 페이지부터 44페이지 까지 일일이 페이지를 넘겨 지나가야 할 것이다. 이것이 일반적인 한 페이지에서 다른 페이지로 넘어가는 방식이다. 이런 것을 어려운 말로 선형적 텍스트라고 합니다. 즉, 어떠한 정보를 찾기 위해 책을 보면, 순차적으로 접근해서 찾아가는 방식인 겁니다.
하지만, 하이퍼 텍스트는 다릅니다. 하이퍼링크(링크)를 이용해서, 내가 원하는 곳으로 이동할 수 있는 것을 하이퍼 텍스트라고 한다. 모든 WWW 상의 웹은 이 하이퍼 텍스트로 이루어져 있다. 어려울 수 있겠지만, 우리가 사용하는 모든 페이지를 하이퍼 텍스트라고 보면 된다. (한 화면을 페이지라는 단어를 사용하는 이유가 될 수 있겠다.
그렇다면 지금 여러분이 읽고 있는 이 내 블로그의 이 글 또한 하나의 페이지이다. 여기서 하이퍼 링크를 이용해서 다른 페이지로 이동하는 것이 가능한지 확인을 해보자.
아래를 보면, 하나의 하이퍼 링크가 있다. 이를 누르면, 내 블로그의 다른 페이지로 이동하게 될 것이다.
클릭
이것이 바로 이 페이지에서 다른 페이지로 점프를 하는 행위이며, 이 클릭이라는 버튼으로 보이는 것을 하이퍼 링크라고 하는 것이다. 이미 모두가 다 알고 있는 링크이다. 이를 어려운 말로 비선형적 텍스트라고 합니다. 순차적이지 않은, 내가 원하는 곳으로 바로 이동할 수 있는 텍스트를 말하는 것입니다.
다시 말해, 모든 WWW상(잘못된 이해지만, 인터넷이라고 우선 생각 해 둡시다.)에서는 이러한 모든 페이지가 하이퍼텍스트로 되어있고, 우리는 이를 하이퍼링크로 건너뛰는 행위를 수행하고 있다고 생각하면 된다.
Markup
마크업은 파일이 프린터로 출력되거나 화면에서 어떻게 보여야할 것인지를 나타내기 위해, 또는 그 문서의 논리적인 구조를 묘사하기 위해서, 텍스트나 워드프로세싱 파일의 특정 위치에 삽입되는 일련의 문자들이나 기호들을 말한다. 마크업에 사용되는 표지를 흔히 "태그"라고 부른다.
위 정의를 읽어보면, 어떠한 표현방법이나, 무슨 표시를 하기 위한 기호/문자라는 것 같고, 태그라는 것을 이용한다는 것 같다. 그렇다면 무엇을 표시를 하는지, 태그는 무엇인지 알아보도록 하자.
예를 들어 아래와 같은 글이 있다고 하자.
김호도 50세 남자 러시아 이블로그주인장입니다 잘 부탁드립니다. 취미는 게임과 축구입니다. 게임은 LOL을 하고 운동은 풋살을 합니다.
읽을 때 매우 불편하고 힘들 것이다. 보통 이러한 문장은 아래와 같이 작성한다.
- 이름 : 김호도
- 나이 : 50세
- 성별 : 남자
- 국적 : 러시아
- 소개말 : 안녕하세요. 블로그 주인장 입니다. 잘 부탁드립니다.
- 취미 : 게임, 운동
* 게임 : LOL
* 운동 : 축구
당연히 후자가 보기 편하고 이해하기도 좋을 것이다. 왜냐하면 -과 : 줄 바꿈, * 등을 통해서 구분 지어 표현했기 때문입니다. 즉 이렇게 문서를 구조적으로 편리하게 작성 해 놓은 것을 마크업이 된 문서라고 하고, -과 : 줄 바꿈, *을 태그라고 합니다.
그렇다면 왜 이렇게 작성을 하는 걸까?
가장 큰 이유는 HTML을 읽는 주체가 사람이 아닌, 컴퓨터(웹 브라우저)이기 때문입니다. 사람은 해석을 할 수 있지만, 컴퓨터는 규칙이 없으면 그것을 받아들일 수 없기 때문이다.
Language
사람들이 자신의 생각을 다른 사람들에게 나타내고 전달하기 위해 사용하는 체계.
이를 가지고 해석해 보면, 두 사람 이상의 존재하는 상황에서 서로의 생각을 전달하고 표현하는 것으로 해석할 수 있습니다. 즉, 사람과 브라우저의 대화를 위한 언어라고 해석하면 될 것 같습니다.
결론
모든 WWW상에서는 모든 페이지가 하이퍼텍스트로 되어있고, 우리는 이를 하이퍼링크로 건너뛰는 행위를 수행하고 있는데, 하이퍼 텍스트는 구분자(TAG)를 이용하여 문서를 구조화하여 컴퓨터가 이해할 수 있도록 만든 언어가 바로 HTML이라는 것이다.
댓글