인기여정
HTML 배우기
HTML을 처음부터 배우는 무료 온라인 강의입니다. 실습 과제, 실제 프로젝트, AI 힌트, 수료증과 함께 문서 구조, 시맨틱 태그, 링크, 폼, 이미지, 기본 접근성를 익힙니다.
249,002+ 명의 codders가 등록함
이 여정에 포함된 내용
AI 코딩 도우미
실습 중심의 대화형 강의
모든 레슨에 음성 나레이션 제공
지식을 확인하는 퀴즈
무료 수료증
커리큘럼
5 섹션241 개 강의212 챌린지1,203 퀴즈 문제01섹션 1
Fundamentals
Learn the core structure and syntax to create web pages from scratch학습 시작HTML 기초
5 개 강의531- 01HTML이란 무엇인가요?챌린지
- 02HTML의 기본 구조챌린지퀴즈오디오
- 03태그와 요소챌린지퀴즈오디오
- 04중첩과 닫는 태그챌린지퀴즈오디오
- 05HTML의 주석챌린지퀴즈오디오
텍스트와 서식
6 개 강의1137- 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 개 강의931- 01디비전챌린지마스터리퀴즈오디오
- 02인라인 스팬챌린지마스터리퀴즈오디오
- 03시맨틱 태그챌린지마스터리퀴즈오디오
- 04섹션과 아티클챌린지마스터리퀴즈오디오
- 05정리 - 레이아웃챌린지
개인 프로필 페이지
프로젝트5 개 강의1- 01프로젝트 개요챌린지
- 02헤더 섹션프로젝트
- 03프로필 사진프로젝트
- 04자기소개 섹션프로젝트
- 05소셜 링크프로젝트
폼과 입력 요소 파트 1
6 개 강의937- 01폼의 기초퀴즈오디오
- 02텍스트 입력 요소챌린지마스터리퀴즈오디오
- 03Input 속성챌린지마스터리퀴즈오디오
- 04비밀번호 필드챌린지마스터리퀴즈오디오
- 05Input을 위한 Label챌린지마스터리퀴즈오디오
- 06요약 - 기본 폼챌린지
폼과 입력 요소 파트 2
7 개 강의1239- 01라디오 버튼챌린지마스터리퀴즈오디오
- 02체크박스챌린지마스터리퀴즈오디오
- 03드롭다운챌린지마스터리퀴즈오디오
- 04버튼챌린지마스터리퀴즈오디오
- 05폼 내부의 버튼챌린지마스터리퀴즈오디오
- 06요약 - 폼 #1챌린지
- 07요약 - 폼 #2챌린지
테이블
4 개 강의725- 01테이블 기초챌린지마스터리퀴즈오디오
- 02캡션 추가하기챌린지마스터리퀴즈오디오
- 03행과 열 병합하기챌린지마스터리퀴즈오디오
- 04테이블 요약챌린지
이벤트 등록 페이지
프로젝트5 개 강의1- 01프로젝트 개요챌린지
- 02헤더 섹션프로젝트
- 03이벤트 상세 섹션프로젝트
- 04등록 폼프로젝트
- 05푸터 섹션프로젝트
최종 챌린지
4 개 강의4- 01간단한 프로필 카드챌린지
- 02이벤트 초대장챌린지
- 03간단한 기사 페이지챌린지
- 04좋아하는 도서 목록챌린지
02섹션 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플로팅 알림챌린지
03섹션 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 이미지챌린지
04섹션 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대 불가사의챌린지
05섹션 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 연습 문제에서 막히면 AI 힌트가 정답을 그대로 주지 않고 다음 단계의 사고 과정을 도와줍니다.
- HTML 과정을 마치면 LinkedIn이나 이력서에 추가할 수 있는 무료 수료증을 받을 수 있습니다.
HTML 학습에 대한 자주 묻는 질문
HTML은 배우기 쉬운가요?
네. 경험이 없어도 HTML을 시작할 수 있습니다. Coddy는 짧은 연습 문제로 나누어 문법을 이해하고 문서 구조, 시맨틱 태그, 링크, 폼, 이미지, 기본 접근성를 연습하며 자신감을 쌓게 합니다.
HTML을 배우는 데 얼마나 걸리나요?
HTML의 기초는 매일 연습하면 보통 1~2주 안에 익힐 수 있습니다. 실제 프로젝트를 편하게 만들려면 속도에 따라 1~3개월 정도를 잡는 것이 좋습니다.
HTML을 온라인에서 무료로 배울 수 있나요?
Coddy는 HTML 무료 온라인 강의를 제공합니다. 레슨, 코딩 과제, 퀴즈, 프로젝트가 있으며 모든 것이 브라우저에서 실행됩니다.
HTML을 빠르게 배우려면 어떻게 해야 하나요?
가장 빠른 방법은 매일 직접 작성하는 것입니다. Coddy에서는 짧은 설명 뒤 바로 실습하고 AI 힌트로 피드백을 받기 때문에 긴 영상보다 실습 시간이 많습니다.
완료하면 HTML 수료증을 받나요?
네. Coddy에서 HTML 과정을 완료하면 LinkedIn이나 이력서에 추가할 수 있는 무료 수료증을 받습니다.
HTML을 배운 뒤 무엇을 만들 수 있나요?
강의를 마치면 웹 페이지, 폼, 간단한 랜딩 페이지, CSS와 JavaScript 프로젝트의 기초를 만들 수 있습니다. 더 고급 주제로 넘어갈 수 있는 기초도 갖추게 됩니다.
