Thumbnail
BEST 개발 · 프로그래밍 웹 개발

초보자를 위한 HTML 기초

(4.7)
26개의 수강평 ∙ 413명의 수강생

22,000원

지식공유자: 조은
총 70개 수업 (4시간 40분)
수강기한: 무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
이 강의는 멘토링 신청이 가능합니다.
멘토링은 수강 신청과 별개로 운영되며, 수강생이 아니어도 신청할 수 있습니다.
폴더에 추가 공유
초급자를 위해 준비한
[웹 개발, 프론트엔드] 강의입니다.

HTML은 많이 쉽다고 이해하고 있지만 알고 보면 어려운 내용이 많습니다. 이 강의에서는 HTML의 '어려운 부분'을 쉽게 풀어 이야기하는 데에 노력하고 있습니다. HTML을 제대로 알아봅시다.

✍️
이런 걸
배워요!
올바른 HTML 작성 방법
HTML 표준 기법
HTML

HTML 기초

조은, "HTML 기초" 강의 커버 이미지 (한국어 정방형 버전)

이 강의는 HTML을 입문하셨거나,
이미 프런트엔드 개발자로 현업에 있는 분들이
HTML에 대한 이해도를 높이고 싶으실 때 들으시면 좋은 강의 입니다.

WHATWG의 HTML 표준 스펙을 참고하여
현업에서 주로 사용되는 HTML 요소들과,
HTML 요소들의 활용법에 대해 다루는 강의입니다.


무엇을 배우게 되나요?

WHATWG 로고

▲ WHATWG 로고

HTML 자체가 무엇인가에 대한 소개부터 시작하여,
표준화 기구, HTML 표준, HTML DOCTYPE 등을 배우게 됩니다.

이어서 HTML 각 요소들의 의미와 용법 등을 배우며,
마무리로 HTML에서 알아두면 좋은 사이트에 대해 학습합니다.


강의 구성

HTML Living Standard 메인 페이지 (섹션 0 3강)

HTML이란 무엇이며, 왜 학습해야 하나요? 웹 표준(Web Standard)을 위해서는 무엇을 어떻게 참고하고 익혀야 하는지에 대해 소개합니다.

DOCTYPE 선언 Visual Studio Code 강의화면 캡처 (섹션 0 4강)

HTML은 어떤 요소로 이루어져 있을까요? 각각의 개별 요소 내부에 어떤 정보가 들어가야 하는지 이해하고, HTML을 올바르게 작성하는 방법에 대해 알아봅니다.

HTML의 각 요소를 정리한 Visual Studio Code 강의화면 캡처 (섹션 1 1강)

외부 문서나 미디어를 불러올 때는 요소를 어떻게 활용해야 할까요? 데이터를 표로 표현하거나, 유저가 입력하는 데이터를 받을 때에는 어떤 규칙을 지켜야 할까요? 각 요소의 Best Practice를 만들어가는 방법을 더 자세히 살펴봅니다.

알아두면 유익한 HTML 관련 링크 (섹션 1 11강)

마지막으로, 실제 HTML을 작성할 때 유용하게 쓸 수 있는 여러 가지 정보를 정리했습니다.


참고사항

  • 반드시 HTML 입문 지식을 알고 계실 필요는 없지만 입문 지식이 없을 경우 어려울 수 있습니다.
  • HTML, CSS, JavaScript에 대해서 두루 알고 계시면 좋습니다.
지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
HTML에 대해 알지만 제대로 알지는 못하시는 분
HTML 입문자
📚
선수 지식,
필요한가요?
HTML 기초 문법

안녕하세요
조은 입니다.
조은의 썸네일

HTML, CSS, DOM 등 Web Standard 기술에 관심이 많은 Front-End 개발자입니다.
Web Technologies 분야의 Google Developers Expert이기도 합니다.

가끔은 번역가로, 가끔은 개발자로, 가끔은 제품 관리자로, 가끔은 사진 작가로 일합니다.
연락처: choeun@techhtml.dev

커리큘럼 총 70 개 ˙ 4시간 40분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 1. HTML 요소 들어가기
섹션 3. HTML 요소 - Sections
HTML body 요소 미리보기 02:35 HTML Heading 요소 미리보기 04:59
HTML section, article 요소 07:24
HTML header, hgroup 요소 03:23
HTML footer, address 요소 03:12
HTML nav 요소 02:13
HTML aside 요소 01:54
Recap 02:57
섹션 4. HTML 요소 - Grouping content
HTML Grouping 콘텐츠 소개 01:02
HTML p 요소 01:35
HTML blockquote 요소 01:18
HTML ul, ol, menu, li 요소 04:11
HTML dl, dt, dd 요소 03:17
HTML figure, figcaption 요소 02:28
HTML main 요소 02:51
HTML div 요소 02:04
Recap 02:24
섹션 5. HTML 요소 - text level semantics
HTML Text-level semantics 01:47
HTML a 요소 06:32
HTML strong, em 요소 02:25
HTML cite, q 요소 02:28
HTML dfn, abbr 요소 03:07
HTML code 요소 01:28
HTML span 요소 01:03
HTML br, wbr 요소 02:47
Recap 03:00
섹션 6. HTML 요소 - Embedded content
HTML Embedded Content 소개 01:10
HTML picture, source, img 요소 04:48
HTML video, source, track 요소 07:28
HTML audio, source 요소 02:50
HTML iframe 요소 04:49
Image best practices 08:11
Recap 02:51
섹션 7. HTML 요소 - tabular data
HTML Tabular data 소개 00:46
HTML table 요소 01:29
HTML caption 요소 02:21
HTML thead, tbody, tfoot 요소 02:45
HTML colgroup, col 요소 02:50
HTML tr, th, td 요소 02:49
table의 용법 03:22
Recap 02:23
섹션 8. HTML 요소 - Forms
HTML Forms 소개 01:28
HTML label, input 요소 03:52
HTML fieldset, legend 요소 01:56
HTML button 요소 03:20
HTML radio, checkbox, textarea 요소 05:08
autocomplete, required 속성 03:28
마무리 01:39
섹션 9. HTML 요소 - Interactive content
HTML Interactive Content 소개 00:41
HTML details, summary 요소 04:14
HTML dialog 요소 04:35
마무리 01:07
섹션 10. 마무리
알아두면 유익한 HTML 관련 사이트들 11:30
강의 게시일 : 2020년 12월 21일 (마지막 업데이트일 : 2020년 12월 21일)
수강평 총 26개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.7
26개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
정지운 thumbnail
아직 강의를 완강하지는 않았습니다. 이 강의를 접하며 HTML에 대한 인식을 새롭게 하였습니다. 클론 코딩으로 처음 공부하며 HTML은 그냥 태그만을 위한 언어인줄 알았지만 HTML이 말그대로 뼈대가 되고 웹에서 제일 큰부분을 차지한다는것을 깨닫게 되었습니다 :) 프론트 백엔드 구분없이 다들 한번씩 보셨으면 좋을것 같습니다! * HTML입문자가 보기에는 힘들수도 있을것 같습니다.
2020-12-30
지식공유자 조은
감사합니다! 말씀 주신 것처럼 HTML의 중요성을 다루는 게 이 강의의 핵심 가치라, HTML 입문자가 들으시는 것보다는 한 번 이상 다루어보신 분을 대상으로 하고 있습니다. 잘 들어주셔서 감사합니다!
2020-12-30
bytrustu thumbnail
HTML에 대해서 공부하는사람이 있다면 추천해주고 싶은 강의 였습니다. 챕터별로 잘 정리되어 있고 깔끔하게 잘 설명 해주셔서 이해하기 편했습니다. 마크업 할때 태그별 성격에 맞게 해 볼수 있을것 같아요. 매번 단기적으로 시멘틱 웹에 대해서 학습 하였는데 이번에 잘 정리했습니다. 웹 접근성에 대해서도 이번 기회에 공부해보아야 겠어요. 감사합니다.
2020-12-24
지식공유자 조은
상세한 수강평 감사합니다. 이 강의에서 가장 추구하는 바를 잘 전달한 듯 하여 다행입니다 :) 다시 한 번 감사합니다.
2020-12-26
한승철 thumbnail
좋은 강의 감사합니다
2020-12-23
지식공유자 조은
들어주셔서 감사합니다 :)
2020-12-26
자스린 thumbnail
평소 HTML은 그저 화면에 그려주기 layout을 잡는 언어로만 생각했었는데, 이 강의를 수강하고 나서 시맨틱하게 HTML을 작성하면 어떤 장점이 있고, 이런 장점을 얻기 위해 어떻게 마크업을 해야하는지 알게 되었습니다. 그리고, 그동안 웹 접근성에 대해 공부할 필요성을 못느꼈는데, 왜 공부해야 하는지 알 수 있는 계기가 되었던 것 같습니다!!
2021-02-22
beegizee1220 thumbnail
HTML에 대해 가볍게 생각했었는데 생각보다 가볍지 않다라는 것을 느끼게된 강의였습니다. 감사합니다~!
2021-02-21