Inflearn brand logo image
Inflearn brand logo image
채널톡 아이콘
개발 · 프로그래밍

/

웹 개발

핵심만 골라배우는 HTML5

프론트엔드 입문자들은 필수적으로 익혀야하는 HTML5 기초부터 시작해서 고급에 이르기까지 HTML5를 샅샅이 파헤쳐봅니다!

(5.0) 수강평 2개

수강생 23명

HTML/CSS

입문자를 위해 준비한
[웹 개발, HTML/CSS] 강의입니다.

  • 개발 환경 구성하기(with Visual Studio Code)

    03:42

  • 비주얼 스튜디오 코드 초기 환경 설정

    16:20

  • HTML과 CSS란?

    02:51

  • 태그

    03:59

  • 기본구조

    06:08

  • 속성

    02:17

이런 걸 배울 수 있어요

  • HTML4 레거시 문법을 배워요

  • HTML5 최신 문법을 배워요

  • HTML5 기본 구조 이해하기

  • HTML5 시맨틱 태그 사용

  • 다양한 폼 요소 사용법 (<input>, <select>, <textarea>)

  • HTML5의 멀티미디어 요소 (오디오, 비디오)

  • SEO를 고려한 HTML 작성

  • 실제 HTML5 기반 프로젝트 실습

비전공자도 이해하기 쉬운 HTML5!!
🛩 수코딩의 프런트엔드 로드맵 시리즈 1단계! 🛩

HTML 입문 분야 베스트셀러

수코딩 온라인 강의가 책으로도 출간되었어요!

2022 『코딩 자율학습 HTML+CSS+자바스크립트』 출간! 🎉

수코딩 온라인 강의가 책으로 출시되었어요.
출시 이후 한 번도 1위 자리에서 내려온 적이 없을 정도로 HTML/CSS 입문 분야 베스트 셀러입니다. 😎
도서와 함께 보면 시너지가 몇 배로 올라갑니다.

구매하기

cover_hcj__앞면_테두리

궁금해요

무엇을 배우나요?

HTML5에서는 사용할 수 있는 태그가 150개 이상이나 됩니다. 정말 많죠?
하지만 이 모든 태그를 전부 배우고, 각각의 의미를 모두 암기하는 것은 쉽지 않습니다.

이 강의에서는 실무에서 자주 사용하는 태그만 엄선하여 학습합니다.
실제 업무에서 활용 빈도가 낮은 태그는 과감히 제외하고,
핵심적인 태그들만 집중적으로 학습할 수 있도록 구성했습니다.

이를 통해 초보자도 보다 쉽고 효율적으로 HTML을 배울 수 있습니다.

완전 초보자도 괜찮아요,

기초부터 차근차근 모두 알려드릴게요.

HTML5는 프런트엔드에서 배우는 언어 중 가장 쉽지만,
프런트엔드의 시작이자 끝이라고 할 만큼 중요한 언어입니다.

아무것도 모르는 비전공자라도 걱정하지 마세요.
기초를 탄탄하게 쌓을 수 있도록 꼼꼼하고 친절하게 설명해 드립니다.

수코딩 강의만의
특별한 점

완전 초보도 쉽게 이해할 수 있는 커리큘럼

  • 비전공자도 이해할 수 있도록 기초 개념부터 차근차근 설명합니다.

  • 실습과 이론을 적절히 배합해 학습 효과를 극대화했습니다.

실무에 바로 적용 가능한 태그 중심 학습

  • 실무에서 자주 사용하는 핵심 태그만 엄선하여 효율적으로 학습할 수 있습니다.

  • 불필요한 이론은 최소화하고, 실제 활용에 집중합니다.

직관적인 예제와 실습 중심 강의

  • 추상적인 설명이 아닌, 직접 코딩하면서 배우는 실습 중심 강의입니다.

  • 즉시 결과를 확인하며, 빠르게 실력을 쌓을 수 있습니다.

실무 팁과 개발자 노하우 아낌없이 공개

  • 교과서에 없는 현업 개발자만의 실전 팁과 업무 효율을 높이는 방법까지 알려드립니다.

  • HTML5뿐만 아니라, 프런트엔드 개발자로 성장하기 위한 방향성도 제시합니다.

수강생 맞춤 피드백과 꼼꼼한 Q&A 지원

  • 수강생의 질문에 대해 빠르고 친절한 피드백을 제공합니다.

  • 자주 하는 실수나 헷갈리는 부분을 짚어주며, 개개인의 학습 효과를 극대화합니다.

잠시만요!

강의에도 나와 맞는 '결'이 있다는 거 아시나요?

누구에게나 인정받는 대작 게임이 나에게는 재미없을 수 있는 것처럼,
강의도 모두에게 똑같이 맞는 건 아닙니다.

아무리 칭찬이 자자한 강의라도 나와 맞지 않을 수 있고,
반대로 누군가에겐 평범한 강의가 나에겐 최고의 강의가 될 수 있죠.

그래서 제 모든 강의는 최소 10% 이상 무료로 공개되어 있습니다.
직접 들어보고, 저와 스타일의 ‘결’이 맞는지 확인해 보세요!

만약 저와 결이 잘 맞는다면,
프런트엔드 개발자로 가는 가장 빠른 지름길을 안내해 드리겠습니다.
믿고 따라오세요! 🚀

이 강의에서 만들어보는
다양한 미니 프로젝트

✅ 이미지 링크

마크업으로 활용할 수 있는 이미지 링크를 만들어봅니다.

✅ 기본부터 착실히

간단한 카드 형태의 UI부터 시작하여 올바른 마크업 방법을 배웁니다.

✅ 위키백과 목차

목록 태그를 배우면 이렇게 복잡한 위키백과 목차도 만들 수 있습니다.

✅ 로그인

다양한 폼 관련 요소가 포함된 UI를 마크업 하는 방법을 배워봅니다.

✅ 요금표

테이블 코딩을 올바르게 하는 방법도 배워봅니다.

✅ Credeit Card

복잡한 신용카드 UI를 마크업하면서 올바르게 HTMl 태그와 ARIA를 적용하는 방법을 배워봅니다.

자주 묻는 질문

Q. 진짜 아무것도 모르는 초보자입니다. 괜찮을까요?
A. 네. 정말 괜찮습니다. 아무것도 모르는 분들이 학습할 수 있게 구성한 맞춤 강좌입니다.

Q. 책을 구매했어요. 온라인 강의도 구매할 필요가 있을까요?
A. 책을 구매하셨다면 더욱 더 구매하시는 걸 권장드립니다. 책에서는 다루지 않는 내용도 많이 포함하고 있습니다.

Q. HTML5를 공부해 본 적이 있어요. 그래도 들을만 할까요?

A. 본 강의는 HTML5만 다루기 때문에, 태그에 대해서 어느정도 알고 계시다면 안들으셔도 됩니다. 하지만 기초를 복습하는 마음으로 다시 들어보시는 걸 권장드려요!

수강 전 참고 사항

실습 환경

  • 운영 체제 및 버전(OS): Windows, macOS

  • 사용 도구: 비주얼 스튜디어 코드(Visual Studio Code), 크롬(Chrome)

  • PC 사양: 웹 서핑이 가능한 수준의 최저 사양도 가능

학습 자료

  • 실습 진행을 위한 강의별 학습 자료 제공


선수 지식 및 유의사항

  • 완전 비전공자, 초보자도 수강 가능

  • 선수 지식 필요 없음

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • HTML을 한 번도 공부한 적이 없는 초보자 & 입문자

  • HTML을 알긴 하지만, 정확하게 안다고 자신할 수 없는 경험자

  • 시맨틱 태그를 사용하지 않고 div로만 마크업하는 실무자

  • 복잡한 설명 없이 단순하고 쉽게 배우고 싶은 사람

안녕하세요
수코딩입니다.

3,998

명

수강생

163

개

수강평

54

개

답변

4.9

점

강의 평점

6

개

강의

수코딩은 온라인과 오프라인을 병행하면서
코딩을 가르치는 활동을 하고 있습니다.

다년간의 오프라인 강의 경험을 바탕으로,
더 많은 사람들이 코딩을 쉽고 재미있게 배울 수 있도록
매일 고민하고, 끊임없이 노력하고 있습니다.

현재까지 다음과 같은 3권의 책을 출판하며
프런트엔드 강의 분야를 선도하고 있습니다:

또한, 유튜브 채널을 통해 다양한 무료 강의도 제공하고 있습니다.
👇 지금 바로 방문해 보세요
[유튜브 채널 링크]

더보기

커리큘럼

전체

68개 ∙ (4시간 11분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

전체

2개

5.0

2개의 수강평