HTML — 학습 허브

01

큰 그림

큰 그림 — 웹은 3가지로 만들어짐

웹페이지 하나는 HTML · CSS · JS 세 가지가 모여 만들어짐 — 레고로 집 만들기에 비유

레고 집 비유

• HTML — 집에 무엇이 있는지 (글·사진·버튼), 집의 뼈대
• CSS — 그게 어떻게 보이는지 (색·크기·자리), 집의 색칠·꾸미기
• JS — 그게 어떻게 움직이는지 (클릭·반응), 집의 전기·스위치

tip — 이 페이지는 HTML(뼈대) 부터 배움 — CSS·JS는 뒤에서 차근차근

02

개발환경 ①

개발환경 ① 작업 폴더 만들기

코드는 VSCode 에서 작성 — 메모장의 똑똑한 버전, 글자에 색이 입혀져 코드가 잘 보임

내 작업 폴더 열기

① 바탕화면에 새 폴더 → 이름 01_HTML
② VSCode 메뉴 File → Open Folder → 01_HTML 선택
③ 안내 창 뜨면 "Yes, I trust the authors" 클릭

03

개발환경 ②

개발환경 ② 첫 페이지 화면에 띄우기

코드를 저장하면 화면이 자동으로 바뀌게 해주는 도구 Live Server 하나만 설치 — 저장할 때마다 새로고침 안 해도 됨

Live Server 설치 (1번만)

① 왼쪽 줄에서 네모 4개 아이콘 클릭
② 검색창에 Live Server 입력 후 Install

첫 파일 만들고 띄우기

새 파일 index.html 만들기 → 아래 코드 붙여넣기 → 저장(Ctrl+S) → 오른쪽 아래 Go Live 클릭

<!DOCTYPE html>                      <!-- "이건 HTML 문서야" 선언 -->
<html lang="ko">                     <!-- 문서 시작, 한국어 페이지 -->
  <head>                             <!-- 화면엔 안 보이는 준비 칸 -->
    <meta charset="UTF-8">           <!-- 한글 안 깨지게 -->
    <title>나의 첫 페이지</title>      <!-- 브라우저 탭에 뜨는 이름 -->
  </head>
  <body>                             <!-- 화면에 보이는 진짜 내용 칸 -->
    <h1>안녕하세요! 제 첫 웹페이지입니다.</h1>   <!-- 큰 제목 한 줄 -->
  </body>
</html>                             <!-- 문서 끝 -->

브라우저가 열리고 글자가 보이면 성공 — 내가 쓴 글을 브라우저가 읽어 화면에 그려준 것

잘 안 되면

• Go Live 안 보임 → Live Server 설치됐는지 확인
• 한글이 ??? 로 깨짐 → <meta charset="UTF-8"> 있는지 확인

04

주석·단축키

주석과 편리한 단축키 (VSCode)

주석 = 화면에 안 나오는 메모 — 브라우저가 무시하고 안 그림, 나중의 나·팀에게 설명을 남기거나 코드를 잠깐 꺼둘 때 사용

주석 써보기

<!DOCTYPE html>                  <!-- "이건 HTML 문서야" 선언 -->
<html lang="ko">                 <!-- 문서 시작, 한국어 페이지 -->
<head>                           <!-- 화면엔 안 보이는 준비 칸 -->
  <meta charset="UTF-8">         <!-- 한글 안 깨지게 -->
  <title>주석 연습</title>        <!-- 브라우저 탭에 뜨는 이름 -->
</head>
<body>                           <!-- 화면에 보이는 진짜 내용 칸 -->
  <!-- 이건 메모예요. 화면에 안 보여요 -->     ← 한 줄 메모(주석)
  <h1>안녕하세요</h1>             <!-- 화면에 그려지는 큰 제목 -->
  <!-- <p>이 줄은 잠깐 꺼둔 거예요</p> -->   ← 코드를 안 지우고 잠깐 끔
</body>
</html>

 로 닫는 사이의 글자는 화면에 안 그려짐 — 코드 한 줄을 지우지 않고 잠깐 끌 때도 편함

자주 쓰는 단축키 (Windows 기준, Mac은 Ctrl→Cmd)

• 주석 켜고 끄기 Ctrl + / — 고른 줄을 주석으로 만들거나 풀기
• 저장 Ctrl + S
• 줄 복제 Shift + Alt + ↓
• 전체 선택 Ctrl + A
• 찾기 Ctrl + F

05

태그 + 뼈대

태그(tag)란? + 웹페이지의 뼈대

HTML은 글마다 태그라는 이름표를 붙임 — 태그 = "이건 큰제목이야"처럼 무엇인지 알려 주는 이름표

태그는 둘이 한 쌍

<h1>안녕</h1> 을 뜯어보면
• <h1> — 여는 이름표 "여기부터 큰제목"
• 안녕 — 가운데 들어가는 내용
• </h1> — 닫는 이름표 (/ = "여기서 끝")
→ 이름표는 거의 다 열기 + 닫기 한 쌍, 닫기를 빠뜨리면 화면이 깨짐
→ 이 셋(여는 태그 + 내용 + 닫는 태그)을 합쳐 요소(element) 라 부름

tip — 태그 이름은 대소문자 안 가림(<H1> = <h1>) — 코드 속  주석은 화면에 안 보임 (자세히는 STEP 04 참고)

웹페이지 뼈대 한 줄씩

<!DOCTYPE html>            <!-- "이건 HTML 문서야" 라고 알려 주기 -->
<html lang="ko">           <!-- 문서 시작, 한국어 페이지 -->
  <head>                   <!-- 화면엔 안 보이는 준비 칸 -->
    <meta charset="UTF-8"> <!-- 한글 안 깨지게 -->
    <title>제목</title>    <!-- 브라우저 탭에 뜨는 이름 -->
  </head>
  <body>                   <!-- 화면에 보이는 진짜 내용 칸 -->
    <h1>안녕하세요</h1>
  </body>
</html>

핵심 — 눈에 보이는 건 전부 <body> 안에, <head>는 무대 뒤 준비 공간

06

제목·문단

제목과 문단 (h1~h6, p)

책 목차처럼 제목 크기 6단계 — <h1>이 제일 크고 <h6>이 제일 작음(숫자 커질수록 글씨 작아짐) — <p> = 글 한 덩어리(문단)

예제

<!DOCTYPE html>           <!-- "이건 HTML 문서야" 선언 -->
<html lang="ko">          <!-- 문서 시작, 한국어 페이지 -->
<head>                    <!-- 화면엔 안 보이는 준비 칸 -->
  <meta charset="UTF-8">  <!-- 한글 안 깨지게 -->
  <title>제목과 문단</title>   <!-- 브라우저 탭에 뜨는 이름 -->
</head>
<body>                    <!-- 화면에 보이는 진짜 내용 칸 -->
  <!-- 제목은 크기 6단계: h1이 제일 크고 숫자 커질수록 작아짐 -->
  <h1>가장 큰 제목</h1>
  <h2>중간 제목</h2>
  <h3>작은 제목</h3>
  <p>저는 코딩을 처음 배우는 학생입니다</p>   <!-- p = 글 한 덩어리(문단) -->
</body>
</html>

신문에 비유하면 <h1>은 1면 헤드라인, <p>는 본문

07

강조·중첩

강조와 태그 중첩 (strong, nesting)

강조 + 태그 중첩(nesting)

<!DOCTYPE html>           <!-- "이건 HTML 문서야" 선언 -->
<html lang="ko">          <!-- 문서 시작, 한국어 페이지 -->
<head>                    <!-- 화면엔 안 보이는 준비 칸 -->
  <meta charset="UTF-8">  <!-- 한글 안 깨지게 -->
  <title>강조와 중첩</title>   <!-- 브라우저 탭에 뜨는 이름 -->
</head>
<body>                    <!-- 화면에 보이는 진짜 내용 칸 -->
  <!-- 태그 안에 태그 넣기 = 중첩(nesting), strong은 글자를 굵게 강조 -->
  <p>저는 <strong>정말</strong> 신납니다</p>   <!-- '정말'만 굵게 -->
</body>
</html>

선물 상자 안에 작은 상자 넣듯, 태그 안에 태그 넣기 = 중첩 — <strong>은 글자를 굵게 강조
규칙 — 먼저 연 태그를 나중에 닫음(바깥 상자를 마지막에 닫듯), 순서 엇갈리면 화면 깨짐 (<p><strong>…</p></strong> X)

코드에 꺾쇠 글자 쓰기 — 특수문자

< > &는 HTML이 명령어로 착각함 — 글자 그대로 보이려면 약속된 기호(엔티티)로 바꿔 적음
• < → <
• > → >
• & → &

08

이미지

이미지 (img)

<img> = 화면에 사진 붙이기 — src(사진 주소)·alt(안 뜰 때 대신 보일 글자) 속성과 함께 씀 (링크는 다음 STEP 09)

속성(attribute) — 태그에 정보 더하기

태그에 추가 정보를 적는 것 = 속성 — 이름="값" 꼴
• 태그 이름 뒤 한 칸 띄고
• 이름과 값 사이 =
• 값은 따옴표로 감쌈 — 예) alt="내 사진"

이미지

<!DOCTYPE html>           <!-- "이건 HTML 문서야" 선언 -->
<html lang="ko">          <!-- 문서 시작, 한국어 페이지 -->
<head>                    <!-- 화면엔 안 보이는 준비 칸 -->
  <meta charset="UTF-8">  <!-- 한글 안 깨지게 -->
  <title>이미지 넣기</title>   <!-- 브라우저 탭에 뜨는 이름 -->
</head>
<body>                    <!-- 화면에 보이는 진짜 내용 칸 -->
  <!-- img = 화면에 사진 붙이기, 닫는 태그 없는 빈 요소라 /> 로 끝맺음 -->
  <!-- src = 사진 주소 / alt = 사진이 안 뜰 때 대신 보일 글자 -->
  <img src="https://picsum.photos/300/200" alt="예시 사진" />
</body>
</html>

src = 사진 주소, alt = 사진이 안 뜰 때 대신 보일 글자
→ <img>는 속이 빈 상자처럼 넣을 내용이 없어 닫는 태그도 안 쓰는 빈 요소(void), 끝을 />로 마감 — br·hr·meta도 빈 요소(/는 생략 가능)

09

링크

링크 (a, href)

링크

<!DOCTYPE html>           <!-- "이건 HTML 문서야" 선언 -->
<html lang="ko">          <!-- 문서 시작, 한국어 페이지 -->
<head>                    <!-- 화면엔 안 보이는 준비 칸 -->
  <meta charset="UTF-8">  <!-- 한글 안 깨지게 -->
  <title>링크 넣기</title>    <!-- 브라우저 탭에 뜨는 이름 -->
</head>
<body>                    <!-- 화면에 보이는 진짜 내용 칸 -->
  <!-- a = 누르면 다른 곳으로 가는 문(링크) -->
  <!-- href = 이동할 주소 (https:// 까지 적어야 동작) -->
  <a href="https://www.google.com">구글로 가기</a>
</body>
</html>

href 안 주소로 이동 — https://까지 적어야 동작

10

목록·시맨틱

목록·시맨틱 태그 (ul·li, header·main·footer)

<ul><li> = 점 찍힌 목록 — <header><main><footer> = 어느 부분인지 뜻이 드러나는 이름표 상자(시맨틱 = 의미가 담긴 구역 나누기)

목록 + 시맨틱 구역

<!DOCTYPE html>           <!-- "이건 HTML 문서야" 선언 -->
<html lang="ko">          <!-- 문서 시작, 한국어 페이지 -->
<head>                    <!-- 화면엔 안 보이는 준비 칸 -->
  <meta charset="UTF-8">  <!-- 한글 안 깨지게 -->
  <title>목록·시맨틱</title>   <!-- 브라우저 탭에 뜨는 이름 -->
</head>
<body>                    <!-- 화면에 보이는 진짜 내용 칸 -->
  <!-- 시맨틱 태그 = 어느 부분인지 뜻이 담긴 이름표 상자 -->
  <header>맨 위 (로고·제목)</header>       <!-- 페이지 맨 위 구역 -->
  <main>                                  <!-- 핵심 내용 구역 -->
    <!-- ul = 점 찍힌 목록 상자, li = 목록 안의 한 줄 -->
    <ul>
      <li>좋아하는 것: 영화</li>   <!-- 목록 항목 1 -->
      <li>취미: 산책</li>          <!-- 목록 항목 2 -->
      <li>목표: 웹 개발자</li>     <!-- 목록 항목 3 -->
    </ul>
  </main>
  <footer>맨 아래 (저작권·연락처)</footer> <!-- 페이지 맨 아래 구역 -->
</body>
</html>

header · main · footer 언제 씀?

신문 한 면처럼 페이지를 위→가운데→아래 세 칸으로 나누는 이름표 — <div>로도 되지만, 뜻이 드러나는 이름을 쓰면 사람·검색엔진·화면낭독기가 구조를 바로 알아봄
• <header> — 페이지 맨 위 머리말 (로고·제목·메뉴) — 보통 1번
• <main> — 그 페이지의 핵심 내용 한 덩어리 (메뉴·푸터 뺀 진짜 본문) — 한 페이지에 딱 하나
• <footer> — 페이지 맨 아래 꼬리말 (저작권·연락처·약관)

tip — 외울 거 = "위는 header, 본문은 main, 아래는 footer" — 어디에 둘지 모르면 일단 main 안에

참고 — 블록 요소(p·h1·ul·header)는 벽돌처럼 한 줄을 통째로 차지(위→아래로 쌓임), 인라인 요소(a·strong·em)는 글자 사이에 끼어듦

11

자기소개(1차)

합치기 — 자기소개 페이지 (1차)

<!DOCTYPE html>             <!-- "이건 HTML 문서야" 선언 -->
<html lang="ko">            <!-- 문서 시작, 한국어 페이지 -->
  <head>                    <!-- 화면엔 안 보이는 준비 칸 -->
    <meta charset="UTF-8">  <!-- 한글 안 깨지게 -->
    <title>내 소개</title>     <!-- 브라우저 탭에 뜨는 이름 -->
  </head>
  <body>                    <!-- 화면에 보이는 진짜 내용 칸 -->
    <header>                       <!-- 맨 위 머리말 -->
      <h1>김코딩의 소개 페이지</h1>   <!-- 큰 제목 (STEP 06) -->
    </header>
    <main>                         <!-- 핵심 내용 (페이지에 하나) -->
      <!-- img: src=사진 주소, alt=안 뜰 때 대신 보일 글자 (STEP 08) -->
      <img src="https://picsum.photos/300/200" alt="내 사진" />
      <p>안녕하세요. 저는 웹 개발을 배우는 김코딩입니다</p>   <!-- 소개 문단 -->
      <ul>                          <!-- 점 목록 시작 -->
        <li>취미: 산책과 사진</li>     <!-- 목록 항목 1 -->
        <li>목표: 멋진 웹사이트 만들기</li>  <!-- 목록 항목 2 -->
      </ul>
    </main>
    <footer>                       <!-- 맨 아래 꼬리말 -->
      <a href="https://www.google.com">블로그 보러가기</a>   <!-- 링크 (STEP 09) -->
    </footer>
  </body>
</html>

저장하면 글·사진·목록·링크가 담긴 페이지 한 장 완성 — 아직 꾸미기 전이라 밋밋함

12

번호 목록

번호 목록 (ol, li)

STEP 10의 <ul>은 점(•) 목록 — 순서가 중요하면 번호 목록 <ol> 사용 (요리 순서·등수처럼)

번호 목록

<!DOCTYPE html>           <!-- "이건 HTML 문서야" 선언 -->
<html lang="ko">          <!-- 문서 시작, 한국어 페이지 -->
<head>                    <!-- 화면엔 안 보이는 준비 칸 -->
  <meta charset="UTF-8">  <!-- 한글 안 깨지게 -->
  <title>번호 목록</title>    <!-- 브라우저 탭에 뜨는 이름 -->
</head>
<body>                    <!-- 화면에 보이는 진짜 내용 칸 -->
  <!-- ol = 번호(1·2·3)가 자동으로 붙는 목록, 순서 중요할 때 -->
  <ol>
    <li>일어나기</li>    <!-- 1번 항목 -->
    <li>세수하기</li>    <!-- 2번 항목 -->
    <li>아침 먹기</li>   <!-- 3번 항목 -->
  </ol>
</body>
</html>

<ol>로 바꾸면 1·2·3 번호가 자동으로 붙음 — 안에 들어가는 <li>(목록 항목)는 ul과 똑같음

13

줄·선

줄바꿈과 가로선 (br, hr)

줄바꿈과 가로선

<!DOCTYPE html>           <!-- "이건 HTML 문서야" 선언 -->
<html lang="ko">          <!-- 문서 시작, 한국어 페이지 -->
<head>                    <!-- 화면엔 안 보이는 준비 칸 -->
  <meta charset="UTF-8">  <!-- 한글 안 깨지게 -->
  <title>줄바꿈과 가로선</title> <!-- 브라우저 탭에 뜨는 이름 -->
</head>
<body>                    <!-- 화면에 보이는 진짜 내용 칸 -->
  <!-- br = 한 문단 안에서 줄 바꾸기 (닫는 태그 없는 빈 요소) -->
  <p>첫째 줄<br>둘째 줄</p>
  <!-- hr = 내용을 나누는 가로 줄 (닫는 태그 없는 빈 요소) -->
  <hr>
</body>
</html>

<br> = 한 문단 안에서 줄 바꾸기, <hr> = 내용을 나누는 가로 줄 — 둘 다 닫는 태그 없는 빈 요소

14

표

표 만들기 (table, tr, th, td)

시간표·성적표처럼 칸이 나뉜 표를 만드는 태그 — 가로 줄을 위에서 아래로 차곡차곡 쌓아 만듦

이름표 4개

• <table> — 표 전체를 담는 상자
• <tr> — 가로 한 줄(row)
• <th> — 제목 칸(굵게·가운데 정렬)
• <td> — 보통 내용 칸

시간표 예제

<!DOCTYPE html>           <!-- "이건 HTML 문서야" 선언 -->
<html lang="ko">          <!-- 문서 시작, 한국어 페이지 -->
<head>                    <!-- 화면엔 안 보이는 준비 칸 -->
  <meta charset="UTF-8">  <!-- 한글 안 깨지게 -->
  <title>시간표</title>      <!-- 브라우저 탭에 뜨는 이름 -->
</head>
<body>                    <!-- 화면에 보이는 진짜 내용 칸 -->
  <!-- table = 표 전체 상자, border="1"은 칸 선을 보이게 함 -->
  <table border="1">
    <tr><th>요일</th><th>과목</th></tr>   <!-- tr=가로 한 줄, th=제목 칸(굵게 가운데) -->
    <tr><td>월</td><td>국어</td></tr>     <!-- td=보통 내용 칸 -->
    <tr><td>화</td><td>수학</td></tr>
  </table>
</body>
</html>

border="1" = 표에 선 그리기(없으면 칸 구분이 안 보임) — 한 <tr> 안에 칸(th·td)을 나란히 넣으면 가로로 줄지어 배치됨

15

폼·입력

입력 받기 — 폼 (form, input, button)

회원가입·검색창처럼 사용자가 글자를 입력하는 칸을 만드는 태그 — 입력칸들을 <form> 상자로 묶음

이름표 살펴보기

• <form> — 입력칸을 담는 묶음 상자
• <label> — 입력칸 옆 설명 글자
• <input> — 글자를 쓰는 빈 칸(빈 요소)
• <button> — 누르는 버튼

간단한 입력 폼

<!DOCTYPE html>           <!-- "이건 HTML 문서야" 선언 -->
<html lang="ko">          <!-- 문서 시작, 한국어 페이지 -->
<head>                    <!-- 화면엔 안 보이는 준비 칸 -->
  <meta charset="UTF-8">  <!-- 한글 안 깨지게 -->
  <title>입력 폼</title>     <!-- 브라우저 탭에 뜨는 이름 -->
</head>
<body>                    <!-- 화면에 보이는 진짜 내용 칸 -->
  <!-- form = 입력칸들을 담는 묶음 상자 -->
  <form>                                  <!-- form = 입력칸 묶음 상자 -->
    <label>이름: <input type="text" placeholder="이름 입력"></label>   <!-- label=설명 글자 / input=글자 칸 -->
    <br>
    <label>나이: <input type="number"></label>   <!-- input type=number → 숫자 칸 -->
    <br>
    <button type="submit">보내기</button>   <!-- 누르는 버튼 -->
  </form>
</body>
</html>

type="text" = 글자 칸, type="number" = 숫자 칸 — placeholder = 칸이 비었을 때 보이는 흐린 안내 글자

색 구분 — 코드에서 폼 태그를 색으로 빠르게 찾기
• 보라 = 묶음 상자 (form)
• 노랑 = 설명 글자 (label)
• 하늘색 = 입력 칸 (input)
• 주황 = 버튼 (button)

16

영상

영상 박기 (iframe·유튜브)

<iframe> = 내 페이지 안에 다른 페이지를 작은 네모 창으로 끼워 넣기 — 유튜브 영상·구글 지도를 그대로 박을 때 사용

유튜브 영상 넣기

<!DOCTYPE html>           <!-- "이건 HTML 문서야" 선언 -->
<html lang="ko">          <!-- 문서 시작, 한국어 페이지 -->
<head>                    <!-- 화면엔 안 보이는 준비 칸 -->
  <meta charset="UTF-8">  <!-- 한글 안 깨지게 -->
  <title>영상 넣기</title>    <!-- 브라우저 탭에 뜨는 이름 -->
</head>
<body>                    <!-- 화면에 보이는 진짜 내용 칸 -->
  <!-- iframe = 내 페이지 안에 다른 페이지를 작은 네모 창으로 끼워 넣기 -->
  <!-- width·height = 창 크기(가로·세로) / src = 보여줄 영상 embed 주소 -->
  <iframe width="320" height="180"
    src="https://www.youtube.com/embed/aqz-KE-bpKQ"></iframe>
</body>
</html>

width·height = 창 크기(가로·세로), src = 보여줄 영상 주소
→ 유튜브는 일반 주소가 아닌 embed 주소(youtube.com/embed/...)를 넣어야 화면에 떠

팁 — 다른 영상은 유튜브에서 공유 → 퍼가기(embed) 누르면 <iframe> 코드를 그대로 줌

17

지도

지도 박기 (iframe·구글)

구글 지도 넣기

지도도 영상과 똑같이 <iframe>으로 끼워 넣음 — 주소(src)만 지도 embed 주소로 바꾸면 끝

<!DOCTYPE html>           <!-- "이건 HTML 문서야" 선언 -->
<html lang="ko">          <!-- 문서 시작, 한국어 페이지 -->
<head>                    <!-- 화면엔 안 보이는 준비 칸 -->
  <meta charset="UTF-8">  <!-- 한글 안 깨지게 -->
  <title>지도 넣기</title>    <!-- 브라우저 탭에 뜨는 이름 -->
</head>
<body>                    <!-- 화면에 보이는 진짜 내용 칸 -->
  <!-- iframe 한 개로 지도를 그대로 박음, src만 지도 주소로 -->
  <iframe width="320" height="220"
    src="https://www.google.com/maps?q=서울시청&amp;output=embed"></iframe>
</body>
</html>

q=서울시청 = 보여줄 장소(원하는 곳 이름·주소로 바꾸기)
output=embed = 페이지 안에 박는 모드
주소에서 조건 두 개를 잇는 &는 HTML이 특수문자로 봐서, 정석은 &로 적음 (STEP 07 엔티티 참고 — 브라우저가 알아서 고쳐 주지만 제대로 적는 습관)
→ 정확한 지도는 구글 지도 → 공유 → 지도 퍼가기 누르면 <iframe> 코드를 그대로 줌

공식 코드 받기 (정확·추천)

위 q=... 방식은 손으로 쓰기 쉬움 — 위치·확대까지 정확히 박으려면 구글이 만들어 주는 코드를 받아 붙이기

1

google.com/maps 접속

2

보여줄 장소 검색

3

왼쪽 공유 버튼 클릭

4

탭에서 지도 퍼가기(Embed a map) 선택

5

HTML 복사 → <iframe src="…/maps/embed?pb=…"></iframe> 통째로 줌

6

<body> 안에 그대로 붙여넣기

받은 코드는 maps/embed?pb=… 꼴의 긴 자동 주소 — 위치·확대 비율이 정확히 들어가 있고, & 처리도 구글이 알아서 해 줌

받은 코드 예시 (고려대학교)

<!-- 구글 지도에서 복사한 코드 그대로 붙여넣기 (긴 src는 손대지 않기) -->
<iframe
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d25293.94854006347!2d127.02928809999999!3d37.58465565!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357cbcbc8d707a77%3A0x15038aa80b575dc9!2z6rOg66Ck64yA7ZWZ6rWQ!5e0!3m2!1sko!2skr!4v1781527581899!5m2!1sko!2skr"
  width="600" height="450"          <!-- 창 크기(가로·세로) -->
  style="border:0;"                 <!-- 지도 둘레 선 없애기 -->
  allowfullscreen=""                <!-- 전체화면 버튼 켜기 -->
  loading="lazy"                    <!-- 지도 로딩 미루기 (속도 ↑) -->
  referrerpolicy="no-referrer-when-downgrade"></iframe>

pb=… 부분은 위치·확대값이 담긴 암호 같은 주소 — 손대지 말고 통째로 두기, 다른 곳을 넣고 싶으면 구글 지도에서 새로 복사

뒤에 붙은 부가 속성 (몰라도 됨)

구글이 자동으로 붙여 주는 옵션 — 외울 필요 없이 "이런 게 있구나" 정도만
• width·height — 창 크기(가로·세로), STEP 16 영상에서 배움
• style="border:0;" — 지도 둘레 선 없애기 (style은 CSS 영역, 다음 과목 CSS에서 자세히)
• allowfullscreen — 전체화면 버튼 켜기
• loading="lazy" — 지도 로딩 미루기 (속도 ↑)
• referrerpolicy — 어디서 왔는지 정보를 얼마나 넘길지 정하는 보안 옵션

tip — 이 줄들은 구글 코드에 원래 들어 있음 — 지우지 말고 그대로 두면 됨, 의미는 나중에 CSS·심화에서 자연스럽게 익힘

18

class

class — 여러 개가 나눠 쓰는 이름표

태그에 이름표를 달아 두면 나중에 CSS·JavaScript가 그 요소를 콕 집어 꾸미거나 움직임 — 다음 단계 CSS로 가는 다리

class = 여러 개가 같이 쓰는 이름표(반 이름표처럼) — 같은 값을 여러 번 달아도 됨

<!DOCTYPE html>             <!-- "이건 HTML 문서야" 선언 -->
<html lang="ko">            <!-- 문서 시작, 한국어 페이지 -->
<head>                      <!-- 화면엔 안 보이는 준비 칸 -->
  <meta charset="UTF-8">    <!-- 한글 안 깨지게 -->
  <title>class 이름표</title> <!-- 브라우저 탭에 뜨는 이름 -->
</head>
<body>                      <!-- 화면에 보이는 진짜 내용 칸 -->
  <!-- class = 여러 요소가 함께 쓰는 이름표 (같은 값 여러 번 OK) -->
  <p class="note">첫째 줄</p>
  <p class="note">둘째 줄</p>
</body>
</html>

class="note" = 두 문단에 같은 이름표를 단 것 — 나중에 CSS로 note 하나만 꾸미면 둘 다 같이 바뀜

19

id

id — 페이지에 딱 하나뿐인 이름표

id = 페이지에 딱 하나뿐인 이름표(학번처럼) — 같은 값을 두 번 쓰면 안 됨 (STEP 18 class와 짝)

<!DOCTYPE html>             <!-- "이건 HTML 문서야" 선언 -->
<html lang="ko">            <!-- 문서 시작, 한국어 페이지 -->
<head>                      <!-- 화면엔 안 보이는 준비 칸 -->
  <meta charset="UTF-8">    <!-- 한글 안 깨지게 -->
  <title>id 이름표</title>     <!-- 브라우저 탭에 뜨는 이름 -->
</head>
<body>                      <!-- 화면에 보이는 진짜 내용 칸 -->
  <!-- id = 페이지에 딱 하나뿐인 이름표 (같은 값 두 번 X, 학번처럼) -->
  <h1 id="top">맨 위 제목</h1>
</body>
</html>

id="top" = 이 페이지에 단 하나뿐인 이름표 — 같은 id 값을 두 번 쓰면 안 됨 (STEP 23에서 href="#top"으로 이 위치로 점프)

20

div

div — 만능 블록 상자 (한 줄 통째)

뜻 없는 빈 상자 — 여러 요소를 묶어서 한꺼번에 꾸밀 때 사용
<div> = 블록 상자, 한 줄을 통째 차지(위→아래로 쌓임)

<!DOCTYPE html>             <!-- "이건 HTML 문서야" 선언 -->
<html lang="ko">            <!-- 문서 시작, 한국어 페이지 -->
<head>                      <!-- 화면엔 안 보이는 준비 칸 -->
  <meta charset="UTF-8">    <!-- 한글 안 깨지게 -->
  <title>div 상자</title>     <!-- 브라우저 탭에 뜨는 이름 -->
</head>
<body>                      <!-- 화면에 보이는 진짜 내용 칸 -->
  <!-- div = 사진·이름·가격을 한 덩어리(상품 카드)로 묶기 -->
  <div class="card">
    <img src="shoes.png" alt="신발">   <!-- 사진 -->
    <h3>운동화</h3>                     <!-- 이름 -->
    <p>59,000원</p>                     <!-- 가격 -->
  </div>
</body>
</html>

<div class="card"> = 사진·이름·가격 3개를 한 상자로 묶음 — 나중에 CSS로 card에 테두리·그림자를 한 번 주면 3개가 통째로 카드 모양이 됨

21

span

span — 인라인 상자 (글자 사이)

뜻 없는 빈 상자 — <span> = 인라인 상자, 줄을 바꾸지 않고 글자 사이에 끼어듦 (STEP 10 블록·인라인 참고)

<!DOCTYPE html>             <!-- "이건 HTML 문서야" 선언 -->
<html lang="ko">            <!-- 문서 시작, 한국어 페이지 -->
<head>                      <!-- 화면엔 안 보이는 준비 칸 -->
  <meta charset="UTF-8">    <!-- 한글 안 깨지게 -->
  <title>span 상자</title>    <!-- 브라우저 탭에 뜨는 이름 -->
</head>
<body>                      <!-- 화면에 보이는 진짜 내용 칸 -->
  <!-- span = 글자 사이 일부만 따로 묶는 인라인 상자 (줄 안 바꿈) -->
  <p>글자 중 <span>여기만</span> 강조</p>
</body>
</html>

<span>여기만</span> = 문장 속 글자 일부만 따로 묶는 인라인 상자 — 줄을 바꾸지 않고 글자 사이에 끼어듦
<div>가 한 줄 통째 상자라면, <span>은 글자 몇 개만 감싸는 작은 상자 (화면 모양은 그대로 — 나중에 그 부분만 콕 집어 꾸미려고 미리 묶어두는 것)

div·span은 언제? (시맨틱 먼저)

<header>·<main>·<footer> 같은 시맨틱 상자는 이름만 봐도 "여긴 머리말·본문·꼬리말"이라고 뜻이 드러남 (STEP 10) — 반대로 <div>·<span>는 뜻이 없는 그냥 빈 상자

택배 상자에 비유 — 겉에 "주방용품"이라 적힌 상자(시맨틱)가 라벨 없는 민무늬 상자(div)보다 나중에 찾기 쉬움 — 사람도, 검색엔진·화면낭독기도 구조를 바로 알아봄

고르는 순서
① 뜻에 맞는 시맨틱 상자가 있나? (header·main·footer — STEP 10) → 있으면 그걸
② 마땅한 게 없고 그냥 묶기만 하면 됨 → 한 줄 통째면 <div>, 글자 일부면 <span>

22

경로

파일 주소(경로) — 이미지가 안 뜨는 이유 1위

이미지가 안 뜨는 이유 1위 = 경로가 틀림 — 경로 = 그 파일이 어느 폴더에 있는지 알려주는 길 안내 (STEP 08 보강)

• ./img/cat.png — 지금 폴더 안 img 폴더의 cat.png (./ = 지금 폴더)
• ../cat.png — 한 칸 위 폴더 (../ = 상위 폴더)
• https://... — 인터넷 주소 그대로 (절대경로)

<!DOCTYPE html>           <!-- "이건 HTML 문서야" 선언 -->
<html lang="ko">          <!-- 문서 시작, 한국어 페이지 -->
<head>                    <!-- 화면엔 안 보이는 준비 칸 -->
  <meta charset="UTF-8">  <!-- 한글 안 깨지게 -->
  <title>이미지 경로</title>   <!-- 브라우저 탭에 뜨는 이름 -->
</head>
<body>                    <!-- 화면에 보이는 진짜 내용 칸 -->
  <!-- src 경로 = 사진이 어느 폴더에 있는지 길 안내 -->
  <img src="./img/cat.png" alt="고양이">   <!-- ./ = 지금 폴더 안 img 폴더 -->
  <img src="../logo.png" alt="로고">       <!-- ../ = 한 칸 위 폴더 -->
  <img src="https://picsum.photos/80" alt="인터넷 사진">   <!-- https:// = 인터넷 주소 그대로(절대경로) -->
</body>
</html>

23

링크 심화

링크 더 쓰기 (a 속성) — 색깔로 구분

<a>에 붙이는 속성마다 하는 일이 다름

• target="_blank" — 새 탭에서 열기
• href="#top" — 같은 페이지의 id="top" 위치로 점프(STEP 19 id와 짝)
• href="mailto:…" — 메일 쓰기 창
• href="tel:…" — 전화 걸기(폰)

<!DOCTYPE html>           <!-- "이건 HTML 문서야" 선언 -->
<html lang="ko">          <!-- 문서 시작, 한국어 페이지 -->
<head>                    <!-- 화면엔 안 보이는 준비 칸 -->
  <meta charset="UTF-8">  <!-- 한글 안 깨지게 -->
  <title>링크 더 쓰기</title>  <!-- 브라우저 탭에 뜨는 이름 -->
</head>
<body id="top">           <!-- id="top" = 이 위치에 '이름표' 붙임 → 아래 #top가 찾아올 목적지 (STEP 19 id와 짝) -->
  <a href="https://google.com" target="_blank">새 탭</a>   <!-- target="_blank" → 새 탭에서 열기 -->
  <a href="mailto:hi@me.com">메일</a>          <!-- mailto: → 누르면 메일 쓰기 창 -->
  <a href="tel:01012345678">전화</a>          <!-- tel: → 폰에서 누르면 전화 걸기 -->

  <br><br><br><br><br><br><br><br><br><br>   <!-- 빈 줄(br) 여러 개 = 페이지를 길게 늘림 → 스크롤바 생김 (스크롤이 있어야 '맨 위로' 효과가 보임) -->
  <br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br>   <!-- br 한 개 = 줄바꿈 1번. 화면 높이보다 길어지면 자동으로 스크롤이 만들어짐 -->
  <br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br>

  <p>여기까지 내렸으면 아래 '맨 위로' 눌러보기</p>   <!-- 스크롤을 끝까지 내렸을 때 보이는 안내 문구 -->
  <a href="#top">맨 위로</a>                    <!-- #top 클릭 → 맨 위 body의 id="top" 위치로 점프 (위로 이동) -->
</body>
</html>

색 구분 — 코드에서 속성을 색으로 빠르게 찾기
• 하늘색 = 새 탭에서 열기
• 보라 = 같은 페이지 점프
• 초록 = 메일 쓰기
• 주황 = 전화 걸기

24

입력 type

입력칸 종류 (input type)

<input>의 type만 바꾸면 칸 모양이 달라짐 — 회원가입 폼에 딱 맞는 칸 고르기 (STEP 15 보강)

• type="email" — 메일 칸(@ 검사)
• type="password" — 점(••)으로 가려지는 칸
• type="checkbox" — 여러 개 고르기(네모)
• type="radio" — 하나만 고르기(동그라미)
• type="date" — 날짜 고르기(달력)
• <textarea> — 여러 줄 긴 글 칸
• <select> — 펼쳐서 하나 고르기(드롭다운)

<!DOCTYPE html>           <!-- "이건 HTML 문서야" 선언 -->
<html lang="ko">          <!-- 문서 시작, 한국어 페이지 -->
<head>                    <!-- 화면엔 안 보이는 준비 칸 -->
  <meta charset="UTF-8">  <!-- 한글 안 깨지게 -->
  <title>입력칸 종류</title>  <!-- 브라우저 탭에 뜨는 이름 -->
</head>
<body>                    <!-- 화면에 보이는 진짜 내용 칸 -->
  <form>                                          <!-- 입력칸들을 담는 묶음 상자 -->
    <input type="email" placeholder="메일">     <!-- 메일 칸 (@ 들어갔는지 검사) -->
    <input type="password">              <!-- 점(••)으로 가려지는 칸 -->
    <label><input type="checkbox"> 동의</label>  <!-- 여러 개 고르기(네모) -->
    <label><input type="radio" name="gender"> 남</label>  <!-- 하나만 고르기(동그라미), name 같으면 한 묶음 -->
    <input type="date">                  <!-- 날짜 고르기(달력) -->
    <textarea>긴 글 칸</textarea>   <!-- 여러 줄 긴 글 칸 -->
    <select>                              <!-- 펼쳐서 하나 고르기(드롭다운) -->
      <option>서울</option>                       <!-- 고를 항목 1 -->
      <option>부산</option>                       <!-- 고를 항목 2 -->
    </select>
  </form>
</body>
</html>

<textarea> = 여러 줄 긴 글 칸 — <select><option> = 펼쳐서 하나 고르는 드롭다운

색 구분 — 코드에서 입력칸 종류를 색으로 빠르게 찾기
• 노랑 = 메일 칸 (email)
• 빨강 = 비밀번호 칸 (password)
• 하늘색 = 체크박스 (checkbox)
• 분홍 = 라디오 (radio)
• 주황 = 날짜 (date)
• 보라 = 여러 줄 글 칸 (textarea)
• 초록 = 드롭다운 (select)

25

글자 꾸미기

글자 꾸미기 태그 (em·mark·code…)

글자 꾸미기 태그

• <em> 기울임 강조 · <mark> 형광펜 · <small> 작게
• <code> 코드 글씨 · <blockquote> 인용 덩어리
• <sub> 아래첨자(H<sub>2</sub>O) · <sup> 위첨자(x<sup>2</sup>)

<!DOCTYPE html>           <!-- "이건 HTML 문서야" 선언 -->
<html lang="ko">          <!-- 문서 시작, 한국어 페이지 -->
<head>                    <!-- 화면엔 안 보이는 준비 칸 -->
  <meta charset="UTF-8">  <!-- 한글 안 깨지게 -->
  <title>글자 꾸미기</title>  <!-- 브라우저 탭에 뜨는 이름 -->
</head>
<body>                    <!-- 화면에 보이는 진짜 내용 칸 -->
  <p><em>기울임 강조</em></p>          <!-- em : 글자가 비스듬히 기울어짐 -->
  <p><mark>형광펜</mark></p>           <!-- mark : 노란 형광펜으로 칠한 느낌 -->
  <p><small>작게 쓰는 글씨</small></p> <!-- small : 글자를 작게 -->
  <p><code>print("hi")</code></p>      <!-- code : 코드처럼 보이는 글씨 -->
  <blockquote>인용 덩어리</blockquote>  <!-- blockquote : 남의 말을 인용하는 칸 -->
  <p>H<sub>2</sub>O</p>                <!-- sub : 아래첨자 (작게 아래로) -->
  <p>x<sup>2</sup></p>                 <!-- sup : 위첨자 (작게 위로) -->
</body>
</html>

26

표 합치기

표 칸 합치기 (colspan·rowspan)

표 칸을 옆·아래로 합치기 — colspan = 가로로 N칸 합침, rowspan = 세로로 N칸 합침 (STEP 14 보강)

<!DOCTYPE html>           <!-- "이건 HTML 문서야" 선언 -->
<html lang="ko">          <!-- 문서 시작, 한국어 페이지 -->
<head>                    <!-- 화면엔 안 보이는 준비 칸 -->
  <meta charset="UTF-8">  <!-- 한글 안 깨지게 -->
  <title>표 칸 합치기</title>  <!-- 브라우저 탭에 뜨는 이름 -->
</head>
<body>                    <!-- 화면에 보이는 진짜 내용 칸 -->
  <table border="1">                          <!-- 표 전체 상자 (border=칸 선) -->
    <thead>                                 <!-- 표 머리(제목 줄) -->
      <tr><th colspan="3">성적표</th></tr>   <!-- colspan=3 → 가로 3칸을 하나로 합침 -->
    </thead>
    <tbody>                                 <!-- 표 몸통(내용 줄) -->
      <tr><td rowspan="2">언어</td><td>국어</td><td>90</td></tr>   <!-- rowspan=2 → '언어' 칸이 세로 2줄을 하나로 합침 -->
      <tr><td>영어</td><td>85</td></tr>                  <!-- 위 rowspan 칸이 내려와 첫 칸을 채움 → 여기선 2칸만 적음 -->
    </tbody>
  </table>
</body>
</html>

<thead> = 표 머리(제목 줄), <tbody> = 표 몸통(내용 줄) — 구역을 나눠 두면 표 뜻이 또렷

27

접기

접는 상자 (details·summary)

JavaScript 없이 클릭으로 펴고 접는 상자 — <summary>는 항상 보이는 제목, 나머지는 눌러야 펼쳐짐 (FAQ·더보기에 사용)

<!DOCTYPE html>           <!-- "이건 HTML 문서야" 선언 -->
<html lang="ko">          <!-- 문서 시작, 한국어 페이지 -->
<head>                    <!-- 화면엔 안 보이는 준비 칸 -->
  <meta charset="UTF-8">  <!-- 한글 안 깨지게 -->
  <title>접는 상자</title>    <!-- 브라우저 탭에 뜨는 이름 -->
</head>
<body>                    <!-- 화면에 보이는 진짜 내용 칸 -->
  <details>                          <!-- 클릭하면 펴고 접히는 상자 -->
    <summary>정답 보기</summary>     <!-- 항상 보이는 제목(클릭 버튼) -->
    <p>여기는 눌러야 보여</p>             <!-- 펼쳐야 보이는 내용 -->
  </details>
</body>
</html>

색 구분 — 보라 = 접히는 상자 전체(details) · 노랑 = 항상 보이는 제목(summary) → 제목 누르면 안쪽 <p>가 펴졌다 접혔다 함

28

시맨틱 구조

의미를 담은 구역 태그 (nav·section·article·aside)

똑같이 칸을 나눠도 <div>는 뜻이 없는 빈 상자 — 시맨틱 태그는 이름만 봐도 무슨 구역인지 드러남 (STEP 10 header·main·footer 보강)

네 가지 핵심 구역

• <nav> = 메뉴·길 안내 모음
• <section> = 한 주제로 묶인 덩어리
• <article> = 그 자체로 완결된 글(글·뉴스·카드)
• <aside> = 본문 곁다리(사이드바·광고)

<!DOCTYPE html>           <!-- "이건 HTML 문서야" 선언 -->
<html lang="ko">          <!-- 문서 시작, 한국어 페이지 -->
<head>                    <!-- 화면엔 안 보이는 준비 칸 -->
  <meta charset="UTF-8">  <!-- 한글 안 깨지게 -->
  <title>시맨틱 구조</title>   <!-- 브라우저 탭에 뜨는 이름 -->
</head>
<body>                    <!-- 화면에 보이는 진짜 내용 칸 -->
  <header>                              <!-- 맨 위 머리말 -->
    <nav>홈 · 소개 · 연락처</nav>       <!-- 메뉴 모음 -->
  </header>
  <main>                                <!-- 핵심 본문 -->
    <section>                          <!-- 한 주제 덩어리 -->
      <article>첫 번째 글 내용</article>  <!-- 완결된 글 하나 -->
    </section>
  </main>
  <aside>곁다리 정보(사이드바)</aside>   <!-- 본문 옆 보조 내용 -->
  <footer>ⓒ 2026 내 사이트</footer>       <!-- 맨 아래 꼬리말 -->
</body>
</html>

색 구분
• 노랑 nav(메뉴)
• 보라 section(주제 묶음)
• 초록 article(완결된 글)
• 하늘색 aside(곁다리)

왜 쓰나 — 검색엔진·화면낭독기가 구조를 이해 → SEO·접근성에 유리 (div보다 똑똑한 칸 나누기)

29

영상 넣기

내 파일로 영상 재생 (video)

STEP 16 <iframe>은 남의 페이지(유튜브·지도)를 박는 것 — <video>는 내 영상 파일을 직접 재생, controls를 붙여야 재생 버튼이 뜸

영상 — video

<!DOCTYPE html>           <!-- "이건 HTML 문서야" 선언 -->
<html lang="ko">          <!-- 문서 시작, 한국어 페이지 -->
<head>                    <!-- 화면엔 안 보이는 준비 칸 -->
  <meta charset="UTF-8">  <!-- 한글 안 깨지게 -->
  <title>영상 넣기</title>    <!-- 브라우저 탭에 뜨는 이름 -->
</head>
<body>                    <!-- 화면에 보이는 진짜 내용 칸 -->
  <video controls width="320" src="movie.mp4"></video>
                          <!-- controls=재생 버튼, width=가로폭, src=영상 파일 -->
</body>
</html>

색 구분 — 보라 video(영상 상자) · 파랑 controls(재생 버튼)

30

음성 넣기

내 파일로 음성 재생 (audio·source)

<audio>는 내 음성 파일을 직접 재생, controls를 붙여야 재생 버튼이 뜸 (STEP 29 video와 짝)

음성 — audio + source

<source>로 여러 파일 형식을 적어 두면 브라우저가 재생 가능한 것을 골라 씀 (호환성 대비)

<!DOCTYPE html>           <!-- "이건 HTML 문서야" 선언 -->
<html lang="ko">          <!-- 문서 시작, 한국어 페이지 -->
<head>                    <!-- 화면엔 안 보이는 준비 칸 -->
  <meta charset="UTF-8">  <!-- 한글 안 깨지게 -->
  <title>음성 넣기</title>    <!-- 브라우저 탭에 뜨는 이름 -->
</head>
<body>                    <!-- 화면에 보이는 진짜 내용 칸 -->
  <audio controls>                       <!-- 음성 재생 상자(재생 버튼) -->
    <source src="song.mp3" type="audio/mpeg">  <!-- mp3 후보 -->
    <source src="song.ogg" type="audio/ogg">   <!-- ogg 후보(둘 중 가능한 것 재생) -->
    내 브라우저는 audio 미지원      <!-- 둘 다 안 되면 보일 글 -->
  </audio>
</body>
</html>

색 구분 — 보라 audio(음성 상자) · 파랑 controls(재생 버튼) · 노랑 source(파일 후보)

실전 — 파파고에서 음성 파일(mp3) 얻기

내 음성 파일이 없을 때 — 파파고 번역기의 읽어주기(TTS)를 mp3로 받아 <audio>에 넣기 (STEP 32 개발자도구 활용)

1

papago.naver.com 접속 → 번역할 문장 입력 → F12로 개발자도구 열고 Network 탭 클릭

2

왼쪽 아래 스피커(🔊) 버튼 눌러 읽어주기 재생 → Network 목록에 tts 요청(c_lt_clara_...) 한 줄이 새로 뜸

3

그 줄 클릭 → Headers의 Request URL이 음성 주소 (papago.naver.com/apis/tts/...) — 이게 mp3 파일

4

오디오 플레이어 오른쪽 ⋮ (점 3개) → 다운로드 눌러 mp3 저장 → 내 폴더에 넣고 <source src="...">에 파일명 적기

31

Emmet 자동완성

Emmet — 짧게 쳐서 코드 빨리 만들기

VSCode에 기본 내장된 Emmet — 짧은 약어를 친 뒤 Tab을 누르면 긴 HTML로 한 번에 펼쳐짐, 손으로 다 칠 필요 없음

뼈대 한 번에 — ! 후 Tab

! 입력 후 Tab — <!DOCTYPE html> 부터 <body> 까지 기본 뼈대가 통째로 생김 (STEP 05 뼈대를 손 안 대고 자동 생성)

<!DOCTYPE html>           <!-- "이건 HTML 문서야" 선언 -->
<html lang="en">          <!-- 문서 시작 (한국어면 lang="ko"로 바꾸기) -->
<head>                    <!-- 화면엔 안 보이는 준비 칸 -->
  <meta charset="UTF-8">  <!-- 한글 안 깨지게 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <!-- ① meta = 화면엔 안 보이는 '정보 쪽지' 태그 (브라우저한테 주는 메모) -->
       <!-- ② name="viewport" = 이 쪽지는 '보이는 화면 영역' 설정이다 -->
       <!-- ③ width=device-width = 페이지 너비를 기기 화면 너비에 맞춤 (폰이면 폰 너비, PC면 PC 너비) -->
       <!-- ④ initial-scale=1.0 = 처음 확대 배율 1배(원래 크기) -->
       <!-- ★ 모바일 '전용' 아님! 모든 기기 크기에 맞추는 반응형의 출발점. 없으면 폰에서 글자가 깨알같이 작게 나옴 -->
  <title>Document</title>  <!-- 브라우저 탭에 뜨는 이름 -->
</head>
<body>                    <!-- 화면에 보이는 진짜 내용 칸 -->

</body>
</html>

viewport 줄이 핵심 — width=device-width는 페이지 너비를 기기 화면 너비에 맞추고, initial-scale=1.0은 처음 확대 배율을 1배로 둠. 없으면 폰에서 글자가 깨알같이 작게 나옴

자주 쓰는 약어

약어를 치고 Tab — 화살표 → 오른쪽이 펼쳐진 결과

① 구조·반복 만들기

ul>li*3        <!-- 치고 Tab → 펼쳐짐 (> 안에 넣기, *3 = 3번 반복) -->

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

② class·id 단축

.box           <!-- 치고 Tab → 펼쳐짐 (. = class) -->

<div class="box"></div>

#top           <!-- 치고 Tab → 펼쳐짐 (# = id) -->

<div id="top"></div>

③ 내용·속성 채우기

h1{안녕}       <!-- 치고 Tab → 펼쳐짐 ({ } = 안에 들어갈 내용) -->

<h1>안녕</h1>

a[href=#]      <!-- 치고 Tab → 펼쳐짐 ([ ] = 속성) -->

<a href="#"></a>

기호 뜻 한눈에

• > — 안에 넣기(자식). ul>li = ul 안에 li
• *N — N번 반복. li*3 = li 3개
• .이름 — class 붙이기. .box = class="box"
• #이름 — id 붙이기. #top = id="top"
• {글자} — 태그 안의 내용. h1{안녕} = <h1>안녕</h1>
• [속성] — 속성 넣기. a[href=#] = href="#"

32

개발자도구 F12

개발자도구 (F12) — 화면 뒤를 들여다보는 꿀팁

브라우저에 숨어 있는 개발자도구 — 화면 뒤 HTML·CSS가 다 보이고, 값을 잠깐 바꿔 미리보기도 됨 — 에러 잡는 실전 도구 (별도 설치 X, 크롬·엣지 기본 내장)

여는 법

• F12 누르기 (Mac은 Cmd + Opt + I)
• 또는 화면 아무 곳 우클릭 → 검사

꿀팁 — 이렇게 써먹기

1

화살표(검사) 아이콘 클릭 → 화면 요소에 마우스 올리면 그게 무슨 태그인지 콕 짚어 줌

2

Elements 탭 = 페이지 HTML 구조 — 줄을 클릭하면 화면에서 그 부분이 반짝 표시

3

글자·색 값을 더블클릭해 바꿔보기 → 화면에 바로 반영 (디자인 미리보기)

4

Console 탭의 빨간 글씨 = 에러 메시지 → 어디가 틀렸는지 힌트

주의 — 여기서 바꾼 건 화면에서만 잠깐 — 내 파일은 안 바뀌고 새로고침하면 원래대로 (마음껏 실험해도 안전)

꿀팁 — 남의 잘 만든 사이트에서 F12 열어 구조 구경 = 가장 빠른 공부법

33

한 줄씩 질문하며 공부

한 줄씩 질문하며 공부하기 — 물고기 잡는 법

아래는 STEP 01~32를 한 페이지에 다 욱여넣은 약간 어려운 더미 코드 — 처음엔 모르는 게 당연함 — 외우지 말고 한 줄씩 Claude Code에 물어보며 빈칸을 채워 나가기 (정답을 떠먹는 게 아니라 스스로 묻는 습관을 익히는 단계)

먼저 — 약간 어려운 더미 코드 (한 줄씩 씹어 먹기)

코드 사이  처럼 적힌 줄이 내가 Claude Code에 던질 질문 — 한 줄 보고 모르면 바로 물어보기

<!DOCTYPE html>                       <!-- "이건 HTML 문서야" 선언 -->
<!-- 1. 이 한 줄 안 쓰면 화면이 어떻게 깨짐? -->
<html lang="ko">                        <!-- 문서 시작, 한국어 페이지 -->
<!-- 2. lang="ko"를 "en"으로 바꾸면 뭐가 달라짐? -->
<head>                                 <!-- 화면엔 안 보이는 준비 칸 -->
  <meta charset="UTF-8">               <!-- 한글 안 깨지게 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 3. 이 viewport 줄은 무슨 일을 함? 모바일이랑 무슨 상관? -->
  <title>회원 가입</title>              <!-- 브라우저 탭 이름 -->
</head>
<body>                                 <!-- 화면에 보이는 진짜 칸 -->
  <header>                             <!-- 맨 위 머리말 -->
    <nav aria-label="주요 메뉴">        <!-- 메뉴 모음 -->
    <!-- 4. aria-label은 왜 붙임? 없으면 누가 불편함? -->
      <ul>
        <li><a href="#join">가입</a></li>
        <!-- 5. href="#join" 앞의 #은 무슨 뜻? -->
      </ul>
    </nav>
  </header>

  <main>                              <!-- 핵심 본문 -->
    <section id="join">               <!-- 한 주제 덩어리 -->
      <h2>회원 가입</h2>
      <form action="/signup" method="post">
      <!-- 6. action이랑 method가 각각 뭘 정하는 거임? -->
        <label for="email">이메일</label>
        <input type="email" id="email" name="email" required>
        <!-- 7. label의 for랑 input의 id가 똑같으면 무슨 일이 생김? -->
        <!-- 8. required 빼면 어떻게 됨? type="email"은 뭘 검사함? -->
        <fieldset>
          <legend>관심사</legend>
          <label><input type="checkbox" name="tag" value="fe"> 프론트엔드</label>
          <!-- 9. checkbox 여러 개의 name을 똑같이 "tag"로 두는 이유는? -->
        </fieldset>
        <button type="submit">가입하기</button>
      </form>
    </section>

    <section>
      <h2>요금제</h2>
      <table>
        <thead><tr><th>플랜</th><th>가격</th></tr></thead>
        <!-- 10. thead와 tbody를 굳이 나누는 이유는? th랑 td 차이는? -->
        <tbody>
          <tr><td>무료</td><td>0원</td></tr>
          <tr><td>프로</td><td>9,900원</td></tr>
        </tbody>
      </table>
    </section>
  </main>

  <footer>
    <small>&copy; 2026 커뮤니티</small>
    <!-- 11. &copy; 는 화면에 뭐로 보임? 왜 ⓒ를 직접 안 침? -->
  </footer>
</body>
</html>

물고기 잡는 법 — Claude Code에 한 줄씩 묻기

1

위 코드를 VSCode에 붙여넣고 모르는 줄 딱 한 줄만 골라 복사

2

Claude Code에 그 줄을 붙이고 세 가지를 한 번에 물어보기 — "왜 이렇게 씀? / 안 쓰면 어떻게 됨? / 다른 방법은?"

3

답을 한 문장으로 줄여 코드 옆 주석()에 직접 적기 — 내 말로 바꿔 적어야 진짜 내 것

4

바로 옆 코드에서 값을 바꿔 보고 F12로 결과 확인 (STEP 32) → 다음 줄로 이동, 반복

그대로 따라 쳐도 되는 질문 템플릿

이 HTML 한 줄이 무슨 뜻인지 초등학생도 알게 설명해줘:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 이걸 안 쓰면 화면이 어떻게 달라져?
- 더 좋은 대안이나 같이 쓰면 좋은 게 있어?
- 한 줄 요약으로 주석 달아줘

핵심 — 답을 받는 게 목표가 아니라 한 줄마다 질문을 만들어 내는 습관이 목표 — 질문이 떠오르면 이미 절반은 공부한 것

34

미니 프로젝트 (HTML)

미니 프로젝트 — 한 페이지짜리 내 소개 사이트 만들기

STEP 01~33에서 배운 걸 한 파일에 다 합쳐 작은 웹사이트 하나 완성하기 — 따라 치고 끝이 아니라 글자·색·메뉴를 내 것으로 바꿔 진짜 내 페이지로 만들기

이번 프로젝트에서 쓰는 것 (배운 것 복습)

• 뼈대(STEP 05) · 시맨틱 header/nav/main/section/footer(STEP 28)
• 제목·문단·목록·링크·이미지(STEP 06~16)
• id로 메뉴 점프(STEP 19·22) · class로 스타일 묶기(STEP 18) · 표(STEP 26) · 폼(STEP 15)
• 막히면 한 줄씩 질문(STEP 33) · F12로 확인(STEP 32)

완성 코드 — index.html 하나에 통째로

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>김코딩 소개</title>
</head>
<body>

  <header class="site-header">                <!-- class=스타일용 이름표 (CSS에서 .site-header 로 꾸밈) -->
    <h1>김코딩</h1>
    <nav>
      <a href="#about" class="nav-link">소개</a> ·          <!-- 같은 class="nav-link" 3개 → CSS 한 번에 똑같이 꾸밈 (class는 공유 OK) -->
      <a href="#skill" class="nav-link">할 줄 아는 것</a> ·
      <a href="#contact" class="nav-link">연락처</a>
    </nav>
  </header>

  <main>
    <section class="section" id="about">        <!-- class="section"=공유 스타일 / id="about"=점프용 고유 이름 (한 태그에 둘 다 가능) -->
      <h2>소개</h2>
      <p>안녕하세요, <strong>HTML을 막 배운</strong> 김코딩입니다.</p>
      <img src="https://placehold.co/200x200" alt="내 프로필 사진" width="200" class="profile-img">
    </section>

    <section class="section" id="skill">
      <h2>할 줄 아는 것</h2>
      <ul>
        <li>HTML 뼈대 만들기</li>
        <li>시맨틱 태그로 구조 짜기</li>
        <li>표·폼·링크 넣기</li>
      </ul>

      <h3>공부 기록</h3>
      <table>
        <thead><tr><th>주차</th><th>배운 것</th></tr></thead>
        <tbody>
          <tr><td>1주</td><td>태그·뼈대</td></tr>
          <tr><td>2주</td><td>표·폼·시맨틱</td></tr>
        </tbody>
      </table>
    </section>

    <section class="section" id="contact">
      <h2>연락처</h2>
      <form action="/send" method="post">
        <label for="name">이름</label>
        <input type="text" id="name" name="name" required>       <!-- id="name"=label의 for와 짝(고유) / name="name"=서버로 보낼 값 이름 -->

        <label for="msg">하고 싶은 말</label>
        <textarea id="msg" name="msg" rows="3"></textarea>

        <button type="submit" class="btn">보내기</button>       <!-- class="btn"=버튼 공통 스타일 (여러 버튼에 재사용) -->
      </form>
    </section>
  </main>

  <footer class="site-footer">
    <small>&copy; 2026 김코딩</small>
  </footer>

</body>
</html>

id와 class 실무 구분 (CSS에서 중요!)

• id = 페이지에 딱 하나 — 메뉴 점프(#about) · label 연결(for↔id) · JS로 콕 집을 때
• class = 여러 곳에 공유 — 같은 모양을 한 번에 꾸밀 때. nav-link 3개처럼 묶어서 CSS 한 줄로 똑같이 스타일
• 한 태그에 둘 다 가능 — <section class="section" id="about"> (class=공유 스타일, id=고유 점프)
• CSS에서 부를 때 — class는 .이름(점), id는 #이름(샵). 꾸미기는 주로 class, id는 아껴서 고유한 곳에만

만드는 순서

1

VSCode 새 파일 index.html → 위 코드 붙여넣기 → 저장(Ctrl+S)

2

[Go Live] 클릭 → 브라우저에서 내 사이트 확인

3

위 메뉴(소개·할 줄 아는 것·연락처) 눌러 같은 페이지 안에서 점프 되는지 확인 (href="#id")

4

이름·소개·목록을 내 정보로 바꿔 보기 — 막히면 STEP 33처럼 한 줄씩 질문

한 단계 더 (도전)

• 좋아하는 것 <section> 하나 더 추가
• 링크(STEP 23)로 내 SNS 연결 <a href="..." target="_blank">
• 다음 단계 CSS에서 색·글꼴·여백을 입혀 진짜 사이트처럼 꾸미기

핵심 — 작아도 처음부터 끝까지 직접 완성해 보는 게 실력 — 완성한 파일은 Netlify·Vercel로 인터넷에 올릴 수도 있음