HTML(Hyper Text Markup Language)란 웹(web) 페이지를 만들기위해 사용되는 프로그래밍 언어!
그렇다면 웹(web)이란 일종의 문서 전송을 위한 서비스로 HTML로 만든 문서들이 얽혀 있는 것을 본 따서 웹(web)이라고 이야기 합니다.
대충 구조를 보자면 HTML로->웹문서가 만들어지고->웹(Web) 서비스를 통해서 사용자들에게 문서가 전달됩니다.
www
웹(wed)이라 하면 www(World Wide Web)를 뜻하는데 인터넷 상에서 이루어지는 서비스입니다. 구체적으로 웹(Web) 서비스라고 하면 HTTP를 통해서 HTML로 만든 문서를 전송할 수 있도록 구축된 서비스를 말하죠. 웹(web)서버, 웹(web)문서 웹(web)페이지 등등 웹이라는 말은 익히 많이 들어 봤을 겁니다.
같은 맥락으로 인터넷 상에는 웹(web) 서비스 뿐만 아니라 ftp, smtp 등 다양한 전송 프로토콜을 사용하는 서비스들이 존재합니다. 웹(web)이란 인터넷 상에서 이루어지는 이런 서비스들 중 하나인 것입니다.
서비스들마다 데이터 전송을 위한 고유한 약속을 정해 놓고 데이터를 전송합니다. 이것이 바로 HTTP나 FTP라는 용어로 사용됩니다. 웹(web) 서비스에서는 HTTP(Hyper Text Transfer protocol)라는 전송 규약을 정해 놓고 문서를 전달합니다. 웹 브라우져에서 http로 시작되는 주소 HTTP://www.~~~~.~~~ 는 HTTP 전송 규약을 통해서 문서를 전달한다는 뜻이 됩니다. 왜 웹페이지 주소가 HTTP로 시작되는지 이해할 수 있습니다. 간혹 ftp로 시작되는 주소도 있죠. ftp를 사용하는 서비스입니다. 보통 ftp는 웹 브라우저보다는 ftp 전용프로그램을 사용하죠.
HTML
다시 우리가 공부하게 될 HTML로 넘어와 보죠. HTTP를 통해서 전달되는 문서는 HTML이라는 프로그래밍 언어로 이루어져 있습니다.
사실 애초에 HTML은 문서를 위해 포맷을 잡아주는 형태라서 프로그래머 사이에서도 C언어와 같은 프로그래밍 언어와는 좀 다른 시각을 둔 것이 사실입니다. 하지만 최근에는 복잡해져가는 웹 환경으로 인해 웹페이지를 개발하려면 HTML 뿐만 아니라 CSS, 자바스크립트나 그 밖에 다른 프로그래밍 언어에 대한 지식도 수반되는게 일반적이므로 웹 개발 역시 프로그래머가 선택할 수 있는 하나의 확고한 영역이 되었습니다.
어찌되었든 HTML 하나만 놓고 보면 그렇게 크게 어렵지 않습니다. 거기에다 결과를 바로바로 웹브라우져로 확인할 수 있으므로 학습하기에도 재미있죠.
HTML 역사
현재 HTML5는 탄생 배경에는 흥미로운 역사가 있습니다. 20여년전이죠. 1990년대만 하더라도 인터넷을 사용하는 경우가 그리 흔하지는 않았습니다. 통신회선의 데이터 전송속도도 느렸고 인터넷 페이지도 요새에 비하면 그리 많지 않았습니다. 인터넷 보다는 터미널을 이용한 하이텔, 나우누리, 천리안 같은 통신을 주로 했었죠.
이 당시만 하더라도 인터넷 브라우저 중에 네스케이프라는 것이 있었습니다. 물론 윈도우 익스플로러도 있었지만 그 당시만 하더라도 네스케이프의 성능과 인지도가 높았습니다.
하지만 가만히 있을 마이크로 소프트사가 아니죠. 2000년도 들어와서 MS의 인터넷 익스플로러가 거의 독점하다시피 합니다. 그 배경에는 액티브x라는 녀석이 있습니다.
예전에는 관공서나 인터넷 뱅킹, 공인인증서 등을 사용하려면 액티브x라는 것을 설치했습니다. 인터넷 익스플로러에만 있는 것이죠. 이것은 네스케이프나 타사 브라우저와 호환되지 않는 형태를 띄므로 점점 사용자는 인터넷 익스플로러만을 사용할 수 밖에 없게되었죠.
물론 이를 해결하고자 다른 브라우저 개발사들이 표준을 제안하지만 W3C에서 거절합니다. W3C(www Consortium)은 국제 웹 표준화 기구입니다.
어찌되었든 이런 문제에도 불고하고 최근에는 이 표준이 다시 등장했는데 이것이 바로 HTML5입니다. 예전에 MS를 제외한 웹 브라우저 개발사들이 제안한 표준 말이죠. 이 것이 2014년의 일입니다.
이런 웹 표준을 통해서 다양한 브라우저의 선택적인 사용이 가능해 집니다. MS의 인터넷 익스플로러의 독점의 시대는 끝난 것이죠.
HTML5 + CSS3
앞으로 HTML5를 배우면서 CSS3에 대한 내용도 살펴보게 될 것입니다. 이 둘은 실과 바늘처럼 같이 생각하는 것이 좋습니다. CSS3(Cascading Style Sheets)는 일종의 장식을 어떻게 할지 기술해주는 언어입니다. HTML5로 집을 지으면 CSS3로 인테리어를 하는 것이죠.
구체적인 내용은 차차 공부해 나가겠습니다.
개발을 위한 환경 설정
프로그래밍이 처음이시라면 개발 환경을 설정하는 것에 대해서 익숙하시지 않을 겁니다. 같은 종류의 개발을 하더라도 개발환경은 개발자들마다 회사마다 다를 수가 있습니다. 웹 개발의 경우는 텍스트 에디터와 웹 브라우저를 사용할 수 있는 환경이면 가능합니다. 텍스트 에디터는 윈도우 기본 메모장도 가능한데 이 강의에서는 Visual studio Code를 사용하겠습니다.
2017/04/25 - [개발도구/VSCODE] - Visual Studio Code 를 사용한 개발환경 꾸미기
사실 제가 전문 웹개발자가 아니라 기존에 사용하는 개발 툴을 그대로 사용하는 것인데 이 부분은 직접 사용하 가면서 편리한 것으로 사용하면 됩니다.
또한 웹 서비스를 사용할 수 있는 환경이 있다면 더 좋을 것이지만 여기서는 HTML5에 초점을 맞춰 생략하겠습니다. 워밍업 하는 수준으로 글을 썼는데 좀 길어졌군요. 다음 포스팅부터는 본격적으로 HTML5에 대해 하나씩 살펴보도록 하겠습니다.