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

HTML 배우기

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

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

336,814+ 명의 codders가 등록함

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

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

커리큘럼

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

    기초

    섹션 시작하기시작펼치기접기    웹 페이지를 처음부터 만드는 핵심 구조와 구문을 배우세요60 개 강의75 챌린지251 문제3 프로젝트

    HTML 기초

    5 개 강의530

    텍스트와 서식

    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

    CSS로 스타일링하기전용 페이지

    섹션 시작하기시작펼치기접기    색상, 레이아웃, 스타일로 웹 페이지를 생동감 있게 만드세요76 개 강의100 챌린지418 문제3 프로젝트

    소개

    5 개 강의540

    CSS 추가

    4 개 강의725

    기본 선택자

    7 개 강의1247

    텍스트 기초

    8 개 강의1450

    색상과 배경

    5 개 강의834

    카페 메뉴

    프로젝트3 개 강의1

    박스 모델 1부

    6 개 강의943

    박스 모델 2부

    5 개 강의833

    Flex Box

    6 개 강의943

    로그인 폼

    프로젝트4 개 강의1

    레이아웃 기법

    7 개 강의1151

    반응형 디자인 기초

    6 개 강의1052

    Tonga 웹페이지

    프로젝트6 개 강의1

    최종 과제

    4 개 강의4
  3. 섹션 3

    CSS 마스터전용 페이지

    섹션 시작하기시작펼치기접기    CSS 실력을 다음 단계로 끌어올리세요!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

    실전 프론트엔드

    섹션 시작하기시작펼치기접기    구조와 스타일을 결합하여 완전한 반응형 웹 페이지를 디자인하세요35 개 강의34 챌린지197 문제

    변수

    5 개 강의432

    모바일 퍼스트 전략

    6 개 강의643

    테마 설정 및 시각적 스타일

    5 개 강의535

    익스트림 스포츠

    3 개 강의3

    UI 컴포넌트

    6 개 강의642

    반응형 패턴

    6 개 강의645

    최종 챌린지

    4 개 강의4
  5. 섹션 5

    JavaScript 실전

    섹션 시작하기시작펼치기접기    HTML과 CSS와 함께 JavaScript이 어떻게 사용되는지 탐구하세요27 개 강의27 챌린지163 문제

    상호작용/UI 컴포넌트

    4 개 강의433

    폼 및 유효성 검사

    3 개 강의324

    알림 및 피드백

    3 개 강의327

    Toast 알림이 있는 폼

    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

JavaScript DOM 메서드

이 강좌에서는 가장 자주 사용되는 JavaScript DOM 메서드와 그 활용 방법을 배웁니다!

  • 13

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

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

  • 10
  • 3

HTML/CSS 챌린지 - 팩 I

이 코스는 여러분의 HTML과 CSS 지식을 재미있고 효과적인 방식으로 시험해 볼 수 있는 기회를 제공합니다!

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

해보면서 배우기

실제 코드를 작성하고, 데이터베이스를 쿼리하고, 웹사이트를 구축하고, AI 프롬프트를 마스터하세요. 인터랙티브 레슨으로 현대 개발자에게 필요한 모든 기술을 다룹니다.

playground.js
코드 편집기
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3    return greeting + " " + name
4}
5
bottombar Collapse icon
테스트 #1test Case Success icon
테스트 #2test Case Success icon
테스트 #3test Case Failure icon
입력
"Alex"
출력
"Hello, Coddy! Alex"

연속 기록을 쌓아보세요

꾸준히 하고 성장하는 모습을 지켜보세요! 매일 코딩 습관을 추적하고, 동결 기능으로 연속 기록을 보호하고, 매일 참여해서 보상을 받으세요.

12 일 연속

내일도 돌아와서 연속 기록을 유지하세요!

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

더블 오어 낫싱

7일 중 5일차

fire Freeze icon

연속 기록 동결

2 left

어디서나 코딩하세요

코딩 여정을 함께 하세요! 설정도, 다운로드도 필요 없이 바로 열어서 코딩을 시작하세요. iOS, Android, 웹에서 4.9점 평점으로 이용 가능합니다.

Python
7스트릭
250점수
5에너지
변수
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
계속하기
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
여정
목표
리더보드
프로필
4.9
별별별별별
평점

당신은 혼자가 아닙니다

글로벌 리더보드에서 경쟁하고, 친구를 초대해서 보상을 받고, 서로의 성공을 축하하세요. 코딩은 친구와 함께하면 더 좋아요!

챌린저 리그
챌린저 리그상위 7명 승급
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 icon승급 구역leaderboard Arrow Up icon

모든 방식으로 학습

읽고, 듣고, 스스로 확인하고, AI에게 묻고, 이미 배운 내용을 찾아보세요. 모든 수업이 당신에게 맞춰집니다.

변수 입문
오디오

변수는 나중에 프로그램에서 참조할 값을 저장하는, 이름이 있는 컨테이너입니다.

Python에서는 이름, 등호, 저장할 값을 차례대로 써서 만듭니다.

값은 시간이 지나며 바뀔 수 있습니다. 재할당하면 그 이름이 새로운 값을 가리킵니다.

1xSarah

수료증을 받으세요

완료한 모든 코스에 대해 인증서를 받으세요. LinkedIn 프로필과 이력서에 추가하여 고용주에게 코딩 전문성을 보여주세요.

Coddy수료증
이 인증서는홍길동성공적으로 완료했음을 증명합니다
python iconPython 기초
인증됨
날짜2026년 1월
LinkedInLinkedIn에 추가

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 프로그래밍 언어 일러스트

Coddy와 함께 HTML 배우기

시작하기