Inflearn brand logo image
Inflearn brand logo image
BEST
Programming

/

Web Development

初心者のためのHTMLの基本

HTMLはとても簡単だと理解していますが、知ってみると難しい内容がたくさんあります。 このレッスンでは、HTMLの「難しい部分」を簡単に解いて話すことに取り組んでいます。 HTMLを正しく学びましょう。

（4.8）受講レビュー 28件

受講生 483名

HTML/CSS

こんなことが学べます

  • 正しい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標準（Web Standard）のためには、何をどのように参考にし、習得するべきかについて紹介します。

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

HTMLはどのような要素で構成されていますか？個々の要素の内部にどの情報が入るべきかを理解し、HTMLを正しく作成する方法を学びます。

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

外部文書やメディアを読み込むときは、要素をどのように活用する必要がありますか？データを表で表現したり、ユーザーが入力するデータを受け取るときにはどのようなルールを守らなければなりませんか？各要素のベストプラクティスを作成する方法を詳しく説明します。

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

最後に、実際のHTMLを書くときに役に立ついくつかの情報をまとめました。

注意事項

  • 必ずしもHTML入門知識を知っている必要はありませんが、入門知識がない場合は難しい場合があります。
  • HTML、CSS、JavaScriptについて知っておくと良いでしょう。

こんな方に
おすすめです！

学習対象は
誰でしょう？

  • HTMLについて知っているが正しく知らない人

  • HTML入門者

前提知識、
必要でしょうか？

  • HTML基礎文法

こんにちは
です。

483

受講生

28

受講レビュー

13

回答

4.8

講座評価

1

講座

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

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

カリキュラム

全体

70件 ∙ (4時間 33分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

28件

4.8

28件の受講レビュー

  • ChipmunkDev님의 프로필 이미지
    ChipmunkDev

    受講レビュー 23

    ∙

    平均評価 5.0

    5

    49% 受講後に作成

    아직 강의를 완강하지는 않았습니다. 이 강의를 접하며 HTML에 대한 인식을 새롭게 하였습니다. 클론 코딩으로 처음 공부하며 HTML은 그냥 태그만을 위한 언어인줄 알았지만 HTML이 말그대로 뼈대가 되고 웹에서 제일 큰부분을 차지한다는것을 깨닫게 되었습니다 :) 프론트 백엔드 구분없이 다들 한번씩 보셨으면 좋을것 같습니다! * HTML입문자가 보기에는 힘들수도 있을것 같습니다.

    • 조은
      知識共有者

      감사합니다! 말씀 주신 것처럼 HTML의 중요성을 다루는 게 이 강의의 핵심 가치라, HTML 입문자가 들으시는 것보다는 한 번 이상 다루어보신 분을 대상으로 하고 있습니다. 잘 들어주셔서 감사합니다!

  • 조용준 (Near)님의 프로필 이미지
    조용준 (Near)

    受講レビュー 25

    ∙

    平均評価 5.0

    5

    27% 受講後に作成

    HTML에 대해서 공부하는사람이 있다면 추천해주고 싶은 강의 였습니다. 챕터별로 잘 정리되어 있고 깔끔하게 잘 설명 해주셔서 이해하기 편했습니다. 마크업 할때 태그별 성격에 맞게 해 볼수 있을것 같아요. 매번 단기적으로 시멘틱 웹에 대해서 학습 하였는데 이번에 잘 정리했습니다. 웹 접근성에 대해서도 이번 기회에 공부해보아야 겠어요. 감사합니다.

    • 조은
      知識共有者

      상세한 수강평 감사합니다. 이 강의에서 가장 추구하는 바를 잘 전달한 듯 하여 다행입니다 :) 다시 한 번 감사합니다.

  • 한승철님의 프로필 이미지
    한승철

    受講レビュー 4

    ∙

    平均評価 4.5

    4

    100% 受講後に作成

    좋은 강의 감사합니다

    • 조은
      知識共有者

      들어주셔서 감사합니다 :)

  • 자스린님의 프로필 이미지
    자스린

    受講レビュー 2

    ∙

    平均評価 5.0

    5

    100% 受講後に作成

    평소 HTML은 그저 화면에 그려주기 layout을 잡는 언어로만 생각했었는데, 이 강의를 수강하고 나서 시맨틱하게 HTML을 작성하면 어떤 장점이 있고, 이런 장점을 얻기 위해 어떻게 마크업을 해야하는지 알게 되었습니다. 그리고, 그동안 웹 접근성에 대해 공부할 필요성을 못느꼈는데, 왜 공부해야 하는지 알 수 있는 계기가 되었던 것 같습니다!!

    • beegizee1220님의 프로필 이미지
      beegizee1220

      受講レビュー 33

      ∙

      平均評価 5.0

      5

      100% 受講後に作成

      HTML에 대해 가볍게 생각했었는데 생각보다 가볍지 않다라는 것을 느끼게된 강의였습니다. 감사합니다~!

      似ている講座

      同じ分野の他の講座を見てみましょう！

      리베하얀의 CSS3 기초실무 - 2024강의 썸네일

      리베하얀의 CSS3 기초실무 - 2024

      리베하얀

      CSS 실무 20년이상 경력을 기반으로한 CSS 기초 강의에 오신 것을 환영합니다! 이 강의는 웹 퍼블리셔와 프론트엔드 개발자로 성장하기 위한 첫 걸음을 내딛는 여러분을 위해 준비되었습니다.

      입문

      입문

      HTML/CSS, nesting, css3

      웹 프론트엔드 포트폴리오의 모든 것 - 주제 선정부터 실전 배포까지 압축 실습 강의!강의 썸네일

      웹 프론트엔드 포트폴리오의 모든 것 - 주제 선정부터 실전 배포까지 압축 실습 강의!

      문태훈

      "경력자만 뽑는 세상, 신입의 무기는 단 하나 - 차별화된 '개인' 포트폴리오!" 현업 요구를 녹인 프로젝트로 실력을 보여주는 신입 개발자의 필수 가이드.

      초급

      초급

      HTML/CSS, React, Git

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

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

      유노코딩

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

      초급

      초급

      Sass, 클론코딩, HTML/CSS

      DOM 기본강의 썸네일

      DOM 기본

      김영보

      DOM을 모르고 웹 프로그램을 말할 수 없습니다. DOM 스펙의 95% 이상을 다룹니다. DOM의 마침표를 찍을 수 있습니다. 넓고 깊으며 자세합니다. 시간, 비용, 노력을 허비하지 않습니다. 자바스크립트 활용도 같이 다루며, 바닐라 JS로 웹 애플케이션을 개발할 수 있습니다.

      초급

      초급

      DOM, JavaScript, HTML/CSS

      김일한의 리액트(React) 개발자를 위한 실습을 통한 입문 과정강의 썸네일

      김일한의 리액트(React) 개발자를 위한 실습을 통한 입문 과정

      소프트캠퍼스

      본 과정은 리액트를 이용하여 프론트 웹을 개발할 수 있는 방법에 대해 학습합니다. 리액트를 위한 자바스크립트 핵심문법, CDN 기반 리액트 개발, NPM 기반 리액트 개발 방법 학습 합니다.

      입문

      입문

      React, JavaScript, HTML/CSS

      입문자를 위한 HTML 기초 강의강의 썸네일

      입문자를 위한 HTML 기초 강의

      유노코딩

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

      입문

      입문

      HTML/CSS

      카페 24 베스트 쇼핑몰 디자인 클론코딩하기 (HTML + CSS)강의 썸네일

      카페 24 베스트 쇼핑몰 디자인 클론코딩하기 (HTML + CSS)

      같이코딩

      카페 24에 올라온 베스트 쇼핑몰 디자인을 직접 클론코딩해보며 빠르게 HTML과 CSS를 학습할 수 있습니다. HTML + CSS에 대한 기본적인 이론을 학습하고 직접 클론코딩을 통해 쇼핑몰 디자인을 완성하여 이론에서 배웠던 내용을 적용하고 견고하게 HTML과 CSS의 틀을 잡을 수 있게 강의를 구성했습니다

      입문

      입문

      클론코딩, HTML/CSS, 웹 디자인

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

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

      그랩

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

      입문

      입문

      JavaScript, React, Node.js

      비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지강의 썸네일

      비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

      Jiwoon Jeong

      내가 좋아하는 유튜버의 맛집지도를 만들면서 프론트엔드, 백엔드, 카카오맵 API 사용법, 배포까지 한번에 배울 수 있는 풀스택 맛집지도 강의입니다.

      초급

      초급

      HTML/CSS, JavaScript, REST API

      조코딩의 코딩 기초와 웹 풀스택 개발강의 썸네일

      조코딩의 코딩 기초와 웹 풀스택 개발

      조코딩

      코딩 1위 유튜버 조코딩의 실전 압축! 쉽고 재미있는 웹 풀스택 개발 강의

      입문

      입문

      HTML/CSS, JavaScript, Node.js

      2024 html/css 기초탄탄 초스피드 완강코스강의 썸네일

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

      J.영

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

      입문

      입문

      HTML/CSS, html-layout, css3

      나도 할 수 있다! SW강사!강의 썸네일

      나도 할 수 있다! SW강사!

      제주코딩베이스캠프

      SW강사를 희망하는 모두를 위한 수업으로 커리큘럼과 자료 제공, 15년차 현직 강사의 노하우와 꿀팁까지 한번에 해결할 수 있습니다.

      입문

      입문

      HTML/CSS, JavaScript, Python

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

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

      webstoryboy

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

      초급

      초급

      HTML/CSS, jQuery, JavaScript

      실무중심의 HTML5 시각화 프로그래밍강의 썸네일

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

      트레이딩온

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

      초급

      초급

      HTML/CSS

      자바스크립트 제대로 배워볼래?강의 썸네일

      자바스크립트 제대로 배워볼래?

      개발자의 품격

      자바스크립트를 제대로 배우길 원하는 초급자를 위한 가장 탄탄한 기초 강의입니다. 여러분은 이 강의를 통해 자바스크립트라는 언어를 이해하는 시작점이 될 것이고, 프론트엔드(Vue, React, Angular) 개발자, 서버(Node.js) 개발자가 되기 위한 기초를 완벽하게 준비할 수 있습니다.

      초급

      초급

      JavaScript, ES6, HTML/CSS

      웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

      깡코딩

      웹게임도 만들고, 프론트엔드 웹 개발 스킬도 배우는 1석 3조 수업! 독자적인 아이디어로 JavaScript, CSS, HTML을 활용해 게임을 만들 수 있는 방법을 수업으로 만들었습니다!

      초급

      초급

      인터랙티브 웹, JavaScript, HTML/CSS

      [2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드강의 썸네일

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

      코딩웍스(Coding Works)

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

      입문

      입문

      HTML/CSS, jQuery, 웹 디자인

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

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

      유용한IT학습

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

      초급

      초급

      HTML/CSS, jQuery, XD

      제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]강의 썸네일

      제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]

      nhcodingstudio

      📌 이 강의는 전략형 AI 틱택토 프로젝트로 시작해, 객체지향 프로그래밍의 핵심 개념까지 실전 예제로 완성하는 커리큘럼입니다. 게임 구현으로 로직 설계와 AI 전략 사고를 훈련하고, 이어서 상속, 조합, 위임, 캡슐화 같은 OOP 설계 기술을 직접 코드로 경험합니다. 실제 프로젝트로 문법을 넘어서 ‘설계하는 개발자’로 성장하고 싶은 분께 추천드립니다.

      초급

      초급

      JavaScript, HTML/CSS, 객체지향