기본 구조와 요소

1. 태그의 생김새

HTML은 태그(tag)라는 부품으로 이루어집니다. 태그는 꺾쇠 < >로 감싼 표시이고, 대부분 여는 태그와 닫는 태그가 짝을 이룹니다.

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

이 한 줄을 뜯어보면 이렇습니다.

<p>: 여기서부터 문단이 시작된다는 신호입니다.
안녕하세요: 실제로 화면에 보일 내용입니다.
</p>: 여기서 문단이 끝난다는 신호입니다. 닫는 태그에는 슬래시 /가 붙습니다.

닫는 태그를 빠뜨리면 그 뒤의 모든 내용이 문단에 휩쓸려 들어가 화면이 망가집니다. 여는 태그를 썼으면 닫는 태그를 챙긴다, 이게 HTML의 첫 번째 규칙입니다.

화면에 안 보이는 메모, 주석

<!-- 이 부분은 주석입니다, 화면에 보이지 않습니다 -->
<p>이 부분은 화면에 보입니다.</p>

코드 중간에 위와 같이 적으면 화면에는 전혀 안 보이고, 코드를 읽는 사람에게만 남기는 메모가 됩니다. "여기는 헤더 영역", "이 부분 나중에 수정" 같은 표시를 달아둘 때 씁니다. AI도 이 메모를 읽으니, "주석으로 표시해 둔 부분만 고쳐줘"처럼 길잡이로 쓸 수 있습니다.

2. 속성

태그에는 추가 정보를 붙일 수 있습니다. 이걸 속성(attribute)이라고 합니다. 여는 태그 안에 이름="값" 형태로 적습니다.

<a href="https://weniv.co.kr">위니브로 이동</a>

여기서 href="https://weniv.co.kr"가 속성입니다. <a>는 링크를 만드는 태그인데, 어디로 이동할지는 href 속성에 적어줍니다. 속성이 있어야 비로소 "위니브로 이동"이라는 글자가 클릭 가능한 링크가 됩니다.

자주 만나는 속성은 이 정도입니다.

속성	하는 일	예시
`href`	링크가 이동할 주소	`<a href="about.html">`
`src`	이미지·영상이 가져올 파일	`<img src="logo.png">`
`alt`	이미지가 안 뜰 때 대신 보일 글	`<img alt="회사 로고">`
`class`	CSS·JS가 이 요소를 찾는 이름표	`<div class="card">`
`id`	페이지에서 단 하나뿐인 이름표	`<div id="header">`

class와 id를 기억해 두세요: 이 둘은 요소에 붙이는 이름표입니다. CSS로 꾸미거나 JavaScript로 움직임을 줄 때, "이름표가 card인 녀석을 빨갛게 칠해줘" 같은 식으로 가리킵니다. AI에게 "hero라는 클래스가 붙은 영역의 글자를 키워줘"처럼 이름표로 지목하면 정확히 그 부분만 고쳐줍니다.

3. 문서 전체의 뼈대

HTML 파일 하나는 정해진 뼈대를 갖습니다. AI가 만들어주는 코드도 늘 이 모양으로 시작합니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>내 첫 페이지</title>
  </head>
  <body>
    <h1>안녕하세요</h1>
    <p>여기가 화면에 보이는 부분입니다.</p>
  </body>
</html>

각 부분의 역할은 이렇습니다.

<!DOCTYPE html>: "나는 HTML 문서야"라는 첫 인사입니다. 항상 맨 위에 한 번 적습니다.
<head>: 화면에 직접 보이지 않는 설정이 들어갑니다. 페이지 제목(브라우저 탭에 뜨는 글자), 문자 인코딩, 연결할 CSS 파일 등입니다.
<body>: 화면에 보이는 모든 내용이 여기 들어갑니다. 우리가 실제로 손대는 곳은 대부분 <body> 안쪽입니다.

외우지 마세요: 이 뼈대는 AI가 항상 자동으로 만들어줍니다. 여러분은 "보이는 건 <body> 안에 있다"는 것만 기억하면 됩니다. 무언가를 화면에서 바꾸고 싶다면 <body> 안을 보면 됩니다.

4. 자주 쓰는 요소들

모든 태그를 알 필요는 없습니다. 화면을 읽고 고치는 데 자주 쓰이는 것만 모았습니다.

4.1 제목과 문단

<h1>가장 큰 제목</h1>
<h2>중간 제목</h2>
<h3>작은 제목</h3>
<p>문단입니다. 본문 글은 거의 다 이 태그에 담깁니다.</p>

<h1>부터 <h6>까지 있고, 숫자가 커질수록 작은 제목입니다. 마크다운의 #, ##과 똑같은 개념입니다. <p>는 문단(paragraph)을 뜻합니다.

4.2 강조: 굵게와 기울임

문장 안에서 일부 글자만 도드라지게 하고 싶을 때 씁니다.

<p>이번 행사는 <strong>사전 신청자</strong>에 한해 <em>무료</em>로 진행됩니다.</p>

<strong>: 글자를 굵게 만들면서 "이건 중요한 부분"이라는 의미까지 담습니다.
<em>: 글자를 기울이면서 "여기를 힘주어 읽어라"라는 강조의 의미를 담습니다.

단순히 모양만 바꾸는 <b>(굵게), <i>(기울임)도 있지만, 보통은 의미까지 함께 전하는 <strong>과 <em>을 씁니다. AI에게 "이 단어를 강조해줘"라고 하면 대개 이 태그로 감싸 줍니다.

4.3 줄바꿈과 구분선

HTML에는 한 가지 의외의 규칙이 있습니다. 코드에서 아무리 줄을 바꾸고 띄어 써도, 화면에서는 그냥 한 칸으로 붙어 버립니다.

<p>이번 행사는
사전 신청자에 한해
무료로 진행됩니다.</p>

위처럼 세 줄로 적어도 화면에는 이번 행사는 사전 신청자에 한해 무료로 진행됩니다. 한 줄로 나옵니다. 그래서 화면에서 줄을 바꾸려면 줄바꿈 태그가 따로 필요합니다.

<p>이번 행사는 사전 신청자에 한해<br />무료로 진행됩니다.</p>
<hr />

<br>: 그 자리에서 줄을 바꿉니다(break).
<hr>: 가로로 구분선을 한 줄 긋습니다(horizontal rule). 내용이 바뀌는 경계에 씁니다.

둘 다 내용이 없어서 닫는 태그 없이 혼자 쓰는 빈 태그입니다.

4.4 링크와 이미지

링크는 <a> 태그로 만듭니다. href에 적는 주소에 따라 두 가지로 쓸 수 있습니다.

<!-- 내 컴퓨터의 다른 HTML 파일로 이동 -->
<a href="002.html">다음 페이지로</a>
<a href="003.html">마지막 페이지로</a>

<!-- 인터넷의 다른 사이트로 이동 -->
<a href="https://weniv.co.kr">위니브 바로가기</a>

파일 이동: href에 002.html처럼 같은 폴더에 있는 다른 파일 이름을 적으면, 그 파일로 넘어갑니다. 이렇게 여러 HTML 파일을 링크로 이어 붙이면 '페이지가 여러 장인 웹사이트'가 됩니다.
외부 링크: href에 https://로 시작하는 인터넷 주소를 적으면, 그 사이트로 이동합니다.

둘 다 같은 <a> 태그입니다. href에 무엇을 적느냐의 차이일 뿐입니다. 이 장 마지막 실습에서 직접 세 개의 파일을 만들어 서로 이어 보겠습니다.

이미지는 <img> 태그로 넣습니다.

<img src="logo.png" alt="위니브 로고" />

<img>는 내용이 없어서 닫는 태그 없이 혼자 쓰는 빈 태그입니다.

<img>의 src에는 보여줄 이미지 파일의 위치를 적습니다. 같은 폴더에 있으면 src="jeju.jpg"처럼 파일 이름만 적고, src="img/jeju.jpg"처럼 폴더를 거쳐 가리킬 수도 있습니다. 이 "파일을 가리키는 길(경로)"은 바이브 코딩에서 자주 막히는 지점이라, 다음 장에서 따로 자세히 다룹니다.

alt를 빠뜨리지 마세요: 이미지가 어떤 이유로든 안 뜰 때, alt에 적은 글이 대신 보입니다. 화면을 못 보는 분들이 쓰는 읽어주는 프로그램도 이 글을 읽습니다. AI는 보통 채워주지만, 비어 있다면 채워달라고 하세요.

이미지 저작권에 꼭 주의하세요: 검색해서 나온 이미지를 가져다 쓰면 화면에는 잘 보이지만, 그렇다고 마음대로 써도 되는 건 아닙니다. 특히 보고서·발표 자료처럼 외부에 공개되는 결과물에는 저작권 문제가 생길 수 있습니다. 직접 찍은 사진, 저작권이 풀린 무료 이미지, 사용 허락을 받은 이미지만 쓰는 습관을 들이세요.

4.5 리스트

<ul>
  <li>순서 없는 항목</li>
  <li>점으로 표시됩니다</li>
</ul>

<ol>
  <li>순서 있는 항목</li>
  <li>1, 2, 3 번호가 매겨집니다</li>
</ol>

<ul>은 순서 없는 목록(점), <ol>은 순서 있는 목록(번호)입니다. 둘 다 각 항목은 <li>로 감쌉니다. <li>는 항상 <ul>이나 <ol> 안에 들어갑니다.

4.6 표

여러 항목을 가로·세로로 줄 맞춰 보여줄 때 씁니다. 예산표, 일정표, 명단처럼 보고서에 자주 들어가는 표가 모두 이 태그로 만들어집니다.

<table>
  <tr>
    <th>구분</th>
    <th>세부 내용</th>
    <th>금액</th>
  </tr>
  <tr>
    <td>무대 및 시설</td>
    <td>음향, 조명, 천막</td>
    <td>45,000,000원</td>
  </tr>
  <tr>
    <td>홍보 및 마케팅</td>
    <td>포스터, SNS 광고</td>
    <td>18,000,000원</td>
  </tr>
</table>

<table>: 표 전체를 감쌉니다.
<tr>: 한 줄(가로 행)을 만듭니다(table row).
<th>: 머리 칸입니다. 보통 맨 윗줄의 제목 칸으로, 굵게 표시됩니다(table header).
<td>: 일반 데이터 칸입니다(table data).

표는 <tr>로 가로줄을 만들고, 그 안에 <th>나 <td>로 칸을 채워 넣는 구조입니다. 가로줄의 칸 개수를 맞춰야 표가 반듯하게 나옵니다.

선이 안 보여요: 아무것도 꾸미지 않으면 표에 칸 선이 보이지 않습니다. 선과 색은 CSS로 입히는데, AI에게 "표에 테두리를 그어 보기 좋게 만들어줘"라고 하면 알아서 꾸며 줍니다. 우리는 어떤 내용을 어떤 칸에 넣을지만 신경 쓰면 됩니다.

4.7 영상이나 지도 가져오기

유튜브 영상이나 지도처럼 다른 사이트의 화면을 내 페이지 안에 끼워 넣을 때는 <iframe>을 씁니다. 유튜브·구글 지도 등에서 제공하는 '공유 → 소스 코드(임베드)'를 복사해 붙이면 됩니다.

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/영상주소"
></iframe>

파일을 더블 클릭하면 영상이 안 나와요: 유튜브 같은 외부 화면은 HTML 파일을 그냥 열면 안 보일 수 있습니다. 실제 서버에 올리거나, 다음 장에서 배울 임시 서버로 실행하면 정상적으로 나옵니다. 지금 단계에서는 "이런 것도 끼워 넣을 수 있구나" 정도만 알아두면 충분합니다.

4.8 영역을 나누는 태그

페이지를 여러 덩어리로 나눌 때 쓰는 태그입니다. 그 자체로는 화면에 별다른 모양이 없지만, 묶음을 만들어 CSS로 꾸미거나 배치할 때 기준이 됩니다.

<div class="card">
  <h2>제목</h2>
  <p>이 둘을 하나의 카드로 묶었습니다.</p>
</div>

<div>: 한 덩어리(블록)를 묶습니다. 가장 많이 쓰는 태그입니다.
<span>: 글자 일부처럼 작은 조각을 묶습니다.

여기에 더해, 의미를 분명히 드러내는 태그들이 있습니다. 생김새는 <div>와 비슷하지만 이름만으로 역할이 드러납니다.

<header>맨 위 머리말 (로고, 메뉴)</header>
<nav>메뉴 모음</nav>
<main>페이지의 핵심 본문</main>
<footer>맨 아래 꼬리말 (저작권, 연락처)</footer>

이런 태그를 시맨틱(semantic, 의미를 가진) 태그라고 합니다. AI에게 "헤더를 고쳐줘", "푸터에 연락처를 넣어줘"라고 말하면 이 이름을 알아듣고 정확히 그 영역을 손봅니다.

5. 실습: 세 페이지를 링크로 잇기

배운 태그로 서로 이어지는 세 장짜리 웹사이트를 직접 만들어 봅시다. 같은 폴더에 001.html, 002.html, 003.html 세 파일을 만들고, <a> 태그로 앞뒤를 이으면 됩니다.

먼저 001.html입니다. 제목, 문단, 그리고 다음 장으로 가는 링크를 넣습니다.

<!-- 001.html -->
<h1>제주 감귤 축제 안내</h1>
<p>제주대학교에서 열리는 <strong>가을 대표 축제</strong>를 소개합니다.</p>

<a href="002.html">프로그램 보러 가기 →</a>

다음은 002.html입니다. 리스트로 프로그램을 적고, 이전·다음 링크를 모두 답니다.

<!-- 002.html -->
<h2>주요 프로그램</h2>
<ul>
  <li>감귤 따기 체험</li>
  <li>감귤청 만들기</li>
  <li>야간 공연</li>
</ul>

<a href="001.html">← 처음으로</a>
<a href="003.html">오시는 길 →</a>

마지막 003.html에는 표와 외부 링크를 넣습니다. <a> 태그가 다른 파일과 외부 사이트 양쪽으로 쓰인다는 걸 직접 확인해 보세요.

<!-- 003.html -->
<h2>오시는 길</h2>
<table>
  <tr>
    <th>구분</th>
    <th>내용</th>
  </tr>
  <tr>
    <td>장소</td>
    <td>제주대학교</td>
  </tr>
  <tr>
    <td>기간</td>
    <td>3박 4일</td>
  </tr>
</table>

<a href="002.html">← 프로그램으로</a>
<a href="https://www.weniv.co.kr">위니브 홈페이지</a>

세 파일을 같은 폴더에 저장한 뒤 001.html을 더블 클릭해 열어 보세요. 링크를 누르면 002.html, 003.html로 페이지가 넘어가고, 마지막 외부 링크를 누르면 위니브 사이트로 이동합니다. 여러 HTML 파일을 링크로 이으면 그게 곧 웹사이트라는 걸 알 수 있습니다.

막히면 AI에게: "001.html, 002.html, 003.html 세 파일을 만들어서 서로 이전·다음으로 이동하는 링크를 달아줘"라고 부탁하면 한 번에 만들어 줍니다. 받은 코드에서 링크의 href가 어떤 파일을 가리키는지 눈으로 짚어 보는 것까지가 이 실습의 핵심입니다.

6. 과제: AI로 행사 기획 문서 한 세트 만들기

이번 과제는 직접 태그를 치는 게 아니라, AI에게 일을 시켜 결과물을 만들고, 나온 HTML을 읽고 고치는 것이 목표입니다. 우리 수업의 핵심은 바로 이 흐름입니다.

상황은 이렇습니다.

당신은 제주도청 OOO으로 OO 행사 기획을 진행하고 있습니다. 예산은 O억이고, O박 O일 행사를 해야 하는 상황이며, 상세 날짜·장소·대상·인원 등을 확정해야 합니다. 이 내용으로 아래 네 가지 결과물을 만들어 주세요.

만들 결과물은 다음과 같습니다.

마크다운 보고서
HTML 보고서 — 우측 상단에 팀장·과장·주무관 사인란 필요
HTML로 된 예산안 — 차트 등도 포함
HTML 프레젠테이션 — 예산 비중 차트 필요

진행 방법

AI에게 단계별로 요청하면 됩니다. 아래 순서를 그대로 따라 해보세요.

1단계 — 마크다운 보고서 요청

나는 'OO 행사'를 기획하는 담당자야. 예산은 2억이고, 3박 4일 행사야.
장소·대상·인원은 적절히 제안해줘. 간단한 요약 문서를 마크다운으로 작성해줘.
특히 예산 부분은 항목을 상세히 나누어서 작성해줘.

2단계 — HTML 보고서로 변환

이 문서를 과장님에게 보고할 거야. HTML 보고서로 만들어줘.
문서 우측 상단에 팀장·과장·주무관 사인란도 넣어줘.

3단계 — 예산안을 표와 차트로

예산 항목을 표로 정리하고, 항목별 비중을 차트로도 보여주는 HTML 예산안을 만들어줘.

4단계 — 발표용 슬라이드로

이 내용을 팀 발표용 HTML 슬라이드로 만들어줘. 예산 비중 차트를 넣고,
이전·다음으로 넘기는 버튼도 달아줘.

핵심은 '읽고 고치기'입니다: AI가 만들어 준 HTML을 그냥 받기만 하면 실력이 늘지 않습니다. 이번 장에서 배운 <h1>, <table>, <a>, <header> 같은 태그가 그 코드 어디에 쓰였는지 직접 짚어 보고, "표에 항목을 하나 더 추가해줘", "사인란을 가운데로 옮겨줘"처럼 부분만 콕 집어 고쳐 보세요. 어디를 어떻게 가리키느냐가 바이브 코딩의 전부입니다.