HTML Academy

Name: HTML Academy
Availability: InStock

HTMLWebFrontendBeginner

HTML Academy에서 HTML을 배워 웹 개발의 탄탄한 기초를 구축하세요.

🤖 AI 기반📚 40개 코스👥 100,000명 이상의 학습자⭐ 4.9 평점

코스 개요

HTML: 모든 웹 페이지 뒤의 언어

HTML은 웹의 구조적 기초입니다 — 모든 브라우저 탭, 양식 제출, 임베드된 영상은 마크업으로 시작됩니다. 이 과정은 유효한 문서를 관리하는 규칙부터 최신 프로덕션 사이트에서 사용되는 브라우저 API와 컴포넌트 모델까지 HTML에서 진정한 능숙함을 구축합니다. 목표는 단순히 태그를 작성하는 것이 아니라 각 요소가 존재하는 이유와 브라우저, 보조 기술, 검색 엔진에 무엇을 신호하는지 이해하는 것입니다.

배울 내용

문서 구조, 텍스트 콘텐츠, 링크, 이미지, 목록부터 시작한 후 표, 양식, 양식 검증 속성으로 나아갑니다. 이 과정은 의미론적 HTML5 요소, <head>와 메타데이터, 오디오와 영상, ARIA 역할 및 속성을 포함한 접근성 기초를 다룹니다. 이후 과정은 커스텀 데이터 속성, HTML 템플릿, Canvas 및 SVG 요소, Web Storage, Drag and Drop API, SEO 및 소셜 메타 태그, HTML 이메일 템플릿을 다룹니다. 고급 섹션은 Shadow DOM, Web Components 및 커스텀 요소, HTML 모듈 및 import map, 점진적 개선, 국제화, 보안, History 및 Navigation API, Intersection Observer, Progressive Web Apps을 위한 HTML 구축을 다룹니다.

학습 경로

40개 과정은 A1부터 A2, B1, B2를 거쳐 HTML at Scale에 관한 C1 캡스톤으로 진행됩니다. A1 및 A2 과정은 필수 요소 — 문서 구조, 의미론적 요소, 양식, 메타데이터를 확립합니다. B1은 접근성, ARIA, Canvas, SVG, 브라우저 스토리지를 소개합니다. B2는 가장 큰 블록으로, Web Components, Shadow DOM, 성능, 보안, 국제화, Intersection Observer를 다룹니다. 최종 C1 과정 HTML at Scale은 HTML이 대규모 코드베이스에서 작성, 테스트, 유지보수될 때 중요한 패턴과 제약 사항을 다룹니다.

작동 방식

각 과정은 기본 제공 코드 에디터에서 실시간 피드백과 함께 완료하는 짧고 실용적인 수업으로 나뉩니다. 막히면 언제든 AI 튜터를 이용할 수 있으며, 자신의 속도대로 진행합니다 — 각 수업은 자체 포함되어 있어 나중에 참고용으로 언제든지 토픽으로 돌아갈 수 있습니다.

학습 시작 →

도구

코스 도구 탐색

AI 기반 도구와 기능으로 학습을 강화하세요

학습 방식

🎯

인터랙티브 레슨

실시간 피드백을 받으며 직접 코딩 연습하기

🤖

AI 튜터

막힐 때마다 AI 튜터에게 즉시 도움받기

💻

내장 에디터

브라우저에서 바로 코드 작성 & 실행하기

🏆

수료증

과정을 완료하면 수료증 취득하기

커리큘럼

40개 코스

HTML Academy 학습 경로의 모든 코스.

HTML 문서 구조

A13개 레슨

브라우저가 HTML을 분석하는 방식과 DOCTYPE의 역할, 그리고 html, head, body 요소가 모든 웹 페이지를 구성하는 방식을 배웁니다.

텍스트 콘텐츠 요소

A14개 레슨PRO

HTML 텍스트 태그를 사용해 제목, 문단, 강조, 인라인 요소와 공백 제어를 완벽하게 익혀 보세요.

링크와 탐색

A14개 레슨PRO

앵커 요소, 절대 URL과 상대 URL, 새 탭 링크, 프래그먼트 식별자로 탐색 기능을 만들어 보세요.

이미지와 그림

A14개 레슨PRO

img, srcset, picture 요소와 시맨틱 그림 캡션으로 이미지를 반응형으로 표시해 보세요.

A14개 레슨PRO

올바른 중첩과 시맨틱 의미를 갖춘 비순서 목록, 순서 목록, 설명 목록을 만들어 보세요.

표

A24개 레슨PRO

올바른 구조와 셀 병합, 표 구역을 사용해 접근 가능한 데이터 표를 만들어 보세요.

HTML 속성과 전역 속성

A24개 레슨PRO

모든 HTML 요소에서 사용되는 id, class, style, hidden, tabindex 및 사용자 지정 data-* 속성을 이해합니다.

HTML 폼 기초

A24개 레슨PRO

입력 유형, 레이블, 버튼과 form 요소의 action 및 method 속성을 사용해 접근 가능한 웹 폼을 만들어 보세요.

고급 폼 컨트롤

A24개 레슨PRO

드롭다운, 텍스트 영역, 체크박스 그룹, 라디오 버튼과 datalist를 활용한 자동 완성으로 폼을 개선해 보세요.

폼 유효성 검사 속성

A24개 레슨PRO

required, pattern, min, max 같은 HTML5 유효성 검사 속성으로 제출 전에 사용자 입력을 검증해 보세요.

시맨틱 HTML5

A24개 레슨PRO

일반적인 div를 header, nav, main, footer, article, section 같은 의미 있는 HTML5 요소로 바꿔 보세요.

더 알아보는 시맨틱 요소

A24개 레슨PRO

aside, details, summary, progress, meter를 살펴보고 페이지에 더 풍부한 의미와 상호작용을 추가해 보세요.

HTML head와 메타데이터

A24개 레슨PRO

head 구역을 완벽하게 익혀 보세요. title, 메타 태그, viewport, 표준 URL, robots 지시어와 파비콘을 다룹니다.

오디오와 비디오 요소

A24개 레슨PRO

HTML5로 오디오와 비디오를 네이티브 방식으로 삽입하고, 여러 형식을 제공하며, track과 WebVTT로 자막을 추가해 보세요.

HTML 접근성 기초

B14개 레슨PRO

포용적인 웹 페이지를 만들기 위해 WCAG 등급, 제목 계층 구조, 대체 텍스트 전략과 키보드 탐색을 이해합니다.

ARIA 역할과 속성

B14개 레슨PRO

ARIA 역할, 레이블, 설명과 네이티브 HTML을 먼저 사용한다는 원칙으로 접근성을 향상해 보세요.

사용자 지정 데이터 속성

B14개 레슨PRO

data-* 속성, dataset API와 CSS 선택자를 사용해 HTML 요소에 사용자 지정 메타데이터를 저장하고 접근해 보세요.

HTML 템플릿

B14개 레슨PRO

template 요소로 비활성 마크업을 정의하고 효율적으로 복제하며, innerHTML 기반 렌더링과 비교해 보세요.

Canvas 요소

B14개 레슨PRO

2D 캔버스에 도형, 텍스트와 이미지를 그리고 requestAnimationFrame으로 애니메이션을 적용해 보세요.

HTML에서의 SVG

B14개 레슨PRO

확장 가능한 벡터 그래픽을 인라인으로 삽입하고, 기본 도형을 사용하며, viewBox를 제어하고, CSS로 SVG에 애니메이션을 적용해 보세요.

iframe과 삽입 콘텐츠

B14개 레슨PRO

iframe으로 외부 콘텐츠를 삽입하고, 보안을 위한 샌드박싱을 이해하며, 성능을 위해 지연 로딩을 사용해 보세요.

HTML 웹 저장소

B14개 레슨PRO

localStorage와 sessionStorage로 클라이언트 측 데이터를 저장하고, 저장소 이벤트를 수신하며, 보안 지침을 따릅니다.

드래그 앤 드롭 API

B14개 레슨PRO

HTML5 드래그 앤 드롭 API와 dataTransfer 객체로 드래그 앤 드롭 상호작용을 구현해 보세요.

SEO와 소셜 메타데이터

B14개 레슨PRO

OpenGraph, Twitter Cards, JSON-LD와 hreflang으로 검색 엔진 최적화와 소셜 공유를 위한 페이지를 만들어 보세요.

HTML 이메일 템플릿

B14개 레슨PRO

표 기반 레이아웃, 인라인 스타일과 여러 이메일 클라이언트에서 작동하는 이미지 기법으로 이메일에 안전한 HTML을 만들어 보세요.

고급 ARIA 패턴

B24개 레슨PRO

토글 패턴, 탭 인터페이스와 라이브 영역을 구현하고, 실제 스크린 리더로 테스트해 보세요.

HTML 성능

B24개 레슨PRO

async 및 defer 스크립트, 프리로드 힌트, 지연 로딩 이미지와 리소스 힌트로 페이지 로딩 속도를 높여 보세요.

웹 컴포넌트 사용자 지정 요소

B24개 레슨PRO

사용자 지정 요소 API, 수명 주기 콜백과 관찰 속성으로 재사용 가능한 사용자 지정 HTML 요소를 정의해 보세요.

Shadow DOM

B24개 레슨PRO

Shadow DOM 안에 마크업과 스타일을 캡슐화하고, 슬롯으로 콘텐츠를 배포하며, part로 스타일 지정 API를 외부에 제공해 보세요.

HTML 모듈과 가져오기 맵

B24개 레슨PRO

ES 모듈 스크립트, 기본 지정자를 위한 가져오기 맵, 동적 가져오기와 모듈 페더레이션 개념을 사용해 보세요.

점진적 향상

B24개 레슨PRO

점진적 향상 방식으로 개발해 보세요. 탄탄한 HTML에서 시작하고 CSS와 JavaScript를 단계적으로 추가하며, 기능을 올바르게 감지합니다.

국제화

B24개 레슨PRO

lang, dir, bdi, bdo, charset을 사용하고 오른쪽에서 왼쪽으로 흐르는 텍스트를 지원하여 전 세계 사용자를 위한 HTML을 준비합니다.

HTML 보안

B24개 레슨PRO

CSP, 샌드박싱, SRI 및 안전한 HTML 처리 방식으로 XSS, 클릭재킹, 인젝션으로부터 페이지를 보호합니다.

HTML Forms 고급 API

B24개 레슨PRO

FormData, Constraint Validation API, 사용자 지정 유효성 메시지 및 양식 상태 관리를 활용합니다.

HTML History 및 Navigation API

B24개 레슨PRO

pushState, popstate 이벤트 및 최신 Navigation API를 사용하여 SPA 라우팅을 위한 브라우저 기록을 관리합니다.

Intersection Observer

B24개 레슨PRO

IntersectionObserver를 사용하여 지연 로딩, 무한 스크롤 및 스크롤 연동 애니메이션 트리거를 구현합니다.

PWA를 위한 HTML

B24개 레슨PRO

웹 앱 매니페스트, 서비스 워커 등록 및 오프라인 대체 페이지로 프로그레시브 웹 앱을 구성합니다.

HTML 검증 및 테스트

B24개 레슨PRO

W3C Validator로 마크업을 검증하고, Lighthouse로 HTML을 감사하며, pa11y와 axe로 접근성을 테스트합니다.

HTML의 미래

B24개 레슨PRO

Declarative Shadow DOM, Popover API, selectlist 및 command 속성과 같은 최신 HTML 기능을 미리 살펴봅니다.

대규모 환경의 HTML

C14개 레슨PRO

컴포넌트 추출, 서버 측 템플릿, 디자인 시스템 및 스타일 가이드 문서로 대규모 프로젝트의 HTML을 관리합니다.

자주 묻는 질문

HTML Academy 강의는 무료인가요?

네, HTML Academy 강의를 무료로 시작하고 인터랙티브 레슨을 모두 무료로 완료할 수 있습니다. 선택적 PRO 구독을 통해 고급 AI 도구와 공유 가능한 수료증을 잠금 해제할 수 있습니다.

HTML을(를) 배우기 위해 사전 경험이 필요한가요?

아니요. 강의는 기초부터 시작하여 점차 더 심화된 주제로 나아가므로 HTML 경험이 없어도 시작할 수 있습니다.

CoddyKit에서 HTML은(는) 어떻게 배우나요?

직접 해보면서 배웁니다. 짧은 인터랙티브 레슨은 명확한 설명과 실시간으로 실행되는 실습 코딩 연습을 함께 제공하며, 24시간 AI 튜터가 막힐 때마다 맞춤형 도움을 줍니다.

HTML Academy을(를) 완료하면 수료증을 받나요?

네, PRO 학습자는 시험을 응시하고 HTML Academy 강의의 검증 코드가 포함된 공유 가능한 수료증을 취득할 수 있습니다.

휴대폰에서 HTML을(를) 배울 수 있나요?

네, CoddyKit은 웹과 iOS, Android 네이티브 앱으로 이용 가능하므로 어느 기기에서나 HTML을(를) 배우고 진행 상황이 모든 기기에서 동기화됩니다.

HTML Academy을(를) 지금 시작하기

AI 기반 강의로 프로그래밍을 배우는 수천 명의 학습자들과 함께하세요.

무료로 시작하기 →모든 강의 보기