웹 개발을 위한 HTML 가이드 1편 - HTML이란?

개요

웹에 있어서 HTML이라는 언어는 아주 상당히 매우 중요한 언어입니다. 웹을 이루고 있는 것들 중에서 없어서는 안되는 요소이기도 합니다. 웹을 이루고 있는 것은 세가지입니다. 하나는 HTML. 하나는 CSS. 하나는 자바스크립트입니다. 이 중에서 CSS나 자바스크립트는 없어도 됩니다. 하지만 HTML은 반드시 필요합니다.

웹 개발을 하고 있는 현역 개발자들도, 웹 개발을 하기 위해 뛰어드는 초보들이나 웹 퍼블리셔, 웹 디자이너들도 모두가 다 HTML을 기본적으로 알아야 합니다. HTML이란 Hyper Text Mark-up Language의 약자로 마크업 언어를 말합니다. 마크업 언어는 웹의 뼈대를 구성하는 언어라고 이해하면 되겠습니다. 위에서 이미 언급했듯이 HTML은 웹을 구성하는 세가지 요소중 가장 중요한 요소입니다.

웹의 뼈대를 구성한다는 것은 쉽게 말해서 화면에 기본적인 골자를 출력해준다는 것입니다. 우리는 이를 웹에 그려지다. 렌더링 되다. 라고 표현합니다. 한편, HTML을 배운다고 해서 웹 개발을 할 수 있게 되는 건 아닙니다. CSS도 알아야 하고 자바스크립트도 다룰 줄 알아야 비로소 웹 개발에 진입할 수 있게 됩니다. 훗날의 이야기니까 일단은 접어두고 간직해둡시다.

HTML의 역사

1990년 2월 20일에 본격적으로 보급화되는 버전 1을 시작으로 세상에 모습을 드러낸 HTML은 팀 버너스리 라는 사람에 의해 만들어졌습니다. 팀 버너스리는 HTML과 함께 URL이라는 개념도 처음 만들어냈고 HTTP나 WWW도 함께 만들어냈습니다. 때문에 그는 인터넷의 아버지라고 불리기도 합니다. 처음 등장한 HTML에는 별다른 기능은 없었습니다. 디자인을 입혔던 것도 아니고 현재의 자바스크립트가 있었던 것도 아니기에 초라함 그 자체였습니다.

시간이 흘러 HTML은 발전했습니다. 이제는 디자인을 담당하는 CSS도 있고 동적인 움직임이나 데이터를 다룰 수 있는 자바스크립트도 존재하기 때문에 많은 것을 할 수 있게 되었습니다. HTML의 역사를 너무 깊게 알아볼 수는 없고 많은 변화를 거쳐왔고 지금도 변화중인 언어라는 것만 이해하면 됩니다. 혹시 조금이라도 더 알고 싶다면 프로그래밍 공부를 시작하기 전에 글을 읽어보는 것을 추천 드립니다.

지금까지 HTML은 발전하면서 HTML5까지 만들어졌습니다. 현재 우리가 사용하고 배우려고 하는 버전은 5입니다. HTML5라고 부릅니다.

배우기 쉬운 언어

HTML은 매우 직관적이기 때문에 상당히 배우기 쉽다고 할 수 있습니다. 조금만 배워도 몇글자 안되는 코드로 인터넷의 구석 구석을 이루어 낼 수 있죠. 물론 HTML에도 심층적인 지식들이 존재하고 이 경우는 쉽게 이해하기 어려우며 알고 싶다면 확실하게 공부를 해야만 합니다. 우리가 웹 개발을 한다면 결국 알아야 하는 부분이지만 지금은 몰라도 됩니다. 이는 어디까지나 심층적인 부분에 대한 이야기이고 그저 웹 사이트의 구조를 만들어낼 수 있는 수준은 누구나 간단하게 가능합니다.

그렇기 때문에 겁낼 필요는 없습니다. 흔히들 보는 프로그래밍 하면 떠오르는 그런 복잡한 것들과는 다릅니다. 마음을 편하게 먹고 천천히 배워가면 됩니다. HTML 자체는 워드나 한글 문서를 특별한 문법으로 작성한다고 생각하면 조금 더 이해가 쉬울지도 모릅니다.

무엇을 할 수 있는가?

HTML로 무엇을 할 수 있는 것일까요? 우리는 무엇을 위해 이 언어를 배우려고 하는 것일까요. 답은 하나입니다. 웹을 구성하는 방법을 알기 위해서 이 HTML이라는 언어를 배우는 것이죠. 하지만 이건 말로는 이해할 수 없는 부분입니다. 실습을 통해서 알아가봅시다.

확장자와 기본적인 모습

HTML의 확장자는 .html 혹은 .htm이며 간단하게 생긴 구조이기 때문에 문법 자체에 대해서는 어렵지 않게 공부할 수 있습니다. 빠르면 배운지 하루만에 원하는 형태의 웹사이트의 뼈대를 만들 수 있을지도 모릅니다. 그만큼 진입장벽이 낮습니다. 그렇다면 얼마나 간단하게 생겼는지 확인해 봐야겠죠. HTML의 기본적인 문법은 아래와 같습니다.

<p id="id">Hello World!!</p>

위의 코드는 브라우저에서 아래와 같이 해석되고 그려집니다. 그려진다는 것은 그냥 화면에 띄워지는 것이라는 것은 이미 언급했습니다. 아무튼 브라우저는 HTML을 해석해서 그려주게 됩니다. 이 때에 초기 디자인은 브라우저마다 다릅니다. 어떤 브라우저를 사용하느냐에 따라서 아래의 이미지와 다를 수 있다는 점을 미리 말해두도록 하겠습니다.

크게 보기 (새 창)

HTML에는 태그라는 것이 있습니다. 일반적인 경우라면 <와 >로 시작해서 </와 >로 끝납니다. 물론 예외도 있습니다. 이건 문법적인 영역이니까 다음에 알아보도록 합시다. HTML은 저렇게 생긴 태그들의 조합으로 만들어집니다. 위는 맛보기에 불과하고 더 많은 종류의 태그가 있습니다. 그리고 그걸 자유롭게 사용할 수 있어야 합니다. 그래야 웹 디자인이든 퍼블리싱이든 할 수 있거든요. 사용하다보면 손에 익게 되니까 걱정은 하지 않아도 됩니다.

이번 글에서는 간단하게 HTML의 개요에 대해서 다뤄봤습니다. 다음 문서에서는 문법에 대해 좀 더 알아보기로 합시다. 이번 글은 여기까지 입니다. 다음 가이드를 통해서 찾아오도록 하겠습니다.