HTML이란?

개요

 HTML은 HyperText Markup Language의 약자입니다. 이 세상 모든 웹 페이지가 단순히 글자로만 되어있고 글자 크기, 폰트들이 모두 똑같다면 별로 이쁘지가 않죠? HTML은 웹 페이지를 좀 더 눈에 잘 들어오게 제목도 넣고 문단도 나누며, 목록을 삽입하여 본문을 위한 구조적 의미를 나타낼 수 있게 도와줍니다. HTML이 웹의 역사에서 가장 처음 생겨난 언어인 만큼 웹 페이지를 표현하는 최소한의 단위이자 가장 중요한 기술입니다. ㄱ, ㄴ, ㄷ 한글 낱자를 알아야 글자를 알고 문장을 읽고 소설을 쓰듯이, HTML은 낱자와 같은 위치에서 웹을 구성하는 토대가 됩니다.

 웹의 원리 수업에서 봤었던 index.html 파일을 기억하나요? 텍스트 파일의 확장자가 *.txt이고, 실행파일의 확장자가 *.exe, 이미지 파일의 확장자가 *.jpg / *.png 인 것처럼 인터넷 웹 페이지를 표현하는 파일의 확장자는 *.html입니다.

 혹시 Windows 탐색기에서 파일 확장자가 보이지 않는다면, 아래 이미지처럼 보기->표시/숨기기 항목에서 '파일 확장자' 체크박스를 선택하면 됩니다.

 새로운 파일 'hello.html'을 하나 생성한 뒤 다음과 같이 작성하고 저장했습니다.

<meta charset="UTF-8">
<title>이건 제목</title>
<h1>안녕</h1>
<h2>반가워</h2>
<input type="button" value="버튼임">
<img src="눈물이_차올라서_고갤들어...gif">
<a href="https://www.google.com">구글</a>

 이제 example.likelion-knut.dev/hello.html로 접속해 봅시다.

 결과가 어떤가요? 입력했던 내용 그대로 출력되는 것이 아니라 문단의 서식이 바뀌어 나타난 것을 볼 수 있어요. <title>과 </title>로 감싸여진 '이건 제목' 글자는 웹 브라우저의 상단 탭의 제목을 이루었고, 두, 세번째 줄의 '안녕', '반가워'는 글씨 크기가 바뀌어 나타났습니다. 또 다음 줄은 갑자기 이미지 파일이 나타났구요, 마지막 줄은 우리가 마우스로 클릭을 할 수 있는 '링크'가 생겼습니다. 웹 브라우저에 나타나는 결과물을 제외한 꺽쇠 괄호로 감싸여진 것들이 이러한 결과물을 나타나게 해준 녀석들이며, 이를 통해 우리는 단순한 텍스트로만 이루어진 웹 페이지가 아닌 문단이 있고 이미지가 있는, 사람이 읽기 편한 구조적인 웹 페이지를 만들 수 있습니다. (아직은 읽기 편하진 않지만 그렇다고 합시다.)

 저기 저 보이는 꺽쇠 괄호 '<' 하고 '>'로 감싸여진 것들을 HTML 태그(HTML Tag)라고 칭하며, HTML을 배운다는 것은 저 각각의 태그의 사용법과 용도를 알아가는 과정이라고 볼 수 있습니다.