수코딩

초급

핵심만 골라 배우는 HTML5

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

    10개의 챕터

    체계적인 챕터 구성

  • 75

    75개의 동영상

    평균 7분 내외

  • 15

    약 15 시간

    학습 권장 시간

35,200원

  • 강의소개
코스 소개

핵심만 골라 배우는 HTML5는
[입문자]를 위해 준비한 강좌입니다.

HTML은 충분히 독학이 가능하다고 생각하시는 분들은 주목!
웹 개발의 가장 시발점이 되는 HTML을 제대로 배우지 못하고 넘어가면
나중에 정말 많이 고생합니다.
나중에 고생을 덜 하기 위해서라도, 처음 배울 때 부터
수코딩과 함께 HTML을 기초부터 제대로 배워보세요.

혹시 수코딩이 집필한 HTML 책을 보셨나요?

[코딩 자율학습 HTML+CSS+자바스크립트] 완독 후에 어떻게 공부해야 하냐구요?

수코딩이 집필한 [코딩 자율학습 HTML+CSS+자바스크립트]!! (구매링크)
무료 강의까지 제공하는 이 책을 완독하셨다면, 이제 어떻게 공부해야 할까요?
바로 [핵심만 골라 배우는 HTML] 유료 강의를 통해
더 확장되고 넓은 범위의 HTML을 배워보세요.
책에서는 미처 소개하지 못한 고급 기술을 배울 수 있습니다.

학습 기술

이 강의에서 배울 수 있는 기술

  • HTML4

    HTML4 버전의 문법도 놓칠수 없지!

  • HTML5

    가장 최신의 HTML5 문법도 배웁니다.

  • 시맨틱 태그

    HTML5의 핵심이라고 할 수 있는 시맨틱 태그도 확실하게 배웁니다.

  • 웹 표준

    웹 표준과 웹 표준을 지키면서 마크업하는 방법을 배웁니다.

실전 예제

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

HTML Basic이미지 링크

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

이미지 링크 UI
에펠탑 UI
Correct HTML기본부터 착실히

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

목록위키백과 목차

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

목록 UI
로그인 UI
마크업로그인

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

table요금표

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

요금표 UI
크레딧 카드 UI
CardCredeit Card

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

추천대상

핵심만 골라 배우는 HTML5는
누가 들으면 좋을까요?

학생1

입문자

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

학생2

경험자

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

학생3

실무자

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

학생4

부담없이 쉽게

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

FAQ

자주 묻는 질문

  • Q. 사전에 알고 있어야 하는 선수 지식이 있을까요?

    아니요. 사전에 아무런 선수 지식이 없어도 됩니다.

  • Q. 코딩을 전혀 모르는 사람도 강좌를 들을 수 있나요?

    그럼요, 해당 강좌는 코딩을 한 번도 접해본 적 없는 완전 초보자를 대상으로 하여 제작하였기 때문에 아무것도 모르는 사람도 충분히 수강할 수 있습니다.

  • Q. [코딩 자율학습 HTML+CSS+자바스크립트] 책에서 제공되는 무료 강좌와 차이점이 있나요?

    많은 차이가 있습니다. 유료 강좌는 온라인으로 학습하기에 최적화된 커리큘럼을 기반으로 제작했습니다. 따라서 강좌의 내용 구성이 책에서 제공된 무료 강좌와 차이가 크게 납니다. 또한, 책에서는 지면상의 이유로 자세히 설명하지 못했던 부분도 유료 강좌에서는 폭넓게 다루고 있습니다. 그리고 동영상의 편집 및 퀄리티도 압도적으로 유료 강좌가 더 좋습니다.

수코딩이 보장하는

커리큘럼

  • 총 레슨 75개
  • 1. 시작하기(공통)
    • 수코딩 교육 시스템
    • 웹 개발은 어떤 언어로 시작하는 게 좋을까요?
    • 개발 환경 구성하기(with Visual Studio Code)
    • 비주얼 스튜디오 코드 작업 폴더 설정
    • 동영상 버퍼링 해결법
  • 2. HTML 기초
    • HTML과 CSS란??
    • 태그
    • 태그 정리
    • 기본구조
    • 속성
    • 기본구조와 속성 정리
    • [실습] 한글이 깨져요
    • [정답] 한글이 깨져요
    • 정리 퀴즈문제
  • 3. 텍스트
    • heading
    • paragraph
    • [Tip] 올바른 헤딩 태그 사용법
    • [실습] 포스트잇
    • [해설] 포스트잇
    • strong, em
    • b, i 태그
    • [실습] 강조하기
    • [해설] 강조하기
    • [실습] 추억의 동요
    • [해설] 추억의 동요
    • 텍스트 태그 정리
  • 4. 링크와 이미지
    • a 태그
    • img 태그
    • [실습] 팬 페이지
    • 이미지 링크
    • [실습] 이미지 링크 연결하기
    • [정답] 이미지 링크 연결하기
    • 이미지맵
    • [실습] 에펠타워카드
    • [해설] 에펠타워 카드
    • 링크와 이미지 정리
  • 5. 목록과 그룹
    • 목록 태그
    • 정의형 목록
    • 퀴즈
    • 공간분할태그
    • 목록과 그룹 정리
    • [실습] 위키 백과 목록
    • [해설] 위키백과 목록
  • 6. 폼
    • form
    • input 태그 上
    • input 태그 下
    • button
    • select
    • textarea
    • lable 태그
    • 추가적인 속성들
    • 폼(form) 정리
    • [실습] 로그인 UI
    • [해설] 로그인 UI
    • [코드] 로그인 UI
  • 7. Table
    • 테이블
    • 테이블 태그의 잘못된 예
    • 테이블 병합
    • 테이블 그룹
    • [실습] 웹하드 요금표
    • [해설] 웹하드 요금표
    • (코드) 웹하드 요금표
  • 8. 알.쓸.코.지
    • HTML5에서 삭제된 태그
    • HTML5에서 삭제된 속성
    • HTML Entity
    • 자주 사용하는 Entitiy
  • 9. 시맨틱(semantic)
    • 시맨틱이란?
    • 시맨틱 태그 上
    • 시맨틱 태그 下
    • WAI ARIA 上
    • WAI ARIA 下
    • WAI-ARIA 정리
  • 10. 직접 만들어보기
    • Credit Card
    • [해설] Credit Card
    • Credit Card 최종 코드

수강생 강의 후기

  • 15명 참여 / 5.0(15 ratings)
5
100%
4
0%
3
0%
2
0%
1
0%
박나연
우선 목소리가 차분하셔서 강의에 집중이 매우 잘됐어요. 그리고 과제 피드백을 꼼꼼하게 봐주셔서 문제를 확실히 파악할 수 있어 좋았습니다! 또한 실습 위주로 되어 있어서 배운 것을 적용해서 이것저것 만들어보는 게 재미있고 좋았어요. 제대로 html을 배워본 적이 없었는데 이 강의가 많은 도움 되었습니다!
이지은
장점 1. 코딩 입문하시는 분 추천 : 코딩 문외한인 완전 노베이스가 듣기에도 무리 없었고 좋았습니다. 2. 시간 없으신 분 추천 : 강의가 거의 10분 넘어가는 경우가 드물어서 좋았습니다. 물론 주어진 과제를 해야 하는 경우에는 시간이 좀 걸리기는 하지만 전체적으로 총 강의 듣는 시간이 짧지만 내용은 야무져서 좋았습니다. 3. 질문 많으신 분 추천 : 제가 원래 질문이 좀 많은 편인데 피드백 확실하시고 다른 분들이 질문하셨던 거 볼 수 있어서 좋았습니다. 피드백 받은 내용들도 다시 피드백 받게 되면 사라지는 게 아니라 여전히 남아있어서 좋았습니다. 보완 1. 수강 후기 작성 방법 : 수강 후기 작성하려고 들어왔는데 어딘지 몰라서 조금 헤맸습니다. 좀 더 잘 보이는 곳에 배치해주시면 좋을 것 같습니다.
권슬기
HTML 강의를 듣기 전에 웹 개발에 대해 전혀 모르던 저였는데, 강의를 통해 HTML의 기본 개념과 구조를 익힐 수 있어서 좋았습니다. 이제 웹 페이지를 만드는 기초가 갖춰져서 더욱 자신감이 생겼어요.
백이연
아무것도 모르는 상태에서 들었는데 이해가 너무 잘되요! 추천합니다~~^^
랑코딩
하마터면 대충 보고 넘어갔을 HTML... 다행히 수코딩님 수업을 통해 정확한 개념을 배울 수 있어서 좋았습니다.
이창용
자세한 설명, 적당한 말 빠르기와 목소리 톤, 영상미 삼박자 고루 갖춘 완벽한 강의를 이렇게 싼 가격에 제공 해 주신 것에 대해 깊은 감사를 드리며 남은 css와 js도 완벽하게 끝마치겠습니다!
김수호
먼가 하나씩 배우는 재미가 있네요
sophie
HTML을 하나도 모르는 사람이 수강하기에도 친절한 강의이고, HTML을 이미 어느정도 아는 사람이 수강하기에도 얻어가는 것이 많습니다! 퍼블리셔, 프론트엔드 개발자, 웹 디자이너 모두에게 추천해용!
임종훈
HTML이랑 CSS 강의 완강하고 후기 남깁니다. 학원이나 책을 아무리 봐도 잘 이해가 되지 않고 강의한 결제만 해도 *데미 *프런 등등 많이 들어봤습니다. 그런데 아무리 들어도 잘 이해도 안되고 어렵더라구요. 그러다가 우연히 수코딩 강의를 듣게 되었는데 무료 강의 몇개 들어보니까 강의 스타일이 저랑 잘맞는것 같아서 바로 결제하고 들었어요. 확실히 기존에 뜬구름잡던 개념 같은 것들이 확실히 이해가되더라고요. 강의스타일만 자신과 잘 맞으면 ㄹㅇ 최고 강의 같습니다.
수수수숫
현업에서 일하고 있는 퍼블리셔입니다. html을 다시 복기하면서 정리하기 좋았어요. 기초를 다시 한번 잡고 넘어갈 수 있달까 ? 새로 배우시는 분들도 이론이 좀 부족하다 생각하시는 분들은 꼭 들으시면 좋을 것 같습니다.
수코딩 로고수코딩

수코딩은 누구나 쉽게 코딩을 배울 수 있는 온라인 코딩 교육을 만들어갑니다.

대표자: 김기수 | 사업자번호: 208-26-67207 | 통신판매업신고: 2024-성남중원-0311 개인정보관리책임자: 김기수 | 이메일: sucoding@naver.com

유튜브 로고
카카오 채널