웹페이지를 보다 문서답게 표현하는 방법을 알아보겠습니다. 이 과정에서 HTML의 문법이 등장하게 될 것입니다. 이 문법을 배우는데는 불과 5분 밖에 걸리지 않습니다만, 필자는 여러분에게 감히 이렇게 말씀 드리고 싶습니다. 여러분의 인생은 이 문법을 알기 전과 알고난 후로 나눌 수 있을지도 모릅니다.
우선 위키피디아의 홈페이지에 방문해보겠습니다. 적당한 위치에 마우스 포인트를 올려놓고, 페이지 소스 보기(View Page Source) 항목이 나올 때까지 오른쪽 클릭을 해보세요.
아래처럼 이해할 수 없는 내용의 문자가 보일꺼예요. 그리고 내용을 가만히 살펴보세요.
어떠신가요? 기분이 좋은가요? 아마 불편하실꺼예요. 사람은 해석되지 않는 것을 보면 불편해하거든요. 바로 이런 성격이 문명을 만든 것이 아닐까요? 이 불편한 마음을 잘 기억해주세요.
우리의 웹페이지가 만든 웹페이지를 보면서 무엇을 하고 싶은지 한번 생각해보세요. 필자가 맞춰보겠습니다.
여러분은 이 문서에서 HTML의 약자인 Hypertext Markup Language가 중요한 내용이라서 강조표시하고 싶습니다. 그렇죠? (그렇다고 해주세요 ㅎㅎ)
코드를 아래와 같이 변경해주세요. (변경사항 github에서 보기)
리로드를 해보면 아래와 같이 놀라운 결과가 출력됩니다. 대단하죠! 혹시 별느낌이 들지 않는다면 자기 손해입니다. ㅎㅎ 대단하게 느껴져도 어려운 것이 코딩인데, 사소하게 느껴진다면 앞으로 만날 난관은 더 켜질 것입니다.
여기서 Markup을 더 중요하게 강조하고 싶다면 어떻게 하면 될까요? 아마 밑줄을 치고 싶을꺼예요. 밑줄이 영어로 먼가요? underline 입니다. 그 중 첫글자가 머죠? u입니다. 아래처럼 해봅시다. (변경사항 github에서 보기)
결과는 아래와 같습니다.
HTML의 문법이 대충 감이 잡히죠? 그럼 이제 이론적으로 알아보죠. <strong>, <u>와 같은 것을 문법적으로는 태그(tag)라고 합니다. 아래 그림을 보면 Strong 태그는 Hypertext Markup Language가 중요한 정보이기 때문에 진하게 강조해야 한다고 웹브라우저에게 설명하고 있습니다.
태그에 대한 이야기는 일단 이걸로 충분합니다. 이렇게 해서 우리는 HTML을 통털어서, 다시 말해서 웹을 통털어서 가장 중요한 문법인 태그를 배웠습니다. 정말 축하합니다.
