오늘 만들 것은 아주 작은 웹페이지입니다
HTML을 배우기 위해 거창한 프로그램을 설치할 필요는 없습니다.
처음에는 글을 입력할 수 있는 도구와 웹페이지를 보여 주는 브라우저만 있으면 충분합니다.
우리가 할 일은 단순합니다.
HTML 파일을 하나 만든다.
그 안에 짧은 내용을 적는다.
브라우저로 열어 본다.
내용을 고친 뒤 저장하고 새로고침한다.
이 네 가지 흐름만 익히면 앞으로의 실습은 훨씬 편해집니다. HTML 공부는 처음부터 완벽한 개발 환경을 만드는 일이 아닙니다. 먼저 "내가 쓴 글이 브라우저 화면에 나타나는구나"를 경험하는 것이 중요합니다.
이번 장에서는 그 첫 경험을 아주 가볍게 만들어 보겠습니다.
AI 생성 이미지
필요한 도구는 두 가지입니다
HTML 실습에 필요한 도구는 다음 두 가지입니다.
텍스트 편집기
웹브라우저
텍스트 편집기는 글자를 입력하고 저장하는 프로그램입니다. 윈도우의 메모장, 맥의 텍스트 편집기 같은 기본 프로그램도 사용할 수 있습니다. 이미 Visual Studio Code 같은 편집기를 쓰고 있다면 그것을 사용해도 됩니다.
다만 맥의 텍스트 편집기를 사용할 때는 한 가지를 기억해 주세요. 서식이 들어간 문서가 아니라 일반 텍스트로 저장해야 합니다. 글자 크기나 색을 꾸미는 문서가 아니라, 우리가 입력한 글자만 그대로 저장되는 문서여야 HTML 실습에 알맞습니다.
웹브라우저는 HTML 파일을 화면으로 보여 주는 프로그램입니다. 크롬, 엣지, 사파리, 파이어폭스 같은 프로그램이 여기에 해당합니다.
처음에는 "어떤 편집기가 제일 좋은가?"보다 "파일을 만들고 열 수 있는가?"가 더 중요합니다. 좋은 도구는 나중에 천천히 골라도 됩니다.
실습 폴더를 하나 만듭니다
먼저 HTML 파일을 넣어 둘 폴더를 하나 만듭니다. 바탕화면에 만들어도 좋고, 문서 폴더 안에 만들어도 좋습니다.
예를 들어 폴더 이름을 이렇게 정해 봅니다.
html-practice폴더 이름은 꼭 이대로 할 필요는 없습니다. 다만 한글이나 띄어쓰기 없이 짧게 만들면 나중에 파일을 찾기 쉽습니다.
이 폴더는 앞으로 연습장을 대신합니다. 종이에 글씨를 연습하듯, 이 폴더 안에 작은 HTML 파일을 만들고 고쳐 볼 것입니다.
첫 파일 이름은 index.html로 저장합니다
이제 텍스트 편집기를 열고 새 파일을 만듭니다. 그리고 아래 내용을 그대로 입력해 봅니다.
<h1>안녕하세요</h1>
<p>처음으로 만든 HTML 페이지입니다.</p>아직 이 코드의 모든 의미를 알 필요는 없습니다. 눈으로만 가볍게 보면 됩니다.
<h1>은 큰 제목을 나타냅니다.<p>는 문단을 나타냅니다.
자세한 문서 모양과 태그 읽는 법은 다음 장부터 차근차근 다룹니다. 지금은 "이렇게 쓰면 브라우저가 제목과 문단으로 보여 주는구나" 정도만 느끼면 됩니다.
이제 파일을 저장합니다. 파일 이름은 다음처럼 정합니다.
index.html여기서 중요한 부분은 뒤의 .html입니다. 이것을 확장자라고 부릅니다. 확장자는 파일의 종류를 알려 주는 꼬리표입니다.
예를 들어 photo.jpg는 이미지 파일이고, memo.txt는 텍스트 파일입니다. index.html은 HTML 파일이라는 뜻입니다.
웹사이트에서 첫 페이지 이름으로 index.html을 자주 사용합니다. 그래서 처음 연습 파일 이름도 index.html로 해 두면 좋습니다.
저장할 때 파일 형식을 고르는 칸이 보인다면, 윈도우 메모장에서는 모든 파일을 선택하면 도움이 됩니다. 그래야 파일 이름 뒤에 .txt가 몰래 붙는 일을 줄일 수 있습니다. 맥에서는 앞에서 말한 것처럼 일반 텍스트 문서로 저장하면 됩니다.
.txt가 몰래 붙지 않았는지 확인합니다
처음 HTML 파일을 만들 때 가장 자주 생기는 문제가 있습니다. 파일 이름을 index.html로 저장했다고 생각했는데, 실제로는 이렇게 저장되는 경우입니다.
index.html.txt이렇게 되면 컴퓨터는 이 파일을 HTML이 아니라 일반 텍스트 파일로 볼 수 있습니다. 브라우저에서 열었을 때 코드가 그대로 보이거나, 원하는 화면이 나오지 않을 수 있습니다.
파일 이름을 확인할 때는 마지막 부분을 봅니다.
좋은 예:
index.html주의할 예:
index.html.txt윈도우에서는 파일 확장자가 숨겨져 있을 수 있습니다. 파일 탐색기에서 파일 확장명 표시 옵션을 켜면 실제 이름을 확인하기 쉽습니다. 윈도우 버전에 따라 메뉴 이름은 조금 다를 수 있지만, 보통 보기 설정 근처에 있습니다.
맥에서도 Finder 설정에서 모든 파일 확장자를 보이게 할 수 있습니다. 또는 파일을 선택한 뒤 정보 보기를 열어 이름 끝이 .html인지 확인할 수 있습니다.
처음에는 이 부분이 조금 귀찮게 느껴질 수 있습니다. 하지만 한 번만 확인해 두면 이후 실습에서 많은 혼란을 줄일 수 있습니다.
파일을 더블클릭해서 브라우저로 엽니다
이제 index.html 파일을 찾아 더블클릭해 봅니다. 그러면 보통 기본 브라우저가 열리고, 우리가 쓴 내용이 화면에 나타납니다.
브라우저 화면에는 대략 이렇게 보일 것입니다.
안녕하세요
처음으로 만든 HTML 페이지입니다.코드에 있던 <h1>이나 <p>는 화면에 그대로 보이지 않습니다. 브라우저가 그 표시를 읽고 "이 부분은 제목이구나", "이 부분은 문단이구나"라고 해석했기 때문입니다.
이때 중요한 경험은 하나입니다.
HTML 파일은 브라우저가 열어 볼 수 있다.
인터넷에 올리지 않아도 됩니다. 서버라는 단어를 몰라도 됩니다. 내 컴퓨터 안에 있는 HTML 파일도 브라우저로 열어 확인할 수 있습니다.
만약 더블클릭했는데 편집기로 다시 열린다면, 파일을 마우스 오른쪽 버튼으로 클릭해 보세요. 그리고 "다음으로 열기" 또는 "Open With" 메뉴에서 크롬, 엣지, 사파리 같은 브라우저를 선택하면 됩니다.
고치고, 저장하고, 새로고침합니다
HTML을 배울 때 가장 많이 반복하는 동작은 이것입니다.
코드를 고친다.
저장한다.
브라우저를 새로고침한다.
화면이 어떻게 바뀌었는지 확인한다.
이 흐름을 손에 익히는 것이 중요합니다.
방금 만든 파일에서 문장을 조금 바꿔 봅니다.
<h1>우리 가게에 오신 것을 환영합니다</h1>
<p>매일 아침 신선한 빵을 굽습니다.</p>편집기에서 내용을 바꿨다면 반드시 저장해야 합니다. 저장하지 않으면 브라우저는 바뀐 내용을 알 수 없습니다.
저장한 뒤 브라우저로 돌아가 새로고침합니다.
윈도우: 보통
Ctrl + R맥: 보통
Command + R또는 브라우저의 새로고침 버튼 클릭
그러면 화면의 제목과 문장이 바뀝니다.
이 과정은 HTML 공부의 기본 리듬입니다.
수정 → 저장 → 새로고침 → 확인앞으로 새로운 태그를 배울 때도 이 순서를 반복하면 됩니다. 코드를 조금 바꾸고, 저장하고, 브라우저에서 결과를 봅니다. 결과가 예상과 다르면 다시 고쳐 봅니다. 이것이 가장 좋은 연습 방법입니다.
저장을 잊으면 화면은 바뀌지 않습니다
초보자가 가장 많이 겪는 상황이 있습니다.
"분명히 코드를 바꿨는데 화면이 그대로예요."
이럴 때는 먼저 저장했는지 확인합니다. 편집기에서 글을 바꾸기만 하고 저장하지 않으면, 브라우저는 예전 파일을 보고 있습니다.
또 하나는 새로고침입니다. 파일을 저장했더라도 브라우저 화면을 새로고침하지 않으면 이전 화면이 그대로 남아 있을 수 있습니다.
문제가 생겼을 때는 아래 순서로 확인해 보세요.
파일 이름이
index.html인가?index.html.txt가 아닌가?편집기에서 저장했는가?
브라우저에서 새로고침했는가?
지금 열고 있는 파일이 내가 고친 파일이 맞는가?
대부분의 실습 문제는 이 다섯 가지 안에서 해결됩니다.
작은 변경으로 연습합니다
이제 직접 한 줄씩 바꿔 봅니다. 아래 예시는 개인 소개 페이지처럼 보이게 만든 것입니다.
<h1>김민지의 소개 페이지</h1>
<p>안녕하세요. 저는 동네 책방을 운영하고 있습니다.</p>
<p>좋아하는 것은 커피, 산책, 조용한 음악입니다.</p>이번에는 행사 공지처럼 바꿔 볼 수도 있습니다.
<h1>여름 플리마켓 안내</h1>
<p>일시: 7월 12일 토요일 오후 2시</p>
<p>장소: 우리동네 문화센터 앞마당</p>또는 가게 안내 페이지처럼 만들어도 됩니다.
<h1>햇살 베이커리</h1>
<p>영업시간: 오전 8시부터 오후 7시까지</p>
<p>대표 메뉴: 소금빵, 크루아상, 딸기 케이크</p>세 예시 중 하나를 골라 index.html에 붙여 넣어 보세요. 그리고 저장한 뒤 새로고침합니다.
화면이 바뀌면 성공입니다.
여기서 중요한 것은 코드를 많이 쓰는 것이 아닙니다. 내가 쓴 HTML이 브라우저에서 어떻게 보이는지 직접 확인하는 것입니다.
오늘 익힌 작업 흐름
이번 장에서는 복잡한 설치 없이 첫 HTML 파일을 만들어 보았습니다.
핵심은 네 가지입니다.
HTML 실습은 텍스트 편집기와 브라우저만으로 시작할 수 있습니다.
첫 파일 이름은
index.html로 저장하면 좋습니다.파일 이름 끝이
.html인지 확인해야 합니다..txt가 붙으면 원하는 대로 열리지 않을 수 있습니다.코드를 바꾼 뒤에는 저장하고, 브라우저에서 새로고침해야 합니다.
앞으로 우리는 이 흐름을 계속 반복합니다.
파일 만들기 → 코드 쓰기 → 브라우저로 열기 → 수정하기 → 저장하기 → 새로고침하기이제 HTML을 배울 준비가 끝났습니다. 다음 장에서는 HTML 문서가 보통 어떤 모양을 가지고 있는지 살펴보겠습니다.
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.