[웹] HTML/CSS #1 :: HTML이란?

지난 포스팅에 언급한 것처럼 HTML은 HyperText Markup Language의 약자다. 하이퍼텍스트를 마크업 하는 언어. 하이퍼텍스트는 하이퍼링크다. 페이지와 페이지를 연결해주는 링크. 즉 HTML은 페이지 상에서 하이퍼링크를 구성, 배치할 수 있도록 하는 언어. 이렇게 말하면 좀 어렵다. 비유적으로 더 쉽게 말하면 HTML은 내용을 담는 통이다. 담긴 내용은 크롬, 익스플로러 같은 웹 브라우저를 통해서 볼 수 있다. 담고자 하는 내용물을 통에 막 담는데 이걸 맨 눈으로 보면 뭐가 뭔지 제대로 보인다. 근데 웹 브라우저라는 특수 안경을 끼고 보면 의도한 대로 내용이 보인다고 하면 쉬운 설명일까.

웹 브라우저를 통해 본 네이버

우리가 보는 웹페이지, 즉 인터넷의 내용물은 모두 HTML로 구성되어 있다. 지금 보고 있는 이 글도. 네이버나 다음, 페이스북은 물론 크롬이나 사파리 켜고 보는 모든 컨텐츠는 HTML로 구성된다. 웹 브라우저라는 안경을 끼고 보니깐 내용이 예쁘게 보일 뿐이다. 이 내부는 모르는 사람이 보면 도무지 알 수 없는 코드들이다. 크롬을 쓰는 사람이라면 지금 마우스 오른쪽을 누르고 검사 버튼을 클릭해보면 옆에 이상한 코드가 보일 것이다. 그게 이 페이지의 HTML 코드다. 웹 브라우저는 HTML 파일의 코드를 읽고 "아 이 코드가 있으니 이 내용을 표시해야겠구나"라고 해석하고 보여주는 것이다.

실제 네이버 메인 페이지가 갖고 있는 소스코드

인터넷은 HTML로 이루어진 수많은 페이지들을 링크를 통해 연결시켜 준다. 마우스 클릭을 하면 페이지 이동을 하는 것이 해당 버튼에 연결되어 있는 HTML 페이지를 열어주는 것이다. 즉 인터넷 사이트를 만들고 싶다면 HTML을 알아야 한다. 물론 HTML 언어를 몰라도 쉽게 페이지를 만들도록 도와주는 툴들이 많긴 하다. 윅스가 대표적. 다만 한계가 있다. 네이버 블로그도 쉽게 HTML에 대한 지식없이 쉽게 내 블로그를 만들 수 있는 툴이다. 다만 꾸미기에는 한계가 있다. 네이버에서 제공되는 기능만 이용할 수 있다. 반면 티스토리는 비교적 자유롭게 블로그를 꾸밀 수 있다. HTML/CSS 편집을 지원하기 때문. CSS는 다음 포스팅에서 설명할 예정. 심지어 워드프레스는 티스토리보다 자유롭게 블로그를 만들 수 있다. 가입만 하면 HTML/CSS를 몰라도 어느 정도 꾸미고 사용할 수 있는 티스토리에 비해 워드프레스는 블로그 설치부터 스스로 직접 해야 한다. 서버사이드의 언어까지 다룰 수 있어야 하기도 하고.

최근 코딩 붐이 일면서 많은 사람들이 가장 먼저 시작하는 게 HTML인 것 같다. 일단 웹 자체가 다른 앱이나 서버에 비해 범용적이고 쉽게 접근할 수 있다. 그리고 엄밀히 말해 HTML은 프로그래밍의 영역이 아니기 때문에 접근성이 쉽다. 이해보다는 암기가 요구된다. 이미지를 넣으려면 img 태그가 사용되는구나, id는 태그에 이름을 지정하는 속성이구나 등을 알고 있으면 원하는 내용으로 웹페이지를 구축할 수 있다. 또 CSS로 내가 보여주고 싶은 모습으로 해당 내용을 꾸밀 수 있고. 거의 모든 회사와 서비스, 그리고 개인마저도 홍보를 위한 웹사이트를 만들고 있기 때문에 그 수요는 꽤나 많다. 자바스크립트까지 배우면 웹 프로그래밍이 가능하지만 HTML과 CSS만 알아도 웹 디자인, 웹 퍼블리싱이 가능하다. 모바일 앱도 사용자에게 보여지는 화면은 HTML과 CSS로 만든다. 여러 모로 활용도가 높은 언어.

또 추가적으로 HTML과 관련해서 알아야 할 내용은 웹 표준. 이 웹 표준은 World Wide Web Consortium, 줄여서 W3C라는 곳에서 제정한다. 전세계 웹사이트의 표준을 제정하는 일종의 재단. 이 W3C에서는 마이크로소프트, 구글, 애플, 어도비 등 웹 기술을 개발하는 회사 등이 참여해 어느 회사의 어느 브라우저에서도 똑같이 읽힐 수 있는 표준을 만든다. 기술은 끊임없이 발전하는데 이 중에 오래되고 효용이 낮은 기술을 제거하고 가장 효율적인 기술을 채택하는 식. 과거에는 마이크로소프트의 익스플로러가 시장을 지배했었다. 그래서 익스플로러에서만 읽혀도 큰 문제가 없으니깐 웹 표준이 많이 무시되기도 하고 그랬다. 우리나라가 특히 심하다. 크롬에서 안 열리고 익스플로러에서만 열리는 페이지가 많은 이유. 액티브 엑스 역시 웹 표준에서는 맞지 않는 기술이다. 마이크로소프트의 기술이기 때문에 익스플로러에서만 열린다. 그러나 모두가 익스플로러를 쓰면 액티브 엑스로 사이트를 만들어도 별로 상관없지 않는가? 우리나라 웹사이트가 액티브 엑스로 범벅이 된 이유..

크롬 사파리 오페라 익스플로러 파이어폭스

한 5,6년 전부터 크롬이 성장하기 시작하더니 현재는 점유율 1위를 차지하고 있다. 익스플로러 말고도 파이어폭스, 엣지 등 다양한 브라우저의 점유율도 비교적 늘어난 편. 또 글로벌 시대답게 국내 뿐만 아니라 외국에서도 잘 열릴 수 있어야 한다. 유럽 등지에서는 파이어폭스가 점유율 1위다. 즉 어느 브라우저로 보든 간에 똑같은 페이지를 볼 수 있도록 기술을 통일해야 한다. 이게 웹 표준이고 현재의 표준은 HTML5다. 5는 말 그대로 다섯번째 버전. 지금 만들어지는 웹 브라우저들은 모두 이 기준에 충실하게 만들어지고 있다. 물론 웹사이트 제작자들도 표준에 맞게 사이트를 만들어야 한다. 몇 년 전까지만도 아이폰에서 사파리로 안 보이는 사이트가 많았던 것이 사이트가 표준대로 만들어지지 않아서. 지금도 정부 홈페이지 같은 데는 이런 게 너무 많다. 답답하다.

플래시도 좀 쓰지 말고. 예전에는 영상 같은 동적인 화면을 구성하려면 플래시가 필요했다. 근데 HTML5는 자체적으로 영상, 애니메이션 등의 기능을 제공한다. 그리고 자바스크립트를 활용해서도 동적인 페이지를 만들 수 있다. 플래시에 비해 훨씬 가볍고 쉽게 동적 페이지를 만들 수 있기 때문에 플래시는 도태된 기술이 된 것이다. 더 이상 플래시를 사용하지 않는 이유. 당연히 웹 표준에도 들어있지 않다.

딱히 구상을 해서 쓰는 글은 아니고 생각나는 대로 내가 아는 내용들을 쓰는 글이다. HTML의 개념에 대해 충분히 설명했는지는 잘 모르겠다. 그래도 약간의 배경 지식만 있어도 얼추 이해가 되지 않을까 싶다. 우선 내 생각을 정리하는 블로그지만 다른 사람들에게도 도움이 되면 좋으니깐. 다음 포스팅에서는 CSS에 대해 간단히 설명해야겠다. 그리고 HTML고 CSS의 구체적인 내용에 대해서 정리할 예정이다.