01 / 15
SESSION 18 · Part 5 웹 개발

HTML —
웹페이지의 골격

태그로 의미를 담고, 구조로 말한다

02 / 15
🎯

이 세션에서
배우는 것

🏷️
태그의 역할
HTML 태그가 웹페이지 구조를 어떻게 표현하는지 설명한다
📄
문서 작성
기본 HTML 문서를 스스로 작성할 수 있다
🧭
시맨틱 태그
의미를 담은 태그가 왜 중요한지 이해한다
03 / 15
💭

왜 HTML을
알아야 할까?

우리가 매일 보는 웹사이트 — 뉴스, 블로그, 쇼핑몰 —
그 바탕은 모두 HTML 문서 한 장이다.

AI와 함께 나만의 웹을 만들려면, 먼저 웹의 설계도를 읽고 쓸 줄 알아야 한다.
HTML은 그 첫 단추다.

04 / 15

HTML은 태그로 쓴다

여는 태그와 닫는 태그 사이에 내용을 넣어 의미를 부여한다.

📝
<h1>~<h6>
제목
📄
<p>
문단
🔗
<a>
링크
🖼️
<img>
이미지
📋
<ul>/<li>
리스트
📦
<div>
묶음
✏️
<span>
인라인
🔘
<button>
버튼
<h1>안녕하세요</h1>
<p>HTML로 만든 첫 문단입니다.</p>
<a href="https://example.com">링크</a>
05 / 15
🧭

시맨틱 태그 —
더 깊게 이해하기

같은 화면이라도 의미 있는 태그를 쓰면 세 가지가 달라진다.

1
SEO (검색 최적화)
구글은 <header>·<main>·<article>을 보고 페이지 구조를 파악한다. <div>만 쓰면 검색 엔진이 내용을 제대로 이해하지 못한다.
2
접근성 (Accessibility)
시각장애인의 스크린 리더는 <nav>를 "탐색 영역", <main>을 "주요 내용"으로 읽어준다. 의미 없는 <div>는 그냥 건너뛴다.
3
유지보수
6개월 후 코드를 다시 볼 때, <header>·<footer>는 한눈에 역할이 보인다. <div class="wrapper2"> 수십 개는 해독이 필요하다.
4
CSS·JS 연동
시맨틱 태그는 CSS 선택자와 JS querySelector에서 더 명확하게 요소를 특정할 수 있어 코드가 간결해진다.
06 / 15
🧭

의미를 담는 시맨틱 태그

같은 화면이라도 의미 있는 태그를 쓰면 접근성과 SEO가 올라간다.

<header>사이트 상단 (로고, 메뉴)</header>
<nav>네비게이션 링크</nav>
<main>
  <article>본문 글</article>
  <aside>사이드 콘텐츠</aside>
</main>
<footer>저작권, 연락처</footer>

<div>는 아무 의미가 없지만, <header>는 "여긴 머리다"라고 컴퓨터에게 말해준다.

07 / 15
🌲

브라우저의 HTML 파싱 —
실제로는 어떻게?

브라우저가 HTML 파일을 받으면, 화면에 그리기 전에 반드시 DOM 트리를 먼저 만든다.

📄 HTML 텍스트
→
🔍 토크나이저
태그 분리
→
🌲 DOM 트리
객체 생성
→
🎨 화면 렌더링

핵심: DOM은 HTML의 복사본이 아니라, 브라우저가 JavaScript로 조작할 수 있게 만든 살아있는 객체 트리다.

08 / 15

태그에 속성을 더한다

속성(attribute)은 태그에 추가 정보를 부여한다.

1
href — 링크 주소
<a href="https://example.com"> — 클릭 시 이동할 URL
2
src — 리소스 경로
<img src="photo.jpg" alt="사진"> — 불러올 이미지 파일
3
class / id — 식별자
CSS·JS가 이 요소를 찾아 스타일·동작을 적용할 수 있게 한다
4
alt — 대체 텍스트
이미지를 불러오지 못할 때, 혹은 시각장애인 스크린 리더가 읽어준다
09 / 15
📱

실생활에서
이렇게 쓰여요

우리가 매일 보는 것들의 바탕에는 모두 HTML이 있다.

🌐
모든 웹페이지
네이버, 쿠팡, 유튜브 — 모두 HTML 뼈대 위에 CSS와 JS를 얹은 것이다
📧
이메일 뉴스레터
받은 편지함의 예쁜 이메일은 순수 HTML로 작성된다 (CSS는 인라인으로)
💬
카카오 채널 페이지
브랜드 홈, 이벤트 페이지 등 HTML 기반 랜딩 페이지가 활발히 쓰인다

💡 이 개념이 없다면 인터넷 자체가 존재할 수 없다 — HTML은 웹의 토대다.

10 / 15
💡

자주 하는
오해 바로잡기

이렇게 생각하기 쉽지만, 실제로는 조금 다릅니다.

❌ 흔한 오해
  • HTML은 프로그래밍 언어다
  • 태그는 화면에 보이는 것만 제어한다
  • HTML만 알면 웹사이트를 완성할 수 있다
✓ 실제로는
  • HTML은 마크업 언어다 — 구조를 정의할 뿐, 로직이 없다
  • 시맨틱 태그는 SEO·접근성까지 제어한다
  • CSS(스타일)와 JS(동작)가 함께 있어야 진짜 웹사이트다
11 / 15
🏗️

HTML은 건물 설계도다

어디에 문이 있고, 어디에 창문이 있는지 — 구조만 정의한다.

🏠 건물 비유
골조 설계도
=
HTML — 어디에 무엇이 있는지 정의
인테리어
=
CSS — 색깔과 레이아웃
전기·수도
=
JavaScript — 움직임과 동작
방 이름표
=
시맨틱 태그 — "여긴 침실, 여긴 거실"
12 / 15
🤖

이걸 알면
AI와 이렇게 대화해요

HTML 구조를 이해하면 Claude나 ChatGPT를 훨씬 잘 활용할 수 있다.

👤
웹페이지 만들고 싶어요.
🤖
어떤 종류의 페이지인가요? 정보를 더 주시면 구체적인 HTML을 만들어드릴 수 있어요.
👤
제품 소개 페이지의 HTML 구조를 시맨틱 태그(header, nav, main, section, footer)를 사용해서 작성해줘. 제품명은 "클라우드노트"야.
🤖
알겠습니다! <header>에 로고와 <nav>, <main> 안에 <section>으로 특징 소개, <footer>에 연락처를 담은 구조를 바로 작성해드릴게요. [완성된 HTML 코드 제공]
13 / 15
✅

이렇게
이해하셨나요?

✅
맞게 이해하셨어요
HTML은 웹페이지의 구조(뼈대)를 정의하는 마크업 언어다
❌
이렇게는 아니에요
HTML로 애니메이션을 만들 수 있다 (CSS와 JS가 필요)
✅
맞게 이해하셨어요
시맨틱 태그는 SEO와 접근성 모두에 영향을 준다
❌
이렇게는 아니에요
HTML 파일을 수정하면 브라우저의 DOM도 즉시 바뀐다 (실제로는 새로고침 필요)

💪 HTML의 의미와 구조를 이해했다면, CSS와 JS 학습도 훨씬 빠르게 됩니다!

14 / 15
📌

핵심 정리

🏷️
태그
여는·닫는 한 쌍으로
의미 있는 영역을 만든다
🧭
시맨틱
header/nav/main/footer —
의미를 담는 태그
🔧
속성
href, src, class 등
태그에 부가 정보 제공
🌲
DOM 트리
HTML은 계층 구조
부모-자식 관계
♿
접근성
시맨틱 태그는
SEO와 접근성의 기본
🏗️
구조 우선
꾸미기 전에
의미를 먼저 담는다
15 / 15
🚀

다음 세션
Session 19 · CSS와 Tailwind CSS

뼈대만 있는 HTML에 색깔과 레이아웃을 입힌다.
선택자, 박스 모델, Flexbox — 웹의 시각적 언어를 배운다.

💡 기억할 것: HTML은 의미를 담고, CSS는 스타일을 담는다.

슬라이드 목록