HTML이란? 왕초보를 위한 개념과 공부 사이트

⚡ 한 줄 요약: HTML은 웹페이지의 '뼈대'를 만드는 언어입니다. 프로그래밍이라기보다 '문서에 이름표를 붙이는 일'에 가까워서, 메모장만 있으면 5분 만에 첫 페이지를 만들 수 있습니다.

📑 목차

📘 HTML이란 무엇인가
🏷️ 태그가 뭔가요
🎨 HTML·CSS·자바스크립트의 관계
⌨️ 5분 실습 — 메모장으로 첫 페이지
🎓 어디서 배우나 (학습 사이트)
🔖 더 읽어보기

📘 HTML이란 무엇인가

HTML은 HyperText Markup Language(하이퍼텍스트 마크업 언어)의 줄임말입니다.
이름이 거창하지만 핵심은 간단합니다 — 웹페이지의 구조(뼈대)를 표시하는 언어입니다.

우리가 보는 모든 웹사이트는 속을 들여다보면 "여기는 제목", "여기는 문단", "여기는 이미지", "여기는 버튼" 처럼 각 부분에 이름표(태그)를 붙인 문서입니다.
브라우저(크롬·사파리 등)는 그 이름표를 읽어서 화면에 예쁘게 그려줍니다.
즉 HTML은 계산하거나 논리를 짜는 '프로그래밍'이라기보다, 문서에 구조를 입히는 '마크업' 에 가깝습니다.
그래서 비개발자도 금방 배웁니다.

🏷️ 태그가 뭔가요

HTML의 이름표를 태그(tag) 라고 부릅니다.
대부분 여는 태그와 닫는 태그가 짝을 이룹니다.

<p>이건 하나의 문단입니다.</p>
<h1>이건 큰 제목입니다.</h1>
<a href="https://example.com">이건 클릭하면 이동하는 링크입니다.</a>

<p>…</p> : 문단(paragraph)
<h1>…</h1> : 제목(heading)
<a href="주소">…</a> : 링크(anchor)

이렇게 '무엇인지'를 태그로 감싸주면 끝입니다.
태그 종류는 많지만, 자주 쓰는 건 몇 개뿐이라 부담 없습니다.

🎨 HTML·CSS·자바스크립트의 관계

웹페이지는 보통 세 가지가 함께 만듭니다.
사람으로 비유하면 이렇습니다.

HTML — 뼈대: 무엇이 있는지(제목·문단·버튼).
CSS — 옷·화장: 어떻게 보이는지(색·크기·간격).
자바스크립트 — 움직임: 눌렀을 때 무슨 일이 일어나는지(복사·팝업 등).

처음엔 HTML만 알아도 충분합니다.
실제로 모바일 초대장·부고장 만들기 같은 건 HTML 한 장(+약간의 CSS)으로 만듭니다.

⌨️ 5분 실습 — 메모장으로 첫 페이지

설치할 것도, 가입할 것도 없습니다.

메모장(윈도우) 또는 텍스트 편집기(맥)를 엽니다.
아래를 그대로 붙여넣습니다.

<!doctype html>
<html lang="ko">
<head><meta charset="utf-8"><title>내 첫 페이지</title></head>
<body>
  <h1>안녕하세요 👋</h1>
  <p>제가 만든 첫 번째 웹페이지입니다.</p>
</body>
</html>

index.html 이라는 이름으로 저장합니다(확장자를 .txt가 아니라 .html로).
저장한 파일을 더블클릭하면 브라우저가 열리며 여러분의 페이지가 보입니다.

축하합니다 — 방금 HTML을 만드셨습니다.
이제 글자를 바꾸고 태그를 더해보며 익히면 됩니다.

🎓 어디서 배우나 (학습 사이트)

무료로 체계적으로 배울 수 있는 대표 사이트들입니다.

W3Schools — HTML Tutorial : 태그별로 예제를 바로 실행해보며 배우는 곳. 입문 1순위.
MDN — HTML로 웹 구조 만들기(한국어) : 브라우저 제조사(모질라)의 공식·정확한 학습 문서.
생활코딩 — WEB1: HTML & Internet : 한국어로 아주 쉽게 풀어주는 무료 강의(영상+글).
freeCodeCamp — 반응형 웹 디자인 : 실습 위주 무료 커리큘럼(영어).
Codecademy — Learn HTML : 브라우저 안에서 바로 코딩하며 배우는 인터랙티브 강의(영어).

처음이라면 생활코딩(한국어) → W3Schools(예제) → MDN(정확한 레퍼런스) 순서를 추천합니다.

🔖 더 읽어보기

위키백과 — HTML : 역사·표준 등 개념 전반.
MDN — HTML 레퍼런스 : 태그를 하나씩 찾아볼 때.

HTML을 조금 익혔다면, 그걸로 실제 결과물을 만들어보는 게 가장 빠른 공부입니다.
HTML 한 장으로 바로 만들 수 있는 것들을 모아뒀습니다.

🗂️ 무료 모바일 초대장 만들기 — 템플릿 모음(허브) — 여기서 시작하세요
💍 모바일 청첩장 직접 만들기
🕯️ 모바일 부고장 직접 만들기
🎂 돌잔치·백일 초대장 만들기
🎉 환갑·칠순 초대장 만들기
🎈 생일 초대장 만들기

저작자표시 비영리 변경금지 (새창열림)

'개발 실무' 카테고리의 다른 글

데이터 파는 법 — 개발자가 데이터로 돈 버는 현실적인 방법 (2026) (0)	2026.07.16
AI 코딩 도구 코드 유출 막는 법 3가지 (0)	2026.07.15
모바일 생일 초대장 직접 만들기 — HTML 한 장으로 (0)	2026.07.11
모바일 환갑·칠순 잔치 초대장 직접 만들기 — HTML 한 장으로 (0)	2026.07.11
모바일 돌잔치·백일 초대장 직접 만들기 — HTML 한 장으로 (0)	2026.07.11