Menu
Coddy logo textTech
학습 시작하기
flag Ko icon한국어down icon
인기여정

HTML 배우기

무료로 진행되는 인터랙티브 HTML 온라인 강의입니다. 매 레슨마다 직접 HTML을 작성하면서 입력하는 동안 라이브 프리뷰로 결과를 바로 확인할 수 있으며, 완주하면 무료 수료증을 받습니다.

학습 시작(무료)
커리큘럼 보기HTML 플레이그라운드

281,604+ 명의 codders가 등록함

241 개 강의212 챌린지1,195 퀴즈 문제

  • 초보자 환영
  • sparkles iconAI 코딩 도우미
  • hint icon실습 중심의 대화형 강의
  • volume On icon모든 레슨에 음성 나레이션 제공
  • quiz icon지식을 확인하는 퀴즈
  • certificate icon무료 수료증

커리큘럼

5 섹션6 프로젝트241 개 강의212 챌린지1,195 퀴즈 문제
  1. 섹션 1

    Fundamentals

    섹션 시작하기시작펼치기접기    Learn the core structure and syntax to create web pages from scratch60 개 강의75 챌린지252 문제3 프로젝트

    HTML 기초

    5 개 강의531

    텍스트와 서식

    6 개 강의1135

    리스트 다루기

    4 개 강의721

    레시피 카드

    프로젝트4 개 강의1

    콘텐츠 추가하기

    5 개 강의837

    페이지 레이아웃

    5 개 강의930

    개인 프로필 페이지

    프로젝트5 개 강의1

    폼과 입력 요소 파트 1

    6 개 강의936

    폼과 입력 요소 파트 2

    7 개 강의1239

    테이블

    4 개 강의723

    이벤트 등록 페이지

    프로젝트5 개 강의1

    최종 챌린지

    4 개 강의4
  2. 섹션 2

    Styling with CSS전용 페이지

    섹션 시작하기시작펼치기접기    Bring your web pages to life with colors, layouts, and styles76 개 강의100 챌린지419 문제3 프로젝트

    소개

    5 개 강의540

    CSS 적용하기

    4 개 강의725

    기본 선택자

    7 개 강의1247

    텍스트 기초

    8 개 강의1450

    색상과 배경

    5 개 강의834

    카페 메뉴

    프로젝트3 개 강의1

    박스 모델 파트 1

    6 개 강의943

    박스 모델 파트 2

    5 개 강의834

    Flex Box

    6 개 강의943

    로그인 폼

    프로젝트4 개 강의1

    레이아웃 기법

    7 개 강의1151

    반응형 디자인 기초

    6 개 강의1052

    통가 웹페이지

    프로젝트6 개 강의1

    최종 도전 과제

    4 개 강의4
  3. 섹션 3

    CSS Mastery전용 페이지

    섹션 시작하기시작펼치기접기    Take you css skills to the next level!43 개 강의40 챌린지164 문제

    셀렉터 마스터 – 조합

    6 개 강의539

    인터랙티브 가상 클래스

    5 개 강의431

    구조적 가상 클래스

    5 개 강의432

    드롭다운 메뉴 프로젝트

    4 개 강의4

    시각 효과

    5 개 강의536

    랜딩 페이지

    5 개 강의5

    CSS Grid로 구축하기

    4 개 강의426

    Flavor Fiesta 웹사이트

    4 개 강의4

    최종 챌린지

    5 개 강의5
  4. 섹션 4

    Practical Frontend

    섹션 시작하기시작펼치기접기    Combine structure and style to design complete, responsive web pages35 개 강의34 챌린지197 문제

    변수

    5 개 강의432

    모바일 퍼스트 전략

    6 개 강의643

    테마 설정 및 시각적 스타일

    5 개 강의535

    익스트림 스포츠

    3 개 강의3

    UI 컴포넌트

    6 개 강의642

    반응형 패턴

    6 개 강의645

    최종 챌린지

    4 개 강의4
  5. 섹션 5

    JavaScript in Action

    섹션 시작하기시작펼치기접기    Explore how javascript is used with html and css27 개 강의27 챌린지163 문제

    상호작용/UI 컴포넌트

    4 개 강의433

    폼과 검증

    3 개 강의324

    알림 및 피드백

    3 개 강의327

    토스트 알림이 포함된 폼

    2 개 강의2

    네비게이션

    3 개 강의329

    테마 및 개인화

    2 개 강의217

    애니메이션 및 효과

    3 개 강의327

    애니메이션 네비게이션

    3 개 강의36

    최종 챌린지

    4 개 강의4

HTML 코스

브라우저에서 무료로 시작하는 실습형 HTML 코스.

일식 애니메이션 | HTML/CSS 프로젝트

인기

이 코스에서는 멋진 "일식" 애니메이션을 직접 만들어 봅니다. 애니메이션을 활용해 매력적이고 기능적인 사용자 인터페이스를 구현하는 방법을 배울 수 있습니다.

  • 10
  • 2

인스타그램 페이지 클론 | 프론트엔드 프로젝트

인기

이 강의에서는 표준적이고 간단한 HTML & CSS 접근 방식을 연습하며 인스타그램 페이지 클론 프로젝트를 제작합니다.

  • 16
  • 5

유튜브 동영상 플레이어 - HTML 프로젝트

이 프로젝트에서는 HTML을 사용하여 유튜브 동영상 플레이어를 만들고, 그 과정에서 다양한 속성들을 살펴보게 됩니다.

  • 7
  • 1

스톱워치 - HTML/CSS/JS 프로젝트

이 프로젝트에서는 HTML, CSS, JavaScript를 사용하여 기본적인 스톱워치를 만들어 봅니다.

  • 10
  • 3

하단 네비게이션 바 - HTML/CSS 프로젝트

이 코스에서는 HTML을 사용하여 간단한 하단 네비게이션 바를 만들고 CSS로 스타일을 입히는 방법을 배웁니다. 또한 CSS의 (:hover) 선택자를 사용하여 간단한 애니메이션을 추가하는 방법도 익힐 수 있습니다.

  • 12
  • 2

DOM 프로젝트 - 계산기

이 코스에서는 HTML, CSS, JS를 사용하여 상호작용하는 간단한 계산기를 만들어 봅니다.

  • 14
  • 3
26개 HTML 코스 모두 보기 →
제공되는 것
코딩을 배우기 위해 사용할 모든 것

Learn by Doing

Write real code, query databases, build websites, and master AI prompts. Our interactive lessons cover every skill modern developers need.

playground.js
Code Editor
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3    return greeting + " " + name
4}
5
bottombar Collapse icon
Test #1test Case Success icon
Test #2test Case Success icon
Test #3test Case Failure icon
Input
"Alex"
Output
"Hello, Coddy! Alex"

Build Your Coding Streak

Stay consistent and watch your progress grow! Track your daily coding habit, protect your streak with freeze days, and earn rewards for showing up every day.

12 days streak

Return tomorrow to keep your streak!

fire Filled icon
left icon

January 2026

right icon

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

21

22

23

24

25

26

27

28

29

30

product Double Or Nothing icon

Double or Nothing

Day 5 of 7

fire Freeze icon

Streak Freeze

2 left

Code Anywhere, Anytime

Take your coding journey on the go! No setup, no downloads - just open and start coding. Available on iOS, Android and Web with 4.9 star ratings.

Python
7Streak
250Score
5Energy
Variables
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Right Done icon
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Left Done icon
journey Hex Active Base iconjourney Hex Active Shadow iconjourney Hex Active Top iconjourney Lesson Theory Challenge icon
CONTINUE
journey Path Right icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson Theory Challenge icon
journey Path Left icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson All icon
Journey
Goals
Leaderboard
Profile
4.9
StarStarStarStarStar
Rating

You're Not Alone in This

Compete on global leaderboards, invite friends to earn rewards, and celebrate each other's wins. Coding is better with friends!

Challenger League
Challenger LeagueTop 7 advance
leaderboard First icon1
avatar 1 icon
fire Filled icon
Alex7+ Days
2840
leaderboard Second icon2
avatar 2 icon
fire Filled icon
Jordan7+ Days
2650
leaderboard Third icon3
avatar 3 icon
fire Filled icon
Sam7+ Days
2420
4
avatar 4 icon
Casey
2180
5
avatar placeholder icon
fire Filled icon
Morgan7+ Days
1950
leaderboard Arrow Up iconPromotion zoneleaderboard Arrow Up icon

Every way to learn

Read, listen, test yourself, ask the AI, or look up anything you've already covered. Every lesson meets you where you are.

Intro to Variables
Audio

A variable is a named container that stores a value you can reference later in your program.

In Python, you create one by writing the name, an equals sign, then the value you want to store.

The value can change over time - reassigning the name simply points it to a new value.

1xSarah

Prove Your Skills

Earn certificates for every course you complete. Add them to your LinkedIn profile and resume to showcase your coding expertise to employers.

CoddyCertificate of Completion
This certifies thatJohn Doehas successfully completed
PythonPython Fundamentals
Verified
DateJan 2026
LinkedInAdd to LinkedIn

Coddy에서 HTML을 배우는 이유

  • 브라우저에서 HTML을 직접 작성하고 렌더링된 페이지를 바로 옆에서 확인하세요. 에디터 설치도, 환경 설정도 필요 없습니다. HTML 코드를 수정할 때마다 결과가 바로 반영되니 피드백이 빠릅니다.
  • 모던하고 시맨틱한 HTML: 제목, 목록, 링크, 이미지, 표, 폼, 그리고 <header>, <nav>, <main>, <section>, <footer> 같은 시맨틱 태그까지. 실제 웹사이트를 만들 때 그대로 쓰는 HTML입니다.
  • AI 힌트가 닫히지 않은 태그, 잘못된 속성 문법, 접근성 실수 같은 HTML 오류를 잡아주되 정답을 바로 알려주지 않아서, HTML 코딩 습관이 자연스럽게 몸에 뱁니다.
  • 완료하면 무료 HTML 수료증을 드립니다. 웹 개발의 첫걸음으로 손색없으며, CSS와 JavaScript 과정과 자연스럽게 이어집니다.

HTML 학습에 대한 자주 묻는 질문

HTML은 배우기 쉬운가요?

HTML은 IT 분야에서 가장 배우기 쉬운 것 중 하나입니다. 프로그래밍 언어가 아니라 마크업 언어라서, 로직을 작성하는 게 아니라 콘텐츠 조각(제목, 문단, 링크, 이미지)에 라벨을 붙이는 일이죠. 대부분의 입문자는 첫 한 시간 안에 실제로 동작하는 웹 페이지를 만들어 냅니다.

HTML을 배우는 데 얼마나 걸리나요?

HTML의 기초는 매일 연습하면 보통 1~2주 안에 익힐 수 있습니다. 실제 프로젝트를 편하게 만들려면 속도에 따라 1~3개월 정도를 잡는 것이 좋습니다.

CSS와 JavaScript보다 HTML을 먼저 배워야 하나요?

네. HTML은 페이지의 구조를 정의하고, CSS는 모양을 결정하며, JavaScript는 상호작용을 더합니다. HTML을 먼저 배우면 나중에 스타일을 입히고 움직임을 줄 구체적인 대상이 생기죠. HTML 강의는 의도적으로 짧게 구성되어 있어, CSS와 JS로 빠르게 넘어갈 수 있습니다.

HTML은 프로그래밍 언어인가요?

엄밀히 말하면 아닙니다. HTML은 웹 콘텐츠의 구조를 기술하는 마크업 언어입니다. 자체적으로는 변수도, 조건문도, 반복문도 없습니다. 웹 페이지의 실제 프로그래밍은 JavaScript에서 이뤄지며, 이는 별도의 코스에서 다룹니다.

HTML을 온라인으로 무료로 배울 수 있나요?

네. 인터랙티브 HTML 강의는 무료입니다 - 레슨, 코딩 연습, 실시간 HTML 미리보기, 그리고 수료증까지 포함되어 있습니다. 모든 것이 브라우저에서 실행되므로 시작하기 위해 에디터나 도구를 설치할 필요가 없습니다.

HTML 코스를 마치면 수료증을 받을 수 있나요?

네. HTML 코스를 마치면 무료 수료증을 받을 수 있어요. 이력서에 추가하거나 LinkedIn에 공유할 수 있는 검증 가능한 증빙으로, 보통 HTML, CSS, JavaScript를 아우르는 더 탄탄한 포트폴리오로 가는 디딤돌이 됩니다.
Coddy programming languages illustration

Coddy와 함께 HTML 배우기

시작하기