html5

CHAPTER 1 / 33

읽기 약 2분

SYNTAX

HTML5, 배워서 어디에 쓸까?

핵심 개념

HTML5로 만들 수 있는 서비스와 취업·창업 활용법을 한눈에 본다. 이 트랙을 마치면 웹의 뼈대를 완전히 이해하게 된다.

본문

HTML5를 배우면 무엇을 만들 수 있을까요? 이 챕터에서는 HTML5로 실제 서비스를 만드는 방법과 활용 분야를 한눈에 보여드립니다.

🌐 HTML5로 만들 수 있는 것들

1. 웹사이트 & 랜딩 페이지

HTML5는 모든 웹의 뼈대입니다. 개인 포트폴리오, 회사 소개 페이지, 제품 랜딩 페이지 — 모두 HTML5에서 시작합니다.

실전 예시:

프리랜서 포트폴리오 사이트
스타트업 제품 소개 랜딩 페이지
이벤트/행사 안내 페이지
개인 블로그

2. 웹 애플리케이션 (Web App)

HTML5 + CSS3 + JavaScript를 조합하면 데스크톱 앱 못지않은 웹 앱을 만들 수 있습니다.

실전 예시:

할일 관리 앱 (Todo App)
가계부 / 예산 관리 앱
실시간 채팅 앱
칸반 보드 (Trello 같은)
온라인 에디터 (메모장, 마크다운)

3. 이커머스 & 쇼핑몰

상품 목록, 장바구니, 결제 페이지 — 모두 HTML5 폼과 시맨틱 구조가 기반입니다.

실전 예시:

소규모 온라인 쇼핑몰
디지털 제품 판매 페이지
구독 서비스 랜딩

4. 콘텐츠 플랫폼

블로그, 뉴스레터, 학습 플랫폼 — 콘텐츠를 구조화하고 표시하는 것이 HTML5의 핵심입니다.

실전 예시:

기술 블로그 (SEO 최적화)
온라인 학습 플랫폼 (이 사이트처럼!)
뉴스레터 아카이브
문서화 사이트 (API 문서)

5. 모바일 웹 & PWA

HTML5로 만든 웹사이트를 모바일 앱처럼 설치할 수 있습니다. PWA(Progressive Web App) 기술을 사용하면 오프라인에서도 동작합니다.

실전 예시:

모바일 최적화 웹 서비스
오프라인 지원 메모 앱
푸시 알림이 있는 웹 앱

6. 이메일 템플릿

마케팅 이메일, 뉴스레터, 알림 메일 — 모두 HTML로 작성됩니다. 이메일 HTML은 웹과 다른 제약이 있어서 별도로 배울 가치가 있습니다.

7. SEO & 검색 엔진 최적화

시맨틱 HTML5 태그를 올바르게 사용하면 Google 검색에서 상위에 노출됩니다. <header>, <nav>, <main>, <article> — 이 태그들이 검색 엔진에게 페이지 구조를 알려줍니다.

8. 접근성 (Accessibility)

시각 장애인, 운동 장애인도 웹을 사용할 수 있게 만드는 것. HTML5의 시맨틱 태그와 ARIA 속성이 핵심입니다. 법적 의무이기도 합니다.

💼 HTML5를 배우면 할 수 있는 일

취업 & 프리랜싱

프론트엔드 개발자: HTML5는 필수 기본기. React/Vue를 배우기 전에 반드시 알아야 합니다.
퍼블리셔 / 마크업 개발자: HTML+CSS 전문가. 디자인을 웹으로 변환하는 직무.
프리랜서: 소규모 웹사이트 제작으로 프로젝트당 50~500만원.

1인 창업 & 사이드 프로젝트

랜딩 페이지 제작 대행: HTML5 + Tailwind CSS로 빠르게 만들어 판매.
자체 서비스 출시: HTML5 → CSS3 → JavaScript → React/Next.js 순으로 배우면 풀스택 서비스 가능.
블로그 SEO 수익화: 시맨틱 HTML5로 검색 최적화 → AdSense 광고 수익.

AI 시대에 더 중요해진 이유

AI가 코드를 생성해주지만, HTML5 구조를 이해하지 못하면:

AI가 생성한 HTML이 올바른지 판단할 수 없습니다
접근성·SEO 문제를 발견할 수 없습니다
디버깅이 불가능합니다

AI는 도구이고, HTML5 지식은 그 도구를 지휘하는 능력입니다.

🚀 학습 로드맵: HTML5 → 서비스 출시까지

📋 코드 (11줄)

HTML5 (이 트랙)
  ↓
CSS3 (스타일링)
  ↓
JavaScript (동적 기능)
  ↓
React 또는 Vue (프레임워크)
  ↓
Next.js (풀스택)
  ↓
배포 (Vercel) → 수익화

HTML5는 이 모든 것의 출발점입니다. 이 트랙의 30개 챕터를 마치면 웹의 뼈대를 완전히 이해하게 됩니다.

🛠️ 지금 바로 시작하는 방법

이 트랙은 브라우저 실습을 지원합니다. 설치 없이 바로 코드를 작성하고 결과를 확인할 수 있습니다.

다음 챕터(CH.2)부터 이론을 읽으세요
코드 예제를 분석하세요
실습 페이지에서 직접 코드를 수정해보세요
예상과 다르게 동작하면 → 그게 학습입니다!

💻 HTML5 실전 코드 — 개인 포트폴리오 뼈대

아래는 HTML5로 만든 미니 포트폴리오 사이트의 구조입니다. 이 트랙을 마치면 이런 구조를 자유자재로 짤 수 있게 됩니다.

HTML📋 코드 (64줄)

<!-- HTML5로 만드는 미니 서비스 — 개인 포트폴리오 골격 -->
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="프론트엔드 개발자 홍길동의 포트폴리오">
  <title>홍길동 | 프론트엔드 개발자</title>
</head>
<body>
  <!-- 네비게이션 -->
  <header>
    <nav>
      <a href="#about">소개</a>
      <a href="#projects">프로젝트</a>
      <a href="#skills">기술스택</a>
      <a href="#contact">연락처</a>
    </nav>
  </header>

  <!-- 메인 콘텐츠 -->
  <main>
    <!-- 자기소개 -->
    <section id="about">
      <h1>안녕하세요, 홍길동입니다</h1>
      <p>HTML5, CSS3, JavaScript를 활용해 웹 서비스를 만듭니다.</p>
    </section>

    <!-- 프로젝트 -->
    <section id="projects">
      <h2>프로젝트</h2>
      <article>
        <h3>할일 관리 앱</h3>
        <p>HTML5 + JavaScript로 만든 Todo App</p>
        <a href="#">데모 보기 →</a>
      </article>
      <article>
        <h3>날씨 대시보드</h3>
        <p>API 연동 실시간 날씨 표시</p>
        <a href="#">데모 보기 →</a>
      </article>
    </section>

    <!-- 기술 스택 -->
    <section id="skills">
      <h2>기술 스택</h2>
      <ul>
        <li>HTML5 & 시맨틱 마크업</li>
        <li>CSS3 & Tailwind CSS</li>
        <li>JavaScript & TypeScript</li>
        <li>React & Next.js</li>
      </ul>
    </section>
  </main>

  <!-- 연락처 -->
  <footer id="contact">
    <h2>연락처</h2>
    <p>이메일: <a href="mailto:hong@example.com">hong@example.com</a></p>
    <p>GitHub: <a href="https://github.com/honggildong">github.com/honggildong</a></p>
    <p>&copy; 2026 홍길동. All rights reserved.</p>
  </footer>
</body>
</html>

💡 이 코드에서 배울 수 있는 것:

시맨틱 태그: header, nav, main, section, article, footer
SEO: meta description, 의미 있는 heading 구조
접근성: lang 속성, 논리적 탭 순서
반응형: viewport meta 태그

→ 이 뼈대에 CSS3(스타일)과 JavaScript(동적 기능)를 추가하면 실제 서비스가 됩니다!

📚 HTML5 트랙 전체 챕터 안내

이 트랙은 기초 → 중급 → 심화 순서로 구성되어 있습니다.

🟢 기초 (CH.2~11) — HTML의 뼈대를 세운다

CH	제목	핵심
02	기초 해부: DOCTYPE & HTML 구조	HTML 뼈대 구조
03	시맨틱 레이아웃: Header, Footer, Main	의미 있는 레이아웃
04	텍스트 의미: strong, em, mark	텍스트 강조 태그
05	콘텐츠 그룹화: ul, ol, dl	목록 태그
06	입력 타입 해부: Email, Tel, Date	HTML5 입력 타입
07	폼 검증: required & pattern	폼 유효성 검사
08	멀티미디어: Video 최적화	영상 임베드
09	멀티미디어: Audio (웹에서 소리 지르기)	오디오 재생
10	연결의 비밀: Links & Anchors	링크와 앵커
11	이미지 분석: Img & Figures	이미지 표시

🟡 중급 (CH.12~21) — 의미와 구조를 더한다

CH	제목	핵심
12	캔버스 기초: <canvas>	2D 그리기
13	벡터 그래픽: SVG	벡터 그래픽
14	위치 정보: Geolocation	위치 추적
15	끌어서 놓기: Drag & Drop	드래그 앤 드롭
16	로컬 스토리지: Local Storage	영구 저장
17	세션 스토리지: Session Storage	세션 저장
18	입력 타입: Email & Tel	추가 입력 타입
19	날짜 선택: <input type='date'>	날짜 선택기
20	슬라이더: <input type='range'>	범위 슬라이더
21	추천 목록: <input list='fruits'>	자동완성 목록

🔵 심화 (CH.22~31) — 실전 서비스 수준으로 끌어올린다

CH	제목	핵심
22	백그라운드 일꾼: Web Workers	백그라운드 작업
23	실시간 대화: Web Sockets	실시간 통신
24	브라우저 데이터베이스: IndexedDB	브라우저 DB
25	뒤로 가기 조절: History API	히스토리 조작
26	오프라인 도우미: Service Workers	오프라인 지원
27	알림 서비스: Notifications API	푸시 알림
28	전체 화면: Fullscreen API	전체화면 모드
29	화면 보임 확인: Page Visibility	가시성 감지
30	고성능 애니메이션: Web Animation API	웹 애니메이션
31	나만의 태그: Shadow DOM	커스텀 태그

💡 추천 학습 순서: CH.2부터 순서대로 진행하세요. 각 챕터는 이전 챕터의 지식을 기반으로 합니다.

⏱️ 예상 소요 시간: 챕터당 약 15~~20분 (이론 + 실습), 전체 약 8~~10시간

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

내가 HTML5를 처음 배우는 입장이야.
HTML5로 만들 수 있는 4단계 활용처(문서/폼/미디어/인터랙션)의
근본 차이와 학습 순서를 단계별로 설명해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

HTML5만으로 만들 수 있는 실전 서비스를
난이도별로 5개 추천해줘.
각각 필요한 핵심 태그 목록과 함께 알려줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

HTML5 학습 로드맵 전체를 분석하고
2026년 기준 우선 학습할 태그·API와
우선순위가 떨어지는 항목을 종합 리포트로 정리해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

2026년에 순수 HTML5만 깊게 배우는 게
취업·커리어에 얼마나 도움이 되는지 솔직하게 평가하고
 React·Vue 같은 대안과 비교해줘.

⭐ 이것만 기억하세요

HTML5, 배워서 어디에 쓸까?는 이 3가지만 확실히 잡으세요

1.HTML5는 웹사이트·웹앱·이커머스·콘텐츠 플랫폼·PWA·이메일 — 모든 웹 서비스의 뼈대다

2.취업(프론트엔드)·프리랜싱·1인 창업·AI 협업 — HTML5를 아는 것이 모든 시작점이다

3.이 트랙 30개 챕터를 마치면 아래 목차의 모든 주제를 정복하게 된다 — 다음 챕터부터 시작하자

💬 이 챕터 질문 보기

HTML5 · CH.1 — 질문하거나 답변을 확인하세요

→

진행도 1 / 33

← 커리큘럼으로 ← 목록으로 (HTML5)