HTML — ClaudeCode를 활용한 바이브코딩 강의

HTML은 제목·문단·목록·링크처럼 웹 문서의 내용과 구조를 표시하는 언어입니다. 그 내용을 글자로 저장한 것이 .html 파일이며, 브라우저는 파일 속 표시를 해석해 웹 페이지로 보여 줍니다.

1. HTML의 역할

예를 들어 강의 안내 페이지에는 ‘수업 안내’라는 제목, 수업 설명 문단, 준비물 목록, 신청 페이지로 가는 링크가 있습니다. HTML은 이 글들이 각각 제목인지, 문단인지, 목록인지, 링크인지 표시합니다. 단순히 글자 크기를 크게 만드는 것과 문서의 제목이라고 표시하는 것은 다릅니다.

중요도	구성	맡는 역할	강의 안내 예
핵심	HTML	내용의 의미와 구조를 표시합니다.	제목, 설명 문단, 준비물 목록, 신청 링크를 만듭니다.
중요	CSS	색·글꼴·간격·배치 등 모양을 꾸밉니다.	제목을 파란색으로, 준비물 영역을 상자 모양으로 표시합니다.
중요	JavaScript	입력이나 클릭에 반응하는 동작을 만듭니다.	검색어에 맞는 강의만 표시합니다.

HTML만으로도 제목·문단·목록·링크가 있는 페이지를 만들 수 있습니다. 처음부터 CSS와 JavaScript를 모두 작성할 필요는 없습니다.

개념 참고: MDN의 HTML 안내.

2. 파일 원본과 브라우저 화면

HTML 파일은 일반 텍스트 파일입니다. 편집기에서 열면 <h1>수업 안내</h1>처럼 꺾쇠가 있는 원본 코드가 보입니다. 브라우저에서 같은 파일을 열면 꺾쇠 대신 ‘수업 안내’라는 제목이 보입니다.

중요도	여는 곳	보이는 내용	하는 일
핵심	텍스트·코드 편집기	태그와 글자가 있는 원본입니다.	내용을 고치고 저장합니다.
핵심	웹 브라우저	원본을 해석한 페이지입니다.	제목·문단·링크가 의도대로 나타나는지 확인합니다.

파일 하나를 서로 다른 용도로 열어 보는 것입니다. 편집기에서 저장한 뒤 브라우저를 새로고침하면 바뀐 내용을 확인할 수 있습니다. 브라우저 화면에서 보이는 글자를 선택하는 것만으로 원본 파일이 수정되지는 않습니다.

3. 작은 예제

아래는 그대로 index.html에 저장해 볼 수 있는 완전한 예제입니다. 외부 파일이나 설치가 필요하지 않으며, 링크를 누르면 같은 페이지의 ‘실습 순서’로 이동합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>첫 웹 페이지</title>
</head>
<body>
  <h1>나의 첫 웹 페이지</h1>
  <p>HTML 파일을 브라우저로 열었습니다.</p>
  <a href="#steps">실습 순서로 이동</a>
  <h2 id="steps">실습 순서</h2>
  <ol>
    <li>파일을 저장합니다.</li>
    <li>브라우저에서 확인합니다.</li>
  </ol>
</body>
</html>

<h1>은 가장 높은 단계의 제목, <p>는 문단, <a>는 링크를 표시하는 태그입니다. <h1>과 </h1> 사이에 제목 글자를 넣는 식으로 작성합니다. 모든 태그가 같은 짝 구조인 것은 아니며, 예제의 <meta>처럼 닫는 태그가 없는 경우도 있습니다.

<head>에는 문서 정보를, <body>에는 페이지에 표시할 내용을 넣습니다. <title>은 브라우저 탭의 이름이며, 페이지 안에 보이는 <h1> 제목과 구별됩니다. 첫 줄의 <!doctype html>은 브라우저가 문서를 표준 방식으로 해석하도록 하는 선언입니다.

구조와 작성법 참고: MDN의 첫 HTML 문서 만들기. 위 예제는 이 강의용으로 작성했습니다.

4. 만들고 열기

위 예제를 직접 저장하거나, Claude에게 다음처럼 요청합니다. 여기서는 다른 파일과 섞이지 않도록 새 실습 폴더를 사용합니다.

새 html-practice 폴더에 index.html 원본 파일을 만들어 줘.
제목은 '나의 첫 웹 페이지'로 하고, 설명 문단과
실습 순서 목록, 같은 페이지의 실습 순서로 이동하는 링크를 넣어 줘.
외부 파일·라이브러리·서버 없이 HTML 하나로 열리게 작성해 줘.
기존 파일은 덮어쓰지 말고, 완료되면 저장한 전체 경로를 알려 줘.

대화창에 코드가 나타난 것과 실제 파일이 저장된 것은 다릅니다. Claude가 알려 준 경로에서 index.html 파일을 확인합니다. 파일 생성 기능이 없는 대화 환경이라면 코드 부분만 텍스트 편집기에 붙여 넣고 직접 저장합니다. 앞뒤의 설명이나 코드 블록을 감싸는 백틱 기호는 파일에 넣지 않습니다.

중요도	환경	브라우저로 여는 방법
핵심	Mac	Finder에서 `index.html`을 찾습니다. 기본 연결 앱이 브라우저이면 더블클릭합니다. 편집기가 열린다면 파일을 보조 클릭한 뒤 ‘다음으로 열기’에서 Safari·Chrome 등 브라우저를 선택합니다.
핵심	Windows	파일 탐색기에서 `index.html`을 찾습니다. 기본 연결 앱이 브라우저이면 더블클릭합니다. 다른 앱이 열린다면 마우스 오른쪽 버튼의 ‘연결 프로그램’에서 Edge·Chrome 등 브라우저를 선택합니다.

같은 파일을 편집기에서도 열어 제목 글자를 바꾸고 저장합니다. 브라우저로 돌아가 새로고침한 뒤 제목이 바뀌었는지 확인합니다. 파일이 길어지면 링크를 눌렀을 때 해당 제목으로 화면이 이동하는 것도 확인할 수 있습니다.

5. 파일·서버·배포

내 파일을 여는 것, 내 컴퓨터의 서버로 실행하는 것, 다른 사람에게 웹 주소로 공개하는 것은 서로 다른 단계입니다.

중요도	주소 예	의미
핵심	`file:///…/index.html`	브라우저가 내 컴퓨터의 파일을 직접 엽니다. 위 예제는 이 방식으로 확인할 수 있습니다.
중요	`http://localhost:8000`	내 컴퓨터에서 실행한 서버에 접속합니다. 해당 서버가 실행 중이어야 하며, 이 주소를 친구에게 보내도 친구의 컴퓨터에서 내 페이지가 열리지는 않습니다.
중요	`https://example.com`	이 예에서는 인터넷에 배포한 사이트의 주소입니다. 다른 사람이 접속하도록 하려면 호스팅 등에 파일을 올리고 공개 범위를 정해야 합니다.

https는 통신 방식이므로 그 표시만으로 누구나 볼 수 있는 공개 페이지라는 뜻은 아닙니다. 로그인이나 접근 권한이 필요한 사이트도 있습니다.

단순 HTML 문서는 파일로 열 수 있지만, 다른 파일의 데이터를 읽는 기능은 브라우저 보안 제한에 걸릴 수 있습니다. 서버에서 처리하는 로그인·데이터베이스 저장 등의 기능에는 그에 맞는 서버도 필요합니다. 모든 웹 앱이 더블클릭만으로 실행되는 것은 아닙니다. 그런 프로젝트는 제공된 실행 안내에 따라 실행하며, 이 연습에서는 서버 설치나 배포를 하지 않습니다.

실행 방식 참고: MDN의 로컬 파일과 테스트 서버 설명. 배포 참고: MDN의 웹사이트 공개 안내.

6. 막힐 때 확인

중요도	상황	확인할 것
핵심	브라우저 대신 편집기가 열립니다.	파일의 연결 앱 차이일 수 있습니다. 위의 ‘다음으로 열기’ 또는 ‘연결 프로그램’에서 브라우저를 선택합니다.
중요	한글이 깨집니다.	파일을 UTF-8로 저장했는지, 원본에 `<meta charset="utf-8">`이 있는지 확인합니다.
중요	페이지 대신 코드가 보입니다.	현재 앱이 편집기인지, 실제 파일명이 `index.html.txt`인지 확인합니다. 확장자를 표시해 마지막이 `.html`인지 확인합니다.
중요	저장해도 바뀌지 않습니다.	편집한 파일과 브라우저가 연 파일의 경로가 같은지 확인하고, 저장한 뒤 새로고침합니다.
중요	문서 형식을 무엇으로 저장할지 모르겠습니다.	일반 텍스트로 저장합니다. Mac TextEdit이라면 일반 텍스트 형식을 사용하며, Word·서식 있는 문서의 확장자만 바꾸지 않습니다.