첫 번째 HTML 문서 만들기

HTML을 공부할 때 가장 먼저 해볼 일은 직접 HTML 문서를 만들어보는 것입니다.

이론을 먼저 많이 외우는 것보다, 파일을 하나 만들고 브라우저에서 결과를 확인해보는 것이 더 중요합니다.

이번 글에서는 index.html 파일을 만들고, 기본 HTML 구조를 작성한 뒤, 브라우저에서 실행하는 과정을 정리해보겠습니다.

이 글에서 다루는 내용

index.html 파일 만들기
기본 HTML 구조 작성하기
브라우저에서 결과 확인하기

index.html 파일 만들기

먼저 HTML 파일을 하나 만들어야 합니다.

HTML 파일의 확장자는 .html입니다.

처음 공부할 때는 보통 파일 이름을 다음처럼 만듭니다.

index.html

index.html은 웹페이지의 시작 파일로 자주 사용됩니다.

웹사이트에 접속했을 때 가장 먼저 보여줄 기본 페이지 이름으로 많이 사용되기 때문입니다.

예를 들어 작업 폴더 구조는 다음처럼 만들 수 있습니다.

html-study
└── index.html

여기서 html-study는 작업 폴더이고, index.html은 HTML 문서입니다.

처음에는 폴더 이름이 무엇인지는 크게 중요하지 않습니다.

다만 파일이 어디에 있는지 모르면 나중에 브라우저에서 열 때 헷갈릴 수 있으니, 작업 폴더 하나를 정해두고 그 안에서 연습하는 것이 좋습니다.

index.html 이름을 많이 쓰는 이유

HTML 파일 이름은 꼭 index.html이어야만 하는 것은 아닙니다.

다음처럼 만들어도 됩니다.

hello.html
about.html
main.html

하지만 처음에는 index.html로 만드는 것이 좋습니다.

많은 웹 서버와 배포 환경에서 index.html을 기본 시작 페이지로 인식하기 때문입니다.

쉽게 말하면 index.html은 웹사이트의 첫 화면 역할을 하는 파일입니다.

파일을 실제로 만드는 순서

처음 공부할 때는 "파일을 만든다"는 말이 생각보다 추상적으로 느껴질 수 있습니다.

가장 단순한 흐름은 다음과 같습니다.

작업 폴더를 만듭니다.
그 안에 새 파일을 만듭니다.
파일 이름을 index.html로 저장합니다.
코드를 작성하고 저장합니다.
브라우저에서 파일을 엽니다.

즉, 중요한 것은 복잡한 도구보다 파일을 하나 만들고 저장해서 직접 열어보는 경험입니다.

기본 HTML 구조 작성하기

index.html 파일을 만들었다면 기본 HTML 구조를 작성합니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>나의 첫 HTML 문서</title>
  </head>
  <body>
    <h1>안녕하세요</h1>
    <p>첫 번째 HTML 문서를 만들었습니다.</p>
  </body>
</html>

처음 보면 코드가 길어 보일 수 있습니다.

하지만 크게 보면 구조는 단순합니다.

문서 선언
HTML 시작
  head 영역
  body 영역
HTML 끝

HTML 문서는 기본적으로 head와 body 영역으로 나눌 수 있습니다.

이 기본 구조를 더 자세히 보고 싶다면 HTML 기본 구조 한 번에 이해하기 글을 이어서 읽어보면 좋습니다.

코드 하나씩 살펴보기

`<!DOCTYPE html>`

<!DOCTYPE html>

이 코드는 브라우저에게 이 문서가 HTML 문서라는 것을 알려줍니다.

HTML 문서의 가장 위에 작성합니다.

`<html lang="ko">`

<html lang="ko">

html 태그는 HTML 문서 전체를 감싸는 태그입니다.

lang="ko"는 이 문서의 기본 언어가 한국어라는 뜻입니다.

검색 엔진이나 화면 읽기 프로그램이 문서 언어를 이해하는 데 도움이 됩니다.

`<head>`

<head>
  <meta charset="UTF-8" />
  <title>나의 첫 HTML 문서</title>
</head>

head 영역에는 화면에 직접 보이지 않는 문서 정보가 들어갑니다.

예를 들어 문자 인코딩, 페이지 제목, CSS 연결 정보 등이 들어갈 수 있습니다.

`<meta charset="UTF-8" />`

<meta charset="UTF-8" />

이 코드는 한글이 깨지지 않도록 문자 인코딩을 설정하는 코드입니다.

처음에는 HTML 문서에 거의 항상 넣는다고 생각하면 됩니다.

`<title>`

<title>나의 첫 HTML 문서</title>

title 태그는 브라우저 탭에 보이는 제목을 정합니다.

화면 본문에 보이는 제목이 아니라, 브라우저 위쪽 탭에 표시되는 제목입니다.

`<body>`

<body>
  <h1>안녕하세요</h1>
  <p>첫 번째 HTML 문서를 만들었습니다.</p>
</body>

body 영역에는 실제 브라우저 화면에 보이는 내용이 들어갑니다.

제목, 문단, 이미지, 버튼, 링크 같은 요소는 대부분 body 안에 작성합니다.

`<h1>`

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

h1 태그는 가장 큰 제목을 나타냅니다.

보통 한 페이지의 대표 제목에 사용합니다.

`<p>`

<p>첫 번째 HTML 문서를 만들었습니다.</p>

p 태그는 문단을 나타냅니다.

일반적인 설명 문장을 작성할 때 자주 사용합니다.

브라우저에서 결과 확인하기

HTML 코드를 작성했다면 파일을 저장합니다.

저장 단축키는 다음과 같습니다.

Windows: Ctrl + S
Mac: Command + S

저장한 뒤 index.html 파일을 브라우저에서 열어봅니다.

가장 쉬운 방법은 파일을 더블 클릭하는 것입니다.

브라우저에 다음과 같은 내용이 보이면 성공입니다.

안녕하세요
첫 번째 HTML 문서를 만들었습니다.

이제 첫 번째 HTML 문서를 만든 것입니다.

파일을 여는 방법이 꼭 하나만 있는 것은 아닙니다

처음에는 파일을 더블 클릭해서 여는 방법이 가장 단순합니다.

하지만 나중에는 에디터에서 직접 열거나, Live Server 같은 도구를 이용해 볼 수도 있습니다.

즉 처음 목표는 복잡한 실행 환경이 아니라 내가 만든 HTML 파일이 실제 화면으로 보이는지 확인하는 것입니다.

코드를 수정해보기

화면에 보이는 내용을 바꾸고 싶다면 body 안의 내용을 수정하면 됩니다.

예를 들어 다음처럼 바꿀 수 있습니다.

<body>
  <h1>HTML 공부 시작</h1>
  <p>브라우저에서 HTML 문서를 확인했습니다.</p>
</body>

수정한 뒤에는 반드시 저장해야 합니다.

그리고 브라우저에서 새로고침을 누르면 바뀐 내용이 반영됩니다.

코드 수정 → 저장 → 브라우저 새로고침 → 결과 확인

이 흐름이 HTML 공부의 가장 기본입니다.

저장했는데 화면이 안 바뀌는 이유

처음에는 코드를 고쳤는데도 브라우저 화면이 그대로라서 당황할 수 있습니다.

이럴 때는 아래 순서대로 확인하면 좋습니다.

파일을 정말 저장했는지
수정한 파일이 지금 열어둔 파일과 같은지
브라우저에서 새로고침했는지
파일 이름이 .html로 끝나는지

특히 다른 폴더의 비슷한 이름 파일을 열어둔 상태에서 작업하면, 저장은 했는데 화면은 안 바뀌는 것처럼 느껴질 수 있습니다.

Live Server로 확인하기

VS Code에서 Live Server를 사용하고 있다면 더 편하게 확인할 수 있습니다.

index.html 파일을 연 상태에서 마우스 오른쪽 버튼을 누르고 다음 메뉴를 선택합니다.

Open with Live Server

그러면 브라우저가 자동으로 열립니다.

이후 코드를 수정하고 저장하면 브라우저가 자동으로 새로고침됩니다.

처음에는 더블 클릭으로 실행해도 괜찮습니다.

하지만 HTML, CSS, JavaScript를 계속 공부할 예정이라면 Live Server를 사용하는 것이 좋습니다.

초보자가 자주 하는 실수

파일 이름을 잘못 만든 경우

파일 이름이 다음처럼 되어 있으면 문제가 생길 수 있습니다.

index.html.txt

이 경우 브라우저가 HTML 파일로 제대로 인식하지 못할 수 있습니다.

파일 이름은 반드시 다음처럼 끝나야 합니다.

index.html

저장하지 않고 확인하는 경우

코드를 수정했는데 브라우저 화면이 바뀌지 않는다면 저장을 했는지 먼저 확인해야 합니다.

HTML은 저장된 파일을 기준으로 브라우저에 표시됩니다.

body 밖에 내용을 작성한 경우

화면에 보여주고 싶은 내용은 body 안에 작성해야 합니다.

잘못된 예시는 다음과 같습니다.

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

좋은 예시는 다음과 같습니다.

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

처음에는 화면에 보이는 내용은 body 안에 작성한다고 기억하면 됩니다.

자주 헷갈리는 부분

`index.html`은 예시일 뿐, 무조건 이 이름만 써야 하는 것은 아닙니다

처음에는 index.html을 많이 쓰지만, 나중에는 about.html, contact.html처럼 다른 이름도 만들 수 있습니다.

다만 첫 연습에서는 index.html이 가장 덜 헷갈립니다.

화면에 보여줄 내용과 브라우저 탭 제목은 다릅니다

본문에 보이는 큰 제목은 h1이고, 브라우저 탭에 보이는 제목은 title입니다.

둘 다 제목처럼 보일 수 있어서 초반에 자주 섞입니다.

HTML 파일을 만들었다고 바로 복잡한 웹사이트가 되는 것은 아닙니다

처음 문서는 아주 단순한 제목과 문단만 있어도 충분합니다.

이 단계에서는 "한 파일을 만들고, 저장하고, 열고, 수정해보는 흐름"을 익히는 것이 더 중요합니다.

정리

이번 글에서는 첫 번째 HTML 문서를 만들어봤습니다.

핵심 흐름은 다음과 같습니다.

작업 폴더를 만듭니다.
index.html 파일을 만듭니다.
기본 HTML 구조를 작성합니다.
파일을 저장합니다.
브라우저에서 결과를 확인합니다.

HTML 문서는 처음에는 복잡해 보일 수 있지만, 기본 구조는 단순합니다.

head는 문서 정보
body는 화면에 보이는 내용

이 차이를 먼저 이해하면 됩니다.

처음 HTML 파일을 만들기 전에 어떤 도구로 연습하면 좋은지 보고 싶다면 HTML 처음 시작할 때 필요한 준비물과 환경 세팅 글을 먼저 읽어도 좋습니다.

태그, 요소, 속성의 차이를 먼저 정리하고 싶다면 HTML 태그, 요소, 속성 차이 쉽게 정리하기 글이 바로 이어집니다.