HTML

HTML

2022. 10. 29.

Tistory와 나

티스토리에는 주로 전문적인 정보들이 올라오는 편이기에, 중학생 때부터 자주 들르던 곳이었다. 마침 네이버 블로그에서 주간일기 챌린지가 한창이라 블로그 서비스를 한번 제대로 이용해 봐야겠다는 생각이 들었다. 그러던 중, 다음 블로그가 서비스를 종료하고 티스토리로 합쳐 운영한다는 공지를 보았다.

초대장 제도가 있을 때 티스토리 블로그는 개설하기 어려웠기 때문에 쉽게 다가가지는 못하는 곳이었다. 초대장 제도가 폐지된 뒤에도 HTML이나 CSS라는 산이 있어 개설해 포스팅할 엄두가 나지 않았다. 그런데 지금은 상황이 조금 다르다. 대학생이 되면서 일단 뭐라도 배워둬야 나중에 써먹을 일이 있지 않을까 해서 프런트엔드를 조금 배웠고, 티스토리 스킨을 편집하고 글을 쓰기에는 충분할 것이라는 생각이 들었다.

HyperText Markup Language

HTML5는 웹 표준으로 자리잡았다.

HTML은 HyperText Markup Language의 약어이다. 말 그대로 하이퍼텍스트를 위한 마크업 언어라는 소리다. 즉, 웹 상에서 여러 문서 사이를 이동할 수 있게 하는 하이퍼텍스트를 마크업 언어—마크(mark)로 둘러싸인 코드로 논리적인 구조를 표현한다는 뜻이다. 마크는 다른 말로 태그(tag)라고도 한다.—를 이용해 구조화했다는 뜻이다. 1990년 CERN에서 근무하던 물리학자 티모시 J. 버너스리 경(Sir Timothy J. Berners-Lee)이 WWW(월드 와이드 웹)와 함께 제안했다고 한다. 현재는 사실상 웹 표준으로 자리잡으면서 CSS, JavaScript와 함께 대부분의 웹사이트의 얼굴을 맡고 있다.

현재 표준은 2014년 이후로 발표되고 있는 표준인 HTML5이다(더 정확하게 들어가면 아니긴 한데, 대충 그렇다고 해도 별 문제는 없을 것이다.). 특정 기업 종속적이라는 비판을 받았던 어도비 플래시의 사용을 지양하고, 만악의 근원, 한국 인터넷 갈라파고스화의 상징, IE가 쏘아 올린 작은 똥 ActiveX를 이용하지 않고도 미디어를 재생할 수 있도록 하는 것을 목표로 하고 있다. 그렇기에 웹 문서의 논리적인 구조를 담당하는 HTML과, 때깔나는 옷에 해당하는 CSS, 그리고 구체관절인형처럼 움직일 수도 있게 만드는 JS만이 있어도 화려한 효과를 지닌 웹사이트를 만들 수 있게 된 것이다.

티스토리에서 단순한 포스팅 이상을 원한다면 반드시 익혀야 하는 것이 이 HTML과 다음 글에서 다루는 CSS다. 기본적으로 카카오가 제공하는 티스토리 스킨에서 마음에 들지 않는 부분이 있어 이를 수정하려고 해도 HTML 태그를 알아야 하고, 클래스나 아이디 등을 알아야 CSS에서 어떤 선택자가 어느 위치에 적용될지 대략적으로 파악할 수 있기 때문이다. 이 글에서는 HTML에서 기능을 가지는 태그가 어떤 의미를 가지고 있는지를 알아볼 것이다.

이 글은 전문적으로 HTML을 파헤쳐 보는 시도를 하지 않으니, 더 전문적인 것을 원한다면 이곳으로↗ 가는 것이 좋다.

• 1 기본 구조
• 2 텍스트
• 3 리스트, 테이블
• 4 이미지
• 5 멀티미디어
• 6 시맨틱 태그
• 7 폼