제가 티스토리를 운영하면서 힘들었던 것 중에 하나가 스킨을 편집하거나 구글 애드센스 광고를 편집하는 것이었습니다. 이런 것들을 하려면 HTML을 편집해야 했거든요. 인터넷에 찾아봐도 잘 정리된 자료가 없어서 제가 공부해서 정리를 해보려고 이 포스팅을 작성했습니다. 그럼 HTML5의 개념, 역사부터 티스토리 HTML 편집 방법까지 자세히 알려드리겠습니다.
HTML 기본 개념
우리가 인터넷을 어떻게 사용하는지 한번 생각해 볼까요? 우선 스마트폰이나 컴퓨터를 켜서 웹 브라우저(Brower)를 열 겁니다. 웹 브라우저는 크롬, 익스플로러 같은 것을 말합니다. 웹 브라우저를 연 다음은 인터넷 주소를 주소창에 입력을 할 거예요.
보통 https://www.qwert.com 이런 형태의 주소가 많아서 저런 형태로 입력하는데, 그럼 인터넷 서버에서 요청한 문서를 찾아서 우리에게 브라우저를 통해서 정보를 제공해 줍니다.
이때 서버에 수많은 문서들이 저장되어 있는데 이 문서를 인터넷에 저장되어 있으니 웹문서라 부르고 이 문서가 만들어진 형식을 HTML(HyperText Markup Language)라고 부릅니다. 다시 말해 우리가 음악을 저장할 때는 .mp3형태로 만들어서 저장하고 사진을 저장할 때는 .JPG로 저장하듯이 인터넷에 저장되어 있는 웹문서들은 .html로 저장을 하는 거라고 보시면 됩니다.
HTML 역사 및 HTML5의 시작
HTML은 1989년 팀버스 리가 웹문서를 만들기 위해 처음 제안했습니다. 이 후에 인터넷이 발달함에 따라 점점 정보가 방대해지고 다양해졌기 때문에 HTML이 이 정보들을 효율적으로 잘 처리할 수 있게 개발하고 표준을 빨리 만들었어야 했지만, 대형 IT기업끼리의 패권다툼 때문에 2014년에 와서야 HTML5 표준이 제정되었습니다.
대형 IT 기업끼리의 패권 다툼이란 마이크로소프트의 익스플로러, 애플의 사파리와 같이 웹브라우저끼리 서로 호환이 잘 안되게 해서 사용자로 하여금 계속해서 자신들의 브라우저를 쓰게끔 만든 것을 말합니다. 아무래도 웹브라우저의 패권을 가져가게 되면 정보화 시대에서 뭘 해도 우위를 가져갈 수 있다고 생각했기 때문인 것이죠.
결국에 2014년에 제정된 HTML5의 표준을 어떤 웹 브라우저가 잘 수용하였는가에 따라서 실제 사용자의 편의성에 큰 차이가 있었기 때문에 현재에 와서는 점유율 차이가 심해졌습니다.
HTML5의 표준을 얼마나 잘 수용했는지에 대한 평가 결과는 아래와 같습니다. 만점 : 555점
– 크롬 : 528점
– 오페라 : 518점
– 사파리: 472점
– Edge : 492점
2021년 3월 기준으로 전세계 점유율 시장을 보면 크롬 : 64%, 사파리 : 19%, Edge : 3%의 점유율을 가지고 있습니다. 표준을 제일 잘 따라서 사용자의 편의를 높인 크롬이 압도적인 점유율을 가져가게 된 것이지요. 참고로 크롬은 10년 전만 하더라도 점유율이 3%도 되지 않았습니다.
HTML5 특징 : 티스토리 HTML
HTML5로 웹 문서를 만들기 위해서는 CSS3과 javascript와 같은 서브프로그램을 같이 사용해야 합니다. HTML5를 웹문서가 정보로 전달하고자 하는 실질적인 내용이라고 한다면 CSS3는 HTML5의 내용을 어떻게 꾸밀지에 대한 디자인 형식을 말하는 것입니다.
쉽게 비유를 하자면 선물을 준비한다고 하면 HTML5는 내용물인 선물을 의미하고 CSS3은 선물을 포장하는 상자를 의미한다고 보시면 됩니다.
티스토리 HTML도 HTML 편집창에 CSS가 달려있는 것을 볼 수 있습니다. 이런 이유 때문에 그렇습니다.
HTML5는 이전버전의 HTML에서 작성된 웹문서에 대한 호환성도 보장합니다. 다시 말해서 HTML5는 이전 버전의 HTML에서 작동하는 웹브라우저에서도 이용이 가능하다는 의미입니다.
HTML5 이전에는 웹에서 공인인증서나 어떤 오디오 기능 등을 이용하기 위해서 ActiveX와 같은 플러그인을 설치해야 했는데, HTML5 환경에서는 이런 프로그램의 설치 없이 간단히 CSS3과 javascript를 이용하여 동일한 기능을 구현할 수 있게 되었습니다.
티스토리 HTML 편집 : HTML 기본구조
HTML의 HyperText Markup Language의 약자로 웹페이지를 생성하기 위한 코딩 언어입니다. <>와 </>같이 생긴 문자를 태그라고 부르는데, HTML은 시작 태그(<>)와 끝 태그(</>)의 쌍으로 이루어져 있습니다. 현재 제가 작성하고 있는 포스팅의 html 편집을 눌러서 보면 수많은 <>와 </>의 쌍을 볼 수 있습니다. 예를 들어 <p></p>, <h2></h2>, <head></head> 이런 식으로 다 쌍으로 이루어져 있습니다.
제 티스토리 스킨편집에 들어가서 HTML 편집 버튼을 눌렀을 때 나오는 창입니다. 이것을 보면서 설명을 드리겠습니다.
<!DOCTYPE html>태그는 html5로 작성된 문서라는 것을 선언하는 태그입니다. 유일하게 이 태그만 끝 태그가 없는 태그입니다.
<html> 태그는 html문서의 시작을 알려주고 문서가 끝날 때 </html> 태그가 달립니다.
<head> 태그는 html문서의 정보를 담고 있는 태그입니다. 이 부분에는 뒤에 설명할 <meta> 태그 등을 이용하여 문서 작성자, 문서 키워드 등의 정보를 미리 선언할 수 있습니다. 이 부분이 끝날 때는 </head> 태그를 통해 끝났다는 것을 선언합니다.
<title> 태그는 웹문서의 제목을 나타내는 태그이고 제목이 끝나는 부분에 </title> 태그가 달립니다.
<body> 태그는 보통 <head></head> 태그가 끝나고 작성되는 태그로, 우리가 알고 싶어 하는 실질적인 정보를 담고 있는 부분이라고 생각하시면 됩니다. <body>태그도 마찬가지로 끝날 때 </body>로 끝납니다.
그럼 기본구조를 한 번 써보도록 하겠습니다.
<!DOCTYPE html>
<html>
<head>
<title> 제목 </title>
<meta> 작성자 </meta>
</head>
<body>
글 내용
</body>
</html>
기본구조는 이렇게 표현될 수 있겠죠~? 기본적인 태그에 대한 기초는 이 정도면 다 설명이 되셨으리라 생각합니다. 도움이 되셨으면 좋겠습니다.