인기여정
HTML 배우기
무료로 진행되는 인터랙티브 HTML 온라인 강의입니다. 매 레슨마다 직접 HTML을 작성하면서 태그, 속성, 폼, 링크, 이미지, 그리고 실제 웹 페이지의 구조까지 다루고 — 입력하는 동안 라이브 프리뷰로 결과를 바로 확인할 수 있으며, 완주하면 무료 수료증을 받습니다.
256,507+ 명의 codders가 등록함
- 초보자 환영
AI 코딩 도우미
실습 중심의 대화형 강의
모든 레슨에 음성 나레이션 제공
지식을 확인하는 퀴즈
무료 수료증
커리큘럼
섹션 1
Fundamentals
섹션 시작하기시작펼치기접기Learn the core structure and syntax to create web pages from scratchHTML 기초
5 개 강의531- 01HTML이란 무엇인가요?챌린지
- 02HTML의 기본 구조챌린지퀴즈
- 03태그와 요소챌린지퀴즈
- 04중첩과 닫는 태그챌린지퀴즈
- 05HTML의 주석챌린지퀴즈
텍스트와 서식
6 개 강의1135- 01제목챌린지마스터리퀴즈
- 02단락챌린지마스터리퀴즈
- 03줄 바꿈챌린지마스터리퀴즈
- 04굵게 및 기울임꼴 텍스트챌린지마스터리퀴즈
- 05다시 보는 굵게 및 기울임꼴챌린지마스터리퀴즈
- 06요약 - 서식챌린지
리스트 다루기
4 개 강의721- 01순서 없는 리스트챌린지마스터리퀴즈
- 02순서 있는 리스트챌린지마스터리퀴즈
- 03중첩 리스트챌린지마스터리퀴즈
- 04리스트 요약챌린지
레시피 카드
프로젝트4 개 강의1- 01프로젝트 개요챌린지
- 02레시피 제목과 설명프로젝트
- 03재료프로젝트
- 04조리 단계프로젝트
콘텐츠 추가하기
5 개 강의837- 01HTML 속성퀴즈
- 02링크챌린지마스터리퀴즈
- 03새 페이지 링크챌린지마스터리퀴즈
- 04이미지챌린지마스터리퀴즈
- 05이미지 속성챌린지마스터리퀴즈
페이지 레이아웃
5 개 강의930- 01디비전챌린지마스터리퀴즈
- 02인라인 스팬챌린지마스터리퀴즈
- 03시맨틱 태그챌린지마스터리퀴즈
- 04섹션과 아티클챌린지마스터리퀴즈
- 05정리 - 레이아웃챌린지
개인 프로필 페이지
프로젝트5 개 강의1- 01프로젝트 개요챌린지
- 02헤더 섹션프로젝트
- 03프로필 사진프로젝트
- 04자기소개 섹션프로젝트
- 05소셜 링크프로젝트
폼과 입력 요소 파트 1
6 개 강의936- 01폼의 기초퀴즈
- 02텍스트 입력 요소챌린지마스터리퀴즈
- 03Input 속성챌린지마스터리퀴즈
- 04비밀번호 필드챌린지마스터리퀴즈
- 05Input을 위한 Label챌린지마스터리퀴즈
- 06요약 - 기본 폼챌린지
폼과 입력 요소 파트 2
7 개 강의1239- 01라디오 버튼챌린지마스터리퀴즈
- 02체크박스챌린지마스터리퀴즈
- 03드롭다운챌린지마스터리퀴즈
- 04버튼챌린지마스터리퀴즈
- 05폼 내부의 버튼챌린지마스터리퀴즈
- 06요약 - 폼 #1챌린지
- 07요약 - 폼 #2챌린지
테이블
4 개 강의723- 01테이블 기초챌린지마스터리퀴즈
- 02캡션 추가하기챌린지마스터리퀴즈
- 03행과 열 병합하기챌린지마스터리퀴즈
- 04테이블 요약챌린지
이벤트 등록 페이지
프로젝트5 개 강의1- 01프로젝트 개요챌린지
- 02헤더 섹션프로젝트
- 03이벤트 상세 섹션프로젝트
- 04등록 폼프로젝트
- 05푸터 섹션프로젝트
최종 챌린지
4 개 강의4- 01간단한 프로필 카드챌린지
- 02이벤트 초대장챌린지
- 03간단한 기사 페이지챌린지
- 04좋아하는 도서 목록챌린지
섹션 2
Styling with CSS
섹션 시작하기시작펼치기접기Bring your web pages to life with colors, layouts, and styles소개
5 개 강의540- 01CSS란 무엇인가요?챌린지퀴즈
- 02CSS 구문챌린지퀴즈
- 03CSS 주석퀴즈
- 04Head 태그챌린지퀴즈
- 05Title 태그챌린지마스터리퀴즈
CSS 적용하기
4 개 강의725- 01인라인 CSS챌린지마스터리퀴즈
- 02내부 CSS챌린지마스터리퀴즈
- 03외부 CSS챌린지마스터리퀴즈
- 04기초 스타일링 챌린지챌린지
기본 선택자
7 개 강의1247- 01선택자 소개챌린지퀴즈
- 02타입 선택자챌린지마스터리퀴즈
- 03클래스 선택자챌린지마스터리퀴즈
- 04ID 선택자챌린지마스터리퀴즈
- 05그룹 선택자챌린지마스터리퀴즈
- 06전체 선택자챌린지마스터리퀴즈
- 07선택자 챌린지챌린지
텍스트 기초
8 개 강의1450- 01텍스트 색상챌린지마스터리퀴즈
- 02폰트 패밀리챌린지마스터리퀴즈
- 03폰트 크기챌린지마스터리퀴즈
- 04폰트 굵기챌린지마스터리퀴즈
- 05텍스트 정렬챌린지마스터리퀴즈
- 06텍스트 꾸미기챌린지마스터리퀴즈
- 07복습 챌린지 #1챌린지
- 08복습 챌린지 #2챌린지
색상과 배경
5 개 강의834- 01배경색챌린지마스터리퀴즈
- 02HEX 색상챌린지마스터리퀴즈
- 03RGB 색상챌린지마스터리퀴즈
- 04RGBA를 이용한 투명도챌린지퀴즈
- 05복습 챌린지 #1챌린지
카페 메뉴
프로젝트3 개 강의1- 01타이포그래피 기초챌린지
- 02텍스트 스타일링프로젝트
- 03색상과 배경프로젝트
박스 모델 파트 1
6 개 강의943- 01박스 모델이란?퀴즈
- 02패딩챌린지마스터리퀴즈
- 03마진챌린지마스터리퀴즈
- 04테두리챌린지마스터리퀴즈
- 05너비와 높이챌린지마스터리퀴즈
- 06복습 챌린지챌린지
박스 모델 파트 2
5 개 강의834- 01Box Sizing챌린지퀴즈
- 02Border Radius챌린지마스터리퀴즈
- 03Overflow챌린지마스터리퀴즈
- 04Box Shadow챌린지마스터리퀴즈
- 05복습 챌린지챌린지
Flex Box
6 개 강의943- 01Flex Box란 무엇인가요?챌린지퀴즈
- 02Flex Direction챌린지마스터리퀴즈
- 03Justify Content챌린지마스터리퀴즈
- 04Align Items챌린지마스터리퀴즈
- 05완벽한 중앙 정렬챌린지퀴즈
- 06Flex Box 챌린지챌린지
로그인 폼
프로젝트4 개 강의1- 01바디챌린지
- 02폼 컨테이너프로젝트
- 03인풋프로젝트
- 04버튼프로젝트
레이아웃 기법
7 개 강의1152- 01블록 vs 인라인 요소챌린지퀴즈
- 02포지셔닝 기초챌린지마스터리퀴즈
- 03Relative 포지셔닝챌린지마스터리퀴즈
- 04Absolute 포지셔닝챌린지마스터리퀴즈
- 05Fixed 포지셔닝챌린지마스터리퀴즈
- 06Z-Index 기초챌린지퀴즈
- 07복습 챌린지챌린지
반응형 디자인 기초
6 개 강의1052- 01반응형 디자인이란?챌린지퀴즈
- 02Viewport 메타 태그챌린지퀴즈
- 03유동형 레이아웃챌린지마스터리퀴즈
- 04Viewport 단위챌린지마스터리퀴즈
- 05Media Queries 기초챌린지마스터리퀴즈
- 06가변 이미지챌린지마스터리퀴즈
통가 웹페이지
프로젝트6 개 강의1- 01네비게이션 메뉴챌린지
- 02환영 헤더프로젝트
- 03소개 섹션프로젝트
- 04연락처 섹션프로젝트
- 05Viewport 태그프로젝트
- 06미디어 쿼리프로젝트
최종 도전 과제
4 개 강의4- 01아이템 배치하기챌린지
- 02영화 목록챌린지
- 03결혼 초대장챌린지
- 04플로팅 알림챌린지
섹션 3
CSS Mastery
섹션 시작하기시작펼치기접기Take you css skills to the next level!셀렉터 마스터 – 조합
6 개 강의539- 01소개퀴즈
- 02자손 셀렉터챌린지퀴즈
- 03자식 셀렉터챌린지퀴즈
- 04인접 형제 셀렉터챌린지퀴즈
- 05일반 형제 셀렉터챌린지퀴즈
- 06복습 챌린지챌린지
인터랙티브 가상 클래스
5 개 강의431- 01가상 클래스퀴즈
- 02호버 효과챌린지퀴즈
- 03포커스 효과챌린지퀴즈
- 04액티브 스타일챌린지퀴즈
- 05복습 챌린지챌린지
구조적 가상 클래스
5 개 강의432- 01구조적 가상 클래스퀴즈
- 02첫 번째 자식 요소 선택하기챌린지퀴즈
- 03마지막 자식 요소 선택하기챌린지퀴즈
- 04패턴의 힘: nth-child 사용하기챌린지퀴즈
- 05복습 챌린지챌린지
드롭다운 메뉴 프로젝트
4 개 강의4- 01서브메뉴 추가하기챌린지
- 02서브메뉴 표시하기챌린지
- 03스타일링 더하기챌린지
- 04Input과 버튼챌린지
시각 효과
5 개 강의536- 01그라디언트챌린지퀴즈
- 02CSS 필터챌린지퀴즈
- 03트랜스폼챌린지퀴즈
- 04트랜지션 및 호버 효과챌린지퀴즈
- 05복습 챌린지챌린지
랜딩 페이지
5 개 강의5- 01헤더 섹션 스타일링하기챌린지
- 02버튼 스타일링하기챌린지
- 03섹션 레이아웃챌린지
- 04카드 레이아웃챌린지
- 05마무리 작업하기챌린지
CSS Grid로 구축하기
4 개 강의426- 01Grid 기초챌린지퀴즈
- 02Grid-row 아이템 배치챌린지퀴즈
- 03이름이 지정된 영역챌린지퀴즈
- 04복습 챌린지챌린지
Flavor Fiesta 웹사이트
4 개 강의4- 01그리드 설정하기챌린지
- 02헤더챌린지
- 03메인 영역챌린지
- 04푸터챌린지
최종 챌린지
5 개 강의5- 01활성 메뉴 강조하기챌린지
- 02지브라 테이블 행챌린지
- 03버튼 호버 효과챌린지
- 04Grid 카드 레이아웃챌린지
- 05블러 처리된 Hero 이미지챌린지
섹션 4
Practical Frontend
섹션 시작하기시작펼치기접기Combine structure and style to design complete, responsive web pages변수
5 개 강의432- 01변수퀴즈
- 02CSS 변수 사용하기챌린지퀴즈
- 03디자인 토큰을 위한 변수챌린지퀴즈
- 04지역 변수챌린지퀴즈
- 05복습 챌린지챌린지
모바일 퍼스트 전략
6 개 강의643- 01'모바일 퍼스트'의 의미챌린지퀴즈
- 02모바일 퍼스트 타이포그래피챌린지퀴즈
- 03모바일 퍼스트 내비게이션챌린지퀴즈
- 04모바일 퍼스트 이미지챌린지퀴즈
- 05모바일 퍼스트 폼챌린지퀴즈
- 06복습 챌린지챌린지
테마 설정 및 시각적 스타일
5 개 강의535- 01CSS 테마 설정챌린지퀴즈
- 02다크/라이트 모드 기초챌린지퀴즈
- 03강조 색상 및 하이라이트챌린지퀴즈
- 04타이포그래피 테마 설정챌린지퀴즈
- 05복습 챌린지챌린지
익스트림 스포츠
3 개 강의3- 01변수챌린지
- 02모바일 퍼스트챌린지
- 03테마 설정챌린지
UI 컴포넌트
6 개 강의642- 01드롭다운 메뉴챌린지퀴즈
- 02탭챌린지퀴즈
- 03배지챌린지퀴즈
- 04툴팁챌린지퀴즈
- 05알림 배너챌린지퀴즈
- 06요약 챌린지챌린지
반응형 패턴
6 개 강의645- 01홀리 그레일 레이아웃챌린지퀴즈
- 02카드 그리드 레이아웃챌린지퀴즈
- 03사이드바 + 콘텐츠 레이아웃챌린지퀴즈
- 04스플릿 스크린 레이아웃챌린지퀴즈
- 05스티키 헤더 / 푸터챌린지퀴즈
- 06복습 챌린지챌린지
최종 챌린지
4 개 강의4- 01프로필 카드챌린지
- 02초콜릿 갤러리 그리드챌린지
- 03세계 7대 불가사의챌린지
- 04새로운 세계 7대 불가사의챌린지
섹션 5
JavaScript in Action
섹션 시작하기시작펼치기접기Explore how javascript is used with html and css상호작용/UI 컴포넌트
4 개 강의433- 01탭챌린지퀴즈
- 02아코디언 (펼치기/접기)챌린지퀴즈
- 03모달 (열기/닫기)챌린지퀴즈
- 04드롭다운챌린지퀴즈
폼과 검증
3 개 강의325- 01입력값 검증챌린지퀴즈
- 02커스텀 에러 메시지챌린지퀴즈
- 03제출 버튼챌린지퀴즈
알림 및 피드백
3 개 강의327- 01토스트 메시지챌린지퀴즈
- 02닫기 가능한 배너챌린지퀴즈
- 03로딩 인디케이터챌린지퀴즈
토스트 알림이 포함된 폼
2 개 강의2- 01토스트 메시지 표시하기챌린지
- 02토스트 메시지 숨기기챌린지
네비게이션
3 개 강의329- 01모바일 버거 메뉴 토글챌린지퀴즈
- 02접이식 사이드 네비게이션챌린지퀴즈
- 03드롭다운 메뉴챌린지퀴즈
테마 및 개인화
2 개 강의217- 01다크/라이트 테마챌린지퀴즈
- 02테마 선택 저장하기챌린지퀴즈
애니메이션 및 효과
3 개 강의327- 01CSS 트랜지션챌린지퀴즈
- 02스크롤 시 요소 애니메이션챌린지퀴즈
- 03버튼 클릭 애니메이션챌린지퀴즈
애니메이션 네비게이션
3 개 강의36- 01변수챌린지퀴즈
- 02이벤트 리스너챌린지
- 03CSS 트랜지션챌린지
최종 챌린지
4 개 강의4- 01인터랙티브 FAQ 아코디언챌린지
- 02로그인 폼챌린지
- 03반응형 네비게이션 바챌린지
- 04테마가 있는 블로그 페이지챌린지
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를 아우르는 더 탄탄한 포트폴리오로 가는 디딤돌이 됩니다.
