HTML 독학 가이드 1 - 소개 및 시작하기

2025년 11월 25일 learning by Seven Fingers Studio 12분

HTML웹개발입문프로그래밍코딩

웹사이트를 만들고 싶은데 어디서부터 시작해야 할지 모르겠죠? 답은 간단합니다. HTML부터 배우세요. HTML은 모든 웹 페이지의 뼈대예요. 네이버, 유튜브, 인스타그램 전부 HTML로 만들어졌습니다.

HTML이 뭔가요?

HTML은 HyperText Markup Language의 약자예요. 어려워 보이지만 쉽게 말하면 “웹 페이지를 만드는 언어”입니다.

HyperText: 링크로 연결된 텍스트
Markup: 태그로 내용을 표시하는 것
Language: 브라우저가 이해하는 언어

HTML은 프로그래밍 언어가 아니에요. 마크업 언어예요. 계산하거나 로직을 짜는 게 아니라, 문서의 구조를 만드는 거죠.

웹 페이지의 3요소

웹 페이지는 3가지로 만들어져요:

HTML: 뼈대 (구조)
CSS: 옷 (디자인)
JavaScript: 움직임 (동작)

집으로 비유하면:

HTML = 기둥, 벽, 방
CSS = 페인트, 가구, 인테리어
JavaScript = 전기, 수도, 엘리베이터

HTML 없이는 웹 페이지가 존재할 수 없어요. 가장 기본이자 필수입니다.

왜 HTML을 배워야 할까?

1. 진입 장벽이 낮음

코딩 경험이 전혀 없어도 HTML은 하루면 기본을 익힐 수 있어요. 태그만 알면 됩니다.

2. 모든 웹 개발의 기초

프론트엔드 개발자가 되려면 HTML은 필수예요. React, Vue 배워도 결국 HTML을 쓰게 됩니다.

3. 바로 결과를 볼 수 있음

코드 짜면 바로 브라우저에서 확인 가능해요. 성취감이 빨리 옵니다.

4. 무료로 시작 가능

메모장과 브라우저만 있으면 돼요. 특별한 프로그램 설치 필요 없습니다.

개발 환경 설정

1. 텍스트 에디터 설치

VS Code 추천:

code.visualstudio.com 접속
Download 클릭
설치 진행

VS Code는 무료고, 자동 완성 기능이 좋아서 거의 모든 개발자가 씁니다.

2. 브라우저 준비

크롬(Chrome)이나 파이어폭스(Firefox)를 쓰세요. 개발자 도구가 좋아요.

3. 폴더 만들기

바탕화면이나 문서 폴더에 my-website 폴더를 만드세요.

첫 HTML 문서 만들기

Step 1: 파일 생성

VS Code를 열고 index.html 파일을 만드세요.

Step 2: 기본 구조 작성

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

실행 결과:

안녕하세요!

이것은 제 첫 번째 웹페이지입니다.

Step 3: 브라우저에서 열기

index.html 파일을 더블클릭하면 브라우저에서 열립니다. “안녕하세요!”가 보이면 성공!

HTML 기본 구조 이해하기

<!DOCTYPE html>

HTML5 문서임을 선언하는 거예요. 맨 위에 항상 써야 합니다.

<html lang="ko">

HTML 문서의 시작과 끝을 나타내요.
lang="ko"는 한국어 페이지라는 뜻입니다.

<head>

페이지의 정보를 담는 곳이에요.
화면에 안 보이는 설정들이 여기 들어갑니다.

<meta charset="UTF-8">

한글이 깨지지 않게 하는 설정이에요. 필수입니다!

<title>

브라우저 탭에 표시되는 제목이에요.

<body>

실제로 화면에 보이는 내용이 여기 들어갑니다.

태그의 기본 개념

HTML은 **태그(Tag)**로 이루어져요.

여는 태그와 닫는 태그

<p>이것은 문단입니다.</p>

실행 결과:

이것은 문단입니다.

<p>: 여는 태그 (시작)
</p>: 닫는 태그 (끝)
내용은 태그 사이에 들어가요

자체 닫기 태그

<br>
<img src="photo.jpg">
<hr>

실행 결과:

첫 번째 줄
두 번째 줄

(이미지는 실제 파일이 있을 때 표시됩니다)

이런 태그들은 닫는 태그가 없어요. 내용이 없거든요.

주석 작성하기

코드에 메모를 남길 수 있어요.

<!-- 이것은 주석입니다. 브라우저에 안 보입니다 -->
<p>이것은 보입니다</p>

실행 결과:

이것은 보입니다

(주석은 화면에 보이지 않습니다)

주석은 화면에 안 나와요. 나중에 코드를 볼 때 이해하기 쉽게 하려고 씁니다.

실습 예제

자기소개 페이지 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>자기소개</title>
</head>
<body>
    <h1>안녕하세요! 홍길동입니다</h1>
    <p>저는 웹 개발을 배우고 있는 초보 개발자입니다.</p>
    <p>HTML부터 차근차근 배우고 있어요.</p>

    <h2>관심사</h2>
    <p>웹 개발, 디자인, 사진</p>

    <h2>연락처</h2>
    <p>이메일: hong@example.com</p>
</body>
</html>

실행 결과:

안녕하세요! 홍길동입니다

저는 웹 개발을 배우고 있는 초보 개발자입니다.

HTML부터 차근차근 배우고 있어요.

관심사

웹 개발, 디자인, 사진

연락처

이메일: hong@example.com

이 코드를 index.html에 작성하고 브라우저에서 열어보세요!

자주 하는 실수

1. 태그 닫기 안 함

<!-- 틀림 -->
<p>안녕하세요

<!-- 맞음 -->
<p>안녕하세요</p>

2. 대소문자 섞어 쓰기

<!-- 비추천 -->
<P>문단</p>
<DIV>박스</div>

<!-- 추천 -->
<p>문단</p>
<div>박스</div>

소문자로 통일하세요.

3. 필수 구조 빠뜨리기

<!-- 틀림: DOCTYPE, html, head, body 없음 -->
<h1>제목</h1>

<!-- 맞음: 완전한 구조 -->
<!DOCTYPE html>
<html>
<head>
    <title>제목</title>
</head>
<body>
    <h1>제목</h1>
</body>
</html>

학습 로드맵

이 시리즈에서 배울 내용:

소개 및 시작하기 ← 지금 여기
기본 태그와 문서 구조
텍스트와 링크
이미지와 멀티미디어
리스트와 테이블
폼과 입력 요소
시맨틱 태그
레이아웃 구성
메타 태그와 SEO
실전 웹페이지 만들기

한 단계씩 차근차근 따라오세요.

다음 단계

다음 글에서는 기본 태그와 문서 구조를 배웁니다. 제목, 문단, 줄바꿈 같은 필수 태그들을 알아볼 거예요.

HTML은 정말 쉬워요. 태그만 외우면 됩니다. 직접 타이핑하면서 익히는 게 가장 빠른 방법이에요!

HTML 독학 가이드 시리즈:

다음: HTML 독학 가이드 - 기본 태그와 문서 구조

← 블로그 목록으로