입문자를 위한 HTML 기초 강의

Name: 입문자를 위한 HTML 기초 강의
Rating: 5 (453 reviews)

웹사이트 만드는 데 가장 기본이 되는 HTML의 주요 개념과 기본 문법을 소개합니다. 아무런 관련 지식을 보유하지 않은 입문자들도 소화할 수 있도록 만든 강의입니다.

(5.0) 수강평 453개

수강생 6,292명

난이도 입문

수강기한 무제한

유노코딩

HTML/CSS

먼저 경험한 수강생들의 후기

5.0

lululala

100% 수강 후 작성

아니 강의 너무 좋은데 중간 중간 야옹이가 야옹 야옹해서 우리 고양이가 우는줄 알고 몇번이나 속았어요ㅋㅋㅋㅋ 고양이 넘 귀여워요ㅠㅠ 암튼 강의 쏙쏙 들어옵니다. 감사합니다!!

5.0

minji090999

100% 수강 후 작성

코딩 전혀 모르는 상태에서 처음 들었는데 이해가 너무 쏙쏙 잘되었어요. 기회가 되신다면 기초 중급반도 수업 만들어 주셨음 좋겠습니다. 유료강의여도 들을 의향이 생기네요ㅎㅎㅎ

5.0

sun20817

100% 수강 후 작성

덕분에 많은 도움 받았습니다. 감사합니다.

수강 후 이런걸 얻을 수 있어요

HTML 용도
HTML 주요 개념
HTML 기본 문법

'HTML 어린이' 를 위한 기초 강의 📖

안녕하세요, 개발자 출신 강사 + 초보 유튜버 유노코딩입니다!
본 강의는 강의 소개와 마무리 인사를 포함, 총 18개 영상으로 구성된 입문자용 HTML 강의입니다.
HTML을 처음 접하는 입문자 분들이 부담없이 공부하실 수 있는 강의입니다.

각 수업 영상은 모두 다음과 같은 흐름으로 진행됩니다.

기초 이론 : 주요 개념들을 알기 쉽게 설명
실습 안내 : 학습한 내용을 직접 실습하며 확인
내용 정리 : 학습 내용을 정리하여 마무리

강의 내용을 미리 확인해 보세요 😀

_{기초 이론 설명}

_{학습한 내용 실습}

_{내용 정리}

강의 목표 📜

이 강의를 들으면 여러분은 이런 모습으로 변화할 수 있어요!

👉🏻 웹개발 분야에서 HTML의 역할이 무엇인지 이해할 수 있어요.
👉🏻 HTML이 일하는 방식에 대해 이해할 수 있어요.
👉🏻 HTML의 기본 문법과 작성 방법을 익혀볼 수 있어요.

이 강의만의 특징

입문자 분들이 부담감을 느끼지 않고 빠르게 공부하실 수 있도록 하기 위해, 꼭 필요한 주요 개념 위주로 내용을 구성했어요. 그래서 이 강의만으로 HTML 코드 작성에 필요한 능력은 거의 다 갖추실 수 있을 거에요. 이 강의, 믿고 수강해주세요! 😁

이런 내용을 알려드려요! 😁

HTML 기초 of 기초

HTML의 기초 정의와 개발자 도구, 코드 에디터 활용법, HTML 핵심 기초 문법 등
HTML에 대한 가장 필수적인 기본 지식을 알려드립니다.

HTML 문서 기본 구조

<!DOCTYPE html>, <head>. <body> 등 HTML의 핵심 골격에 대해 공부합니다.

HTML 태그 완전정복 - 기본

텍스트 태그, 인라인 텍스트 요소, 링크 표시, 목록 표시 등
웹 페이지 내 다양한 요소를 구현하는 방법을 알아봅니다.

HTML 태그 완전정복 - 심화

서버와 클라이언트를 활용한 데이터 전송, 웹 문서에 대한 정보를 표시하는 메타태그,
다양한 기기로 화면을 볼 수 있는 viewport 등에 대해 공부합니다.

수강 전 안내 사항을 확인하세요 🔍

다음과 같은 준비물을 챙겨주세요!

💻 컴퓨터
💻 코드 에디터 (Visual Studio Code)
💻 영타 능력 (속도가 느려도 괜찮아요)

수강 전 미리 알려드려요!

대부분의 영상에는 코드를 작성하는 장면이 등장하는데, 자칫 영상이 지루해질 수 있다고 판단해 대부분 배속 처리를 하였습니다. 따라서 코딩 실습을 따라하시는 경우 일시정지 기능을 적절히 활용해 가시면서 실습을 진행하시길 추천합니다!

이런 분들께
추천드려요

학습 대상은
누구일까요?

코딩을 처음 접하는 사람
HTML 언어에 대한 감각을 익히고 싶은 사람

안녕하세요
유노코딩입니다.

18,409

명

수강생

985

개

수강평

개

답변

5.0

점

강의 평점

개

강의

개발자 출신 십잡스 크리에이터.
프로그래밍 강사 겸 작가로 활동하고 있습니다.
유튜브 <유노코딩> 채널 운영 중입니다.

배움의 과정에서 겪는 불필요한 고통들이 사라지길 바라고, 또 그래야만 한다고 믿습니다.
경험자의 진정성과 경험을 나누면 고통은 줄어들 수 있습니다.

저의 모든 강의 콘텐츠에서 그런 마음을 느끼실 수 있도록 노력하겠습니다.
많은 분들이 코딩을 재미있게 느끼고, 단순하게 이해할 수 있도록 돕기 위해 항상 노력하고 있습니다.

감사합니다^^

커리큘럼

전체

18개 ∙ (2시간 51분)

섹션 1. 강의 소개 & HTML 소개

3개 ∙ (23분)

섹션 2. 문법 학습 & 태그의 종류

14개 ∙ (2시간 25분)

4. HTML 코드 기초 문법
12:07
5. HTML 문서 기본 구조
10:14
6. 텍스트 태그 사용 방법과 특징
10:44
7. 태그의 구분과 인라인 텍스트 요소
08:28
8. 이미지 표시하기
10:39
9. 컨테이너 그리고 전역 속성
12:44
10. 링크 만들기
12:11
11. 목록 표시하기
07:53
12. 입력 요소 만들기
13:19
13. select 그리고 textarea
11:31
14. 폼(form) Part1. 서버와 클라이언트
04:51
15. 폼(form) Part2. 폼 태그
10:39
16. 메타 태그 (meta)
11:56
17. 뷰포트 (viewport)
08:21

섹션 3. 강의 마무리

1개 ∙ (2분)

18. 수업 마무리
02:58

강의 게시일: 2021. 04. 28.

마지막 업데이트일: 2025. 05. 19.

수강평

전체

453개

5.0

453개의 수강평

lululala
수강평 4
∙
평균 평점 4.0
2023. 11. 23.
5
100% 수강 후 작성
아니 강의 너무 좋은데 중간 중간 야옹이가 야옹 야옹해서 우리 고양이가 우는줄 알고 몇번이나 속았어요ㅋㅋㅋㅋ 고양이 넘 귀여워요ㅠㅠ 암튼 강의 쏙쏙 들어옵니다. 감사합니다!!
카이
수강평 2
∙
평균 평점 5.0
2021. 12. 26.
5
100% 수강 후 작성
html 초급자로써 시작하려고 하는데, 간단하고 이해하기 좋았습니다.
h.jung0409
수강평 1
∙
평균 평점 5.0
2021. 12. 21.
5
100% 수강 후 작성
짧은 영상으로 HTML 기본 내용을 빠르게 정리할 수 있어 좋았습니다.
sun20817
수강평 2
∙
평균 평점 5.0
2022. 06. 21.
5
100% 수강 후 작성
덕분에 많은 도움 받았습니다. 감사합니다.
minji090999
수강평 1
∙
평균 평점 5.0
2022. 11. 16.
5
100% 수강 후 작성
코딩 전혀 모르는 상태에서 처음 들었는데 이해가 너무 쏙쏙 잘되었어요. 기회가 되신다면 기초 중급반도 수업 만들어 주셨음 좋겠습니다. 유료강의여도 들을 의향이 생기네요ㅎㅎㅎ

유노코딩님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

입문자를 위한 파이썬 기초 강의

유노코딩

프로그래밍 언어 파이썬의 주요 개념 및 기본 문법을 소개합니다. 아무런 관련 지식을 보유하지 않은 입문자들도 소화할 수 있도록 만든 부담없고 친절한 강의입니다.

입문

Python

입문자를 위한 파이썬 기초 강의

유노코딩

CSS 레이아웃 - flex & grid

유노코딩

CSS 레이아웃 기술의 대표 주자 flex와 grid의 개념 및 사용법을 공부할 수 있는 강의입니다.

초급

HTML/CSS, Flex

CSS 레이아웃 - flex & grid

유노코딩

입문자를 위한 반응형 웹 기초 강의

유노코딩

다양한 기기와 화면에서 서비스를 제공할 수 있는 '반응형 웹사이트'를 만들기 위해 필요한 기본적인 스킬을 확실하게 익힐 수 있는 강의입니다.

초급

반응형 웹, HTML/CSS, JavaScript

입문자를 위한 반응형 웹 기초 강의

유노코딩

초보자를 위한 Sass 기초 강의 & 자몽톡 클론코딩

유노코딩

Sass는 CSS의 확장 언어입니다. CSS의 단점을 보완해 뛰어난 생산성을 보장하며, 강력하고 간결합니다. 기초 구문을 배우고, 배운 내용을 활용한 클론코딩을 즐기면서 Sass를 배워보세요. 재미는 더하고 부담은 덜었습니다!

초급

Sass, 클론코딩, HTML/CSS

초보자를 위한 Sass 기초 강의 & 자몽톡 클론코딩

유노코딩

입문자를 위한 자바스크립트 기초 강의

유노코딩

웹 사이트를 움직이는 프로그래밍 언어, 자바스크립트의 주요 개념과 문법, 그리고 활용 방법을 소개합니다. 이제 막 HTML/CSS 걸음마를 떼신 분들도 부담 없이 소화하실 수 있는, 자바스크립트 입문 수업입니다.

입문

JavaScript

입문자를 위한 자바스크립트 기초 강의

유노코딩

입문자를 위한 CSS 기초 강의

유노코딩

웹 사이트를 예쁘게 꾸미기 위해 반드시 필요한 언어, CSS의 주요 개념과 기본 문법을 소개합니다. 이제 막 HTML로 코딩 걸음마를 떼신 분들도 부담없이 소화하실 수 있습니다.

입문

HTML/CSS, Visual Studio Code

입문자를 위한 CSS 기초 강의

유노코딩

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

입문자를 위한 CSS 기초 강의

유노코딩

입문

HTML/CSS, Visual Studio Code

입문자를 위한 CSS 기초 강의

유노코딩

입문자를 위한 반응형 웹 기초 강의

유노코딩

다양한 기기와 화면에서 서비스를 제공할 수 있는 '반응형 웹사이트'를 만들기 위해 필요한 기본적인 스킬을 확실하게 익힐 수 있는 강의입니다.

초급

반응형 웹, HTML/CSS, JavaScript

입문자를 위한 반응형 웹 기초 강의

유노코딩

퍼블리셔 취업 진짜 실전 가이드(PDF)

코딩웍스(Coding Works)

퍼블리셔 취업을 위한 진짜 가이드 전자책(PDF)으로 효율적인 퍼블리싱 학습방법, 좋은 퍼블리싱 강의 잘 가르치는 퍼블리싱 강사 고르는 안목, 신입이지만 경력자처럼 퍼블리싱하는 요령, 바람직한 코딩 습관과 원칙, 개인 포트폴리오 홈페이지 제작 방법, 디자이너 개발자와의 협업 요령, 퍼블리셔로 알아야 할 필수 사이트, 포토샵 UI 디자인 실력키우기 등 퍼블리셔 취업을 위해 반드시 알아야 하는 HTML+CSS+JQUERY 퍼블리싱 기본기를 상세하게 알려드립니다. 또한, 국비지원 퍼블리셔 과정에 대해 상세히 설명합니다.

입문

HTML/CSS

퍼블리셔 취업 진짜 실전 가이드(PDF)

코딩웍스(Coding Works)

html - SVG scroll animation 효과 - 특별한 포트폴리오를 위한 그림 15종 증정

두노피

svg를 이용하여 간단한 그림을 그리고 사이트에 적용시킵니다. 포트폴리오에 적용하면 돋보이는 페이지가 됩니다.

초급

HTML/CSS, JavaScript

html - SVG scroll animation 효과 - 특별한 포트폴리오를 위한 그림 15종 증정

두노피

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

코딩웍스(Coding Works)

웹디자인개발기능사(구 웹디자인기능사) 출제기준(2025.1.1 ~ 2027.12.31)까지 시행되는 출제기준에 정확히 맞춘 웹디자인 기능사 실기 시험 내용에 최적화 되어 있는 실기시험 전문 강의로서, HTML+CSS+JQUERY 퍼블리싱, 코딩웍스 웹디자인개발기능사 실기시험 강의는 다릅니다. 2026년 웹디자인개발기능사 모든 시험 유형(A,B,C,D,E,F 유형) 완벽 제작 수업영상이 모두 반영되어 있습니다.

입문

HTML/CSS, jQuery, 웹 디자인

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

코딩웍스(Coding Works)

면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작

코딩웍스(Coding Works)

지금까지 200여명의 오프라인 학원 학생들 신입 퍼블리셔 취업 포트폴리오 지도한 경험을 통해 코딩웍스가 심혈을 기울여 만들었습니다. 면접과 취업을 부르는 퍼블리셔 '개인 포트폴리오 홈페이지' 제작 강의는 퍼블리셔 취업을 위해 필수로 준비해야 하는 개인 포트폴리오 홈페이지를 어떻게 어디서부터 준비하는지 알려드리는 충실한 가이드입니다. 강의는 총 19시간 이상의 강의 내용이 담겨 있습니다. 개인 포트폴리오 홈페이지 제작 전 퍼블리싱 관련 필수사항, 취업과 실무에서 최고로 중요한 퍼블리싱 기본기, 취업을 위한 제이쿼리와 자바스크립트 & 코딩 미션, 개인 포트폴리오 홈페이지에 넣을 포트폴리오 결과물 제작 방법, 개인 포트폴리오 홈페이지 섹션 별 콘텐츠 레이아웃 및 상세내용, 지원할 기업 구분하기 & 퍼블리셔 실전 면접 요령 등 신입 퍼블리셔로서 알아야 할 모든 내용을 담고 있습니다.

초급

포트폴리오, HTML/CSS, jQuery

면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작

코딩웍스(Coding Works)

가볍게 실전 html (인터넷 업로드까지)

두노피

입문편에서 연습으로 만들어봤던 VD 사이트 메인페이지를 실전으로 만들어볼거에요~

초급

HTML/CSS, upload-file

가볍게 실전 html (인터넷 업로드까지)

두노피

효과적인 모바일 UX 만들기 (디자인 + 코딩)

유용한IT학습

Photoshop과 Adobe XD 프로그램을 활용해 다양한 디바이스의 웹, 앱 레이아웃을 디자인해 본 뒤 간단한 코딩 기술을 학습해 직접 구현해볼 수 있게 됩니다.

초급

HTML/CSS, jQuery, XD

효과적인 모바일 UX 만들기 (디자인 + 코딩)

유용한IT학습

퍼블리셔 개인 포트폴리오 홈페이지 제작 완벽 가이드(PDF)

코딩웍스(Coding Works)

취업을 위해 면접을 자주 봐야 합니다. 면접을 자주 보기 위해서는 괜찮은 퍼블리셔 개인 포트폴리오 홈페이지가 반드시 있어야 합니다. 코딩웍스가 심혈을 기울여 만든 괜찮은 개인 포트폴리오 홈페이지 제작 가이드 교재(PDF)입니다. 해당 교재는 인터넷에서 구글링 해서 구할 수 있는 내용이 아닙니다. 코딩웍스가 수년간 현장에서 300여 명의 학생에게 퍼블리싱 이론, 실전, 개인 포트폴리오 홈페이지 제작 강의하고 학생들이 빨리 원하는 회사에 취업할 수 있도록 개인 포트폴리오 홈페이지 제작 방법을 상세하게 담은 세상에 하나뿐인 퍼블리셔 취업 개인 포트폴리오 홈페이지 제작 가이드(PDF) 입니다.

초급

포트폴리오, 웹 디자인, HTML/CSS

퍼블리셔 개인 포트폴리오 홈페이지 제작 완벽 가이드(PDF)

코딩웍스(Coding Works)

html/css 기초탄탄 초스피드 완강코스

J.영

html/css초보 입문자를 대상으로 기초를 탄탄하게 다지며, 물론 반응형 레이아웃 제작 실전을 배울 수 있습니다.

입문

HTML/CSS, Flex, css3

html/css 기초탄탄 초스피드 완강코스

J.영

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

그랩

왕초보도 할 수 있는 웹, 서버, 모바일 앱, 머신러닝까지 익히는 끝판왕 풀스택 강의!! 개발을 어디서부터 시작할지 막막했다면 이 강의를 강력 추천할게요. Javascript 하나로 진행합니다!

입문

JavaScript, React, Node.js

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

그랩

Vanila JS 기반 UI Component - 탭메뉴 만들기

코딩고스트

하나의 웹 페이지를 구성하려면, 부분부분 각 컴포넌트들을 만들 수 있어야 합니다. 순수코딩만으로 UI component를 만들어 봅니다. html,css,javascript를 사용하실 줄 아는 분께 추천드립니다.

초급

HTML/CSS, vanilla-javascript

Vanila JS 기반 UI Component - 탭메뉴 만들기

코딩고스트

프론트엔드 입문: HTML, CSS 가장 쉽게 이해하기

3년차 프론트엔드 개발자가 가장 쉽게 알려주는 HTML, CSS 기초 강의입니다.

입문

HTML/CSS, html5, css

프론트엔드 입문: HTML, CSS 가장 쉽게 이해하기

ChatGPT API 입문 강의 - 30분 만에 다국어 번역기 웹 풀스택 개발하기

까룬

ChatGPT API로 30분 만에 다국어 번역기 웹 풀스택 개발하고, 인공지능을 전혀 모르더라도 프로덕트에 최신 인공지능(ChatGPT API)을 도입해봐요!

입문

ChatGPT, Python, HTML/CSS

ChatGPT API 입문 강의 - 30분 만에 다국어 번역기 웹 풀스택 개발하기

까룬

웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)

두노피

전국 합격률 60%중에 우리반 합격률은 90%! 시험요구사항을 파악하면 가능합니다. 실기 책 사지마요 어려워요

초급

HTML/CSS, jQuery

웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)

두노피

웹디자인기능사 자격증 대비(2023년 출제기준 반영버전)

webstoryboy

웹디자인기능사 출제기준 2023년 버전에 맞추어 누구나 합격할 수 있도록 제작하였습니다. 5가지 유형을 배우고 빠르게 합격합시다!

초급

HTML/CSS, jQuery, JavaScript

웹디자인기능사 자격증 대비(2023년 출제기준 반영버전)

webstoryboy

[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기

판다코딩

HTML / JS / CSS 만을 가지고 직접 심리 테스트 사이트를 만들고, 배포해보는 Project 사이트를 제작합니다.

초급

HTML/CSS, JavaScript, Bootstrap

[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기

판다코딩

실무중심의 HTML5 시각화 프로그래밍

트레이딩온

데이터를 가공하여 표의 형태로 표현할 수도 있지만 가장 중요한 것은 데이터를 인간이 한 눈에 알아 볼 수 있게 표현하는 것입니다.

초급

HTML/CSS

실무중심의 HTML5 시각화 프로그래밍

트레이딩온

바이브 코딩 With Claude Code로 웹 서비스 만들기

개발 까마귀

현직 스타트업 CTO가 실제 서비스와 여러 외주를 통해서 얻은 바이브코딩 지식 전수해드립니다.

입문

HTML/CSS, JavaScript, Next.js

바이브 코딩 With Claude Code로 웹 서비스 만들기

개발 까마귀

풀면서 배우는 정보처리산업기사 과정평가형 실기 완벽정리

Neo

풀면서 배우는 정보처리산업기사 정보처리산업기사 과정평가형 실기 합격을 위해 모든것을 준비했습니다.

입문

HTML/CSS, Java, SQL

풀면서 배우는 정보처리산업기사 과정평가형 실기 완벽정리

Neo

연관 로드맵

강의가 포함된 로드맵으로 학습해 보세요!

웹 프론트엔드 개발자 걸음마 떼기 : 처음부터 차근차근

유노코딩

입문자를 위한 HTML 기초 강의

먼저 경험한 수강생들의 후기

5.0

수강 후 이런걸 얻을 수 있어요

'HTML 어린이' 를 위한 기초 강의 📖

강의 내용을 미리 확인해 보세요 😀

강의 목표 📜

이 강의만의 특징

이런 내용을 알려드려요! 😁

HTML 기초 of 기초

HTML 문서 기본 구조

HTML 태그 완전정복 - 기본

HTML 태그 완전정복 - 심화

수강 전 안내 사항을 확인하세요 🔍

다음과 같은 준비물을 챙겨주세요!

수강 전 미리 알려드려요!

이런 분들께 추천드려요

안녕하세요 유노코딩입니다.

커리큘럼

수강평

유노코딩님의 다른 강의

비슷한 강의

연관 로드맵

이런 분들께
추천드려요

안녕하세요
유노코딩입니다.