HTML 기초 강좌 1편: 메모장으로 첫 웹페이지 만들기

코딩 첫걸음, HTML 기초부터 차근차근 만들어보기

코딩을 처음 시작하려고 마음먹으면 가장 먼저 고민되는 것이 “무엇부터 배워야 할까?”라는 질문입니다. 파이썬, 자바스크립트, 자바 등 수많은 언어가 있지만, 눈으로 결과를 바로 확인할 수 있고 진입 장벽이 낮다는 점에서 HTML은 입문자에게 가장 추천하는 출발점입니다. 오늘은 HTML이 무엇인지부터 시작해 실제로 간단한 웹페이지를 직접 만들어보는 과정까지 하나씩 정리해 보겠습니다. 메모장 하나만 있어도 따라 할 수 있으니 부담 없이 함께해 보세요.

1. HTML이란 무엇인가요?

HTML은 HyperText Markup Language의 약자로, 웹페이지의 뼈대를 만드는 언어입니다. 엄밀히 말하면 계산이나 조건 판단을 하는 프로그래밍 언어라기보다는, 문서의 구조를 표시하는 마크업 언어에 가깝습니다. 우리가 인터넷에서 보는 제목, 문단, 사진, 링크, 표 같은 요소들은 모두 HTML로 “여기는 제목이다”, “여기는 문단이다”라고 표시해 둔 결과물입니다.

웹을 집에 비유하면 이해가 쉽습니다. HTML은 집의 기둥과 벽 같은 구조, CSS는 벽지와 인테리어 같은 디자인, 자바스크립트는 전등 스위치나 자동문 같은 동작을 담당합니다. 그래서 웹 개발을 배운다면 HTML을 가장 먼저 익히는 것이 자연스러운 순서입니다.

2. 준비물: 메모장과 웹 브라우저면 충분합니다

HTML을 시작하는 데 특별한 프로그램을 설치할 필요는 없습니다. 윈도우의 메모장이나 맥의 텍스트 편집기, 그리고 크롬이나 엣지 같은 웹 브라우저만 있으면 됩니다. 다만 조금 더 편하게 작업하고 싶다면 무료 코드 편집기인 Visual Studio Code(VS Code)를 추천합니다. 코드에 색이 입혀져 읽기 쉽고, 자동 완성 기능 덕분에 오타도 줄어듭니다.

파일을 저장할 때는 확장자를 반드시 .html로 지정해야 합니다. 예를 들어 index.html처럼 저장한 뒤 파일을 더블클릭하면 브라우저에서 바로 결과를 확인할 수 있습니다.

3. HTML 문서의 기본 구조

모든 HTML 문서는 정해진 기본 틀을 가지고 있습니다. 처음에는 외운다기보다 “항상 이런 모양으로 시작하는구나” 정도로 익혀 두면 충분합니다.

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

각 부분의 의미를 간단히 정리하면 다음과 같습니다.

• <!DOCTYPE html> : 이 문서가 HTML5 문서임을 브라우저에 알려주는 선언입니다.
• <html> : 문서 전체를 감싸는 가장 바깥쪽 태그입니다. lang="ko"는 한국어 문서라는 뜻입니다.
• <head> : 화면에 직접 보이지 않는 문서 정보(문자 인코딩, 제목 등)를 담는 영역입니다.
• <meta charset=”UTF-8″> : 한글이 깨지지 않도록 문자 인코딩을 지정합니다.
• <title> : 브라우저 탭에 표시되는 페이지 제목입니다.
• <body> : 실제로 화면에 보이는 모든 내용이 들어가는 영역입니다.

4. 태그의 기본 규칙 이해하기

HTML은 태그(tag)라는 단위로 이루어집니다. 대부분의 태그는 여는 태그와 닫는 태그가 한 쌍을 이루며, 닫는 태그에는 슬래시(/)가 붙습니다. 예를 들어 <p>내용</p>처럼 작성합니다. 반면 이미지(<img>)나 줄바꿈(<br>)처럼 감쌀 내용이 없는 태그는 닫는 태그 없이 단독으로 사용합니다.

또한 태그 안에는 속성(attribute)을 넣어 추가 정보를 전달할 수 있습니다. 링크의 주소를 지정하는 href, 이미지 경로를 지정하는 src 등이 대표적인 속성입니다.

5. 꼭 알아야 할 기본 태그 정리

① 제목 태그 (h1 ~ h6)
제목은 중요도에 따라 h1부터 h6까지 여섯 단계로 나뉩니다. h1이 가장 크고 중요한 제목이며, 한 페이지에 h1은 보통 한 번만 사용하는 것이 좋습니다. 검색 엔진도 이 제목 구조를 참고해 페이지 내용을 파악합니다.

<h1>가장 큰 제목</h1>
<h2>중간 제목</h2>
<h3>작은 제목</h3>

② 문단과 줄바꿈 (p, br)
글의 한 문단은 <p> 태그로 감쌉니다. HTML에서는 코드에서 엔터를 여러 번 눌러도 화면에는 줄이 바뀌지 않기 때문에, 문단 안에서 줄을 바꾸고 싶다면 <br>을 사용합니다.

③ 링크 (a)
다른 페이지로 이동하는 하이퍼링크를 만들 때 사용합니다. target="_blank"를 추가하면 새 탭에서 열립니다.

<a href="https://www.example.com" target="_blank">예시 사이트로 이동</a>

④ 이미지 (img)
이미지를 넣을 때는 src에 파일 경로를, alt에 이미지 설명을 적습니다. alt 속성은 이미지가 보이지 않을 때 대신 표시되고, 시각장애인용 화면 낭독기와 검색 엔진도 이 내용을 읽기 때문에 꼭 작성하는 습관을 들이는 것이 좋습니다.

<img src="cat.jpg" alt="창가에 앉아 있는 고양이" width="300">

⑤ 목록 (ul, ol, li)
순서가 없는 목록은 <ul>, 순서가 있는 목록은 <ol>을 사용하고, 각 항목은 <li>로 작성합니다.

<ul>
  <li>사과</li>
  <li>바나나</li>
</ul>

<ol>
  <li>물을 끓인다</li>
  <li>면을 넣는다</li>
</ol>

6. 실습: 나만의 자기소개 페이지 만들기

지금까지 배운 태그를 모두 활용해 간단한 자기소개 페이지를 만들어 보겠습니다. 아래 코드를 메모장에 붙여넣고 profile.html로 저장한 뒤 브라우저로 열어보세요. 이름과 내용을 자신의 정보로 바꿔보면 훨씬 재미있게 연습할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>홍길동의 자기소개</title>
</head>
<body>
  <h1>안녕하세요, 홍길동입니다</h1>
  <p>코딩을 막 배우기 시작한 입문자입니다.<br>
     오늘은 HTML로 첫 페이지를 만들어 보았습니다.</p>

  <h2>좋아하는 것</h2>
  <ul>
    <li>여행</li>
    <li>독서</li>
    <li>커피</li>
  </ul>

  <h2>올해 목표</h2>
  <ol>
    <li>HTML 기초 완성하기</li>
    <li>CSS로 페이지 꾸미기</li>
    <li>나만의 웹사이트 만들기</li>
  </ol>

  <p>더 많은 공부 기록은
     <a href="https://www.example.com" target="_blank">제 블로그</a>에서 볼 수 있어요.</p>
</body>
</html>

브라우저에 제목, 문단, 목록, 링크가 순서대로 나타난다면 성공입니다. 아직 디자인은 단순하지만, 이것만으로도 완전한 하나의 웹페이지가 완성된 것입니다.

7. 초보자가 자주 하는 실수와 해결 방법

• 한글이 깨져 보여요 : <meta charset="UTF-8">가 빠졌거나, 파일을 UTF-8 형식으로 저장하지 않은 경우입니다. 메모장에서 “다른 이름으로 저장” 시 인코딩을 UTF-8로 선택하세요.
• 파일을 열었더니 코드가 그대로 보여요 : 확장자가 .html.txt로 저장된 경우가 많습니다. 파일 확장자 표시를 켜고 이름을 확인해 보세요.
• 화면 구성이 이상하게 깨져요 : 닫는 태그를 빠뜨렸을 가능성이 높습니다. 여는 태그와 닫는 태그가 짝을 이루는지 하나씩 점검해 보세요.
• 이미지가 안 보여요 : 이미지 파일이 HTML 파일과 같은 폴더에 있는지, 파일명과 확장자(jpg, png)가 정확한지 확인하세요.

8. 다음 단계는 무엇을 공부하면 좋을까요?

HTML의 기본 태그에 익숙해졌다면 다음 순서로 학습을 이어가는 것을 추천합니다. 먼저 표를 만드는 <table>, 사용자 입력을 받는 <form>과 <input> 같은 태그를 익혀 HTML을 마무리합니다. 그다음 CSS를 배워 글자 색, 배경, 여백, 레이아웃을 꾸며보고, 마지막으로 자바스크립트를 통해 버튼 클릭 같은 동작을 추가하면 본격적인 웹페이지를 만들 수 있게 됩니다.

마무리하며

HTML은 어렵게 느껴질 수 있지만, 사실 몇 가지 기본 규칙과 자주 쓰는 태그만 알면 누구나 웹페이지를 만들 수 있는 친근한 언어입니다. 중요한 것은 눈으로만 읽는 것이 아니라 직접 코드를 입력하고 결과를 확인해 보는 경험입니다. 오늘 만든 자기소개 페이지에 내용을 조금씩 추가하고 바꿔보면서 손에 익혀 보세요. 다음 글에서는 오늘 만든 페이지를 CSS로 예쁘게 꾸미는 방법을 다뤄보겠습니다. 궁금한 점이 있다면 댓글로 남겨 주세요!