유튜브 영상도 결국 파일이다#
유튜브, 인스타그램, 네이버… 매일 쓰는 이 사이트들은 어떻게 만들어졌을까요?
브라우저 주소창에 주소를 입력하면 서버에서 파일이 날아옵니다. 그 파일이 바로 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 문서의 기본 뼈대 구조를 더 자세히 살펴봅니다.
