여러분, 우리가 매일 보는 네이버, 구글, 유튜브 같은 웹사이트들은 어떻게 만들어질까요? 화면을 보면 글자도 있고, 사진도 있고, 클릭하면 이동하는 버튼도 있죠. 이 모든 것을 웹 브라우저(크롬, 사파리 등)가 읽을 수 있도록 명령을 내리는 약속된 언어가 있는데, 그게 바로 HTML입니다.
저도 블로그를 운영하면서 HTML을 처음 접하게 되었는데 처음엔 너무 막막하고 무엇부터 해야할지 몰라 차근차근 공부하는 마음으로 글을 써보려고 합니다.
[HTML이란 무엇인가?]
HTML은 'HyperText Markup Language'의 줄임말입니다. 이름이 참 어렵죠? 쉽게 생각해서 ‘웹페이지의 뼈대를 만드는 설계도’라고 생각하세요. 우리가 집을 지을 때 벽돌을 쌓고 기둥을 세우는 것처럼, 웹사이트에 어떤 글자가 어디에 위치할지, 어떤 사진을 어디에 놓을지 정해주는 도구입니다.
[왜 HTML을 배워야 할까요?]
요즘은 블로그 에디터가 잘 되어 있어서 버튼만 누르면 글자가 굵어지고 사진이 들어가죠? 하지만 그 뒤에서 에디터가 자동으로 HTML 코드를 만들고 있다는 사실을 알고 계셨나요?
HTML을 조금만 알면 이런 점이 좋습니다.
- 글자 크기나 배치 오류를 스스로 고칠 수 있어요.
- 블로그가 이상하게 깨졌을 때 원인을 찾을 수 있어요.
- 구글 검색 엔진이 내 글을 더 잘 찾아오게 만들 수 있어요(SEO).
[초보자가 자주 하는 착각]
처음 코딩을 배우면 다들 "어려운 수학이 필요한 거 아니야?", "영어를 잘해야 하나?"라고 걱정합니다. 하지만 전혀 그렇지 않습니다. HTML은 프로그래밍 언어라기보다 '약속'에 가깝습니다. "이 글은 제목이야", "이건 사진이야"라고 컴퓨터에게 친절하게 알려주는 표시(Mark-up)를 하는 것이거든요.
[오늘의 실습: 나만의 첫 번째 약속]
가장 중요한 태그 하나만 기억해보세요. 바로 꺽쇠(< >)입니다. 우리는 컴퓨터에게 명령할 때 태그라는 것을 사용합니다. 예를 들어, "이것은 제목입니다"라고 컴퓨터에게 말하고 싶다면 이렇게 씁니다.
여기서 <h1>은 "지금부터 제목 시작!"이라는 뜻이고, </h1>은 "제목 끝!"이라는 뜻입니다. 이처럼 시작과 끝을 정해주는 것이 HTML의 기본 중의 기본입니다.
[오늘의 체크리스트]
- 내 컴퓨터에 기본 메모장 프로그램이 있는지 확인하기
- HTML이 웹페이지의 뼈대를 만드는 설계도임을 이해하기
- 태그는 항상 시작(< >)과 끝(</ >)이 한 쌍이라는 사실 기억하기
[주의사항]
처음부터 너무 복잡한 코드를 다 외우려고 하지 마세요. 마치 외국어를 처음 배울 때 단어 하나씩 배우는 것처럼, 태그 하나를 배울 때마다 직접 눈으로 확인하는 과정이 중요합니다.
핵심 요약
- HTML은 웹사이트의 구조를 만드는 설계도와 같습니다.
- 태그는 <태그이름>과 </태그이름>의 쌍으로 구성됩니다.
- HTML을 알면 블로그 편집 오류를 스스로 해결하고 검색 엔진에 더 잘 노출될 수 있습니다.
다음 편 예고
2편에서는 별도의 복잡한 프로그램 설치 없이, 지금 당장 여러분의 윈도우나 맥 컴퓨터에 있는 메모장을 활용해 첫 코드를 작성하고 결과를 확인하는 방법을 알려드립니다.
오늘 처음 들어본 '태그'라는 개념, 혹시 이해가 안 가거나 더 궁금한 점이 있으신가요?