웹페이지는 어떻게 만들어질까? HTML 첫걸음

유튜브 영상도 결국 파일이다

유튜브, 인스타그램, 네이버… 매일 쓰는 이 사이트들은 어떻게 만들어졌을까요?

브라우저 주소창에 주소를 입력하면 서버에서 파일이 날아옵니다. 그 파일이 바로 HTML 파일입니다. 브라우저(크롬, 사파리, 엣지)는 이 파일을 읽고 여러분이 보는 화면으로 그려 줍니다.

주소 입력 → 서버에서 HTML 파일 전송 → 브라우저가 읽고 화면에 그림

HTML은 HyperText Markup Language의 줄임말입니다. 어렵게 들리지만 의미는 간단합니다.

HyperText: 링크로 연결된 텍스트 (다른 페이지로 이동할 수 있는)
Markup: 문서에 표시(mark)를 붙이는 방식
Language: 언어

쉽게 말하면, "이 글자는 제목이에요, 이건 단락이에요, 이건 이미지예요" 라고 브라우저에게 알려주는 언어입니다.

HTML은 프로그래밍 언어가 아니다?

맞습니다. HTML은 엄밀히 말하면 프로그래밍 언어가 아니라 마크업 언어입니다.

프로그래밍 언어(Python, JavaScript 등)는 "이 조건이면 저걸 해" 같은 논리를 처리합니다. 반면 HTML은 "이 내용은 제목이고, 이 내용은 문단이야"처럼 문서의 구조와 의미를 표현합니다.

그래서 HTML은 비교적 배우기 쉽습니다. 지금 바로 시작할 수 있어요.

개발 환경 설치하기

HTML 파일을 만들고 수정하려면 텍스트 편집기가 필요합니다. 메모장도 되지만, VSCode(Visual Studio Code) 를 추천합니다. 전 세계 개발자가 가장 많이 쓰는 무료 편집기예요.

VSCode 설치

code.visualstudio.com 접속
운영체제에 맞는 파일 다운로드 (Windows / Mac)
설치 진행

Live Server 확장 설치

VSCode를 설치했으면 Live Server 확장 프로그램을 추가합니다. HTML 파일을 저장하면 브라우저가 자동으로 새로고침되어 결과를 바로 확인할 수 있습니다.

VSCode 왼쪽 사이드바에서 확장(Extensions) 아이콘 클릭 (네모 4개 아이콘)
검색창에 Live Server 입력
Live Server (Ritwick Dey 제작) 설치

첫 번째 HTML 파일 만들기

이제 진짜 코드를 써 봅시다.

바탕화면에 my-web 폴더를 만듭니다.
VSCode에서 파일 → 폴더 열기로 그 폴더를 엽니다.
왼쪽 탐색기에서 새 파일 아이콘을 클릭하고 이름을 index.html로 저장합니다.

파일에 아래 내용을 입력해 보세요.

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

저장(Ctrl+S / Cmd+S) 후, 오른쪽 하단의 Go Live 버튼을 클릭하면 브라우저가 열리면서 내용이 보입니다.

코드 한 줄씩 살펴보기

처음 보는 코드라 낯설게 느껴질 수 있어요. 하나씩 설명합니다.

<!DOCTYPE html>

"이 파일은 HTML5 문서입니다"라고 브라우저에 선언하는 첫 줄입니다. 꼭 필요한 줄이에요.

<html lang="ko">

HTML 문서의 시작을 알립니다. lang="ko"는 이 페이지가 한국어로 작성됐다는 뜻입니다.

<head>...</head>

화면에 직접 보이지 않는 정보를 담는 영역입니다. 페이지 제목, 문자 인코딩 등이 들어갑니다.

<meta charset="UTF-8" />

한글이 깨지지 않도록 문자 인코딩을 UTF-8로 설정합니다. 없으면 한글이 이상하게 나올 수 있어요.

<title>내 첫 웹페이지</title>

브라우저 탭에 표시되는 제목입니다.

<body>...</body>

화면에 실제로 보이는 내용을 담는 영역입니다. 앞으로 대부분의 코드는 여기에 들어갑니다.

<h1>안녕하세요!</h1>

가장 큰 제목입니다. h1은 heading 1(1단계 제목)의 줄임말이에요.

<p>제 첫 번째 웹페이지입니다.</p>

p는 paragraph(문단)의 줄임말입니다.

태그란 무엇인가

HTML은 태그(tag) 로 이루어져 있습니다. 태그는 꺾쇠괄호(< >)로 감싸인 이름입니다.

대부분의 태그는 여는 태그와 닫는 태그 한 쌍으로 이루어집니다.

<태그이름>내용</태그이름>

예를 들어:

<h1>큰 제목</h1>
<p>문단 내용</p>

닫는 태그는 </ 처럼 슬래시(/)가 앞에 붙습니다. 이걸 빠뜨리면 이후 내용이 모두 그 태그 안에 포함되어 버려서 화면이 이상하게 나올 수 있어요.

일부 태그는 내용이 없어서 혼자 쓰이기도 합니다.

<meta charset="UTF-8" />
<br />
<img />

직접 해보기 ✏️

아래 내용을 index.html에 추가해 화면에 어떻게 나타나는지 확인해 보세요.

<body>
  <h1>안녕하세요!</h1>
  <h2>저는 중학생입니다.</h2>
  <h3>HTML을 배우고 있어요.</h3>
  <p>오늘 처음 웹페이지를 만들었습니다.</p>
  <p>신기하지 않나요?</p>
</body>

h1부터 h6까지 크기가 어떻게 달라지는지 직접 실험해 보세요.

정리

웹페이지는 HTML 파일로 만들어집니다.
브라우저가 HTML을 읽어 화면을 그립니다.
HTML은 태그로 문서의 구조를 표현합니다.
VSCode + Live Server를 설치하면 바로 실습할 수 있습니다.

다음 편에서는 HTML 문서의 기본 뼈대 구조를 더 자세히 살펴봅니다.