All Lectures
RouteNoticeQ&A

김버그의 HTML&CSS는 재밌다

HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까지 한 강의로 끝내기, 실무 가능한 실력으로 😎

Lecture Introduction
Difficulty
Easy
Category
Web Programming - Programming
Tag
CSS, HTML
Certificate
You can issue a certificate of completion
Target Audience
- 본인의 웹 디자인을 직접 코드로 구현하고 싶은 디자이너
- 실무에서 바로 적용 가능한 실용적인 스킬을 원하는 분
- 웹 개발을 처음부터 똑바로 배우고 싶은 예비 개발자
- HTML&CSS를 공부했으나 실제로 사용하지는 못하는 아기 개발자




🦄


웹 개발의 시작인 HTML, 그런 만큼
우리는  공부해야 합니다






1단계

태그의 용도와 웹 표준에 맞게 작성하는 법을 학습합니다

이때 배워야 하는 태그의 양이 좀... 많습니다 😖





강의에서 다루는 HTML 태그 Map   실무에서 가장 많이 사용하는 녀석들만 쏙쏙 골랐습니다







2단계

배워서 써먹지 못한다면 의미 없다!
자주 등장하는 UI 컴포넌트를 함께 마크업 하면서 HTML 작성법을 익힙니다

14개의 (직접 만든!) UI 컴포넌트가 여러분을 기다리고 있습니다 💕


이런 슬픈 일이 일어나지 않도록 김버그가 멱살 잡고 캐리하겠책임지겠습니다







3단계: Twitter Markup Challenge

시맨틱하고 구조적인 HTML 작성하는 법을 학습합니다

더이상 작은 UI 컴포넌트가 아니라 문서 전체를 구조적으로 설계하는 법을 배웁니다 🙌






우리가 함께 마크업하게 될 친구입니다 (압박)









CSS가 처음이신가요?

CSS가 어려우시다고요?

CSS 공부해보니 재미없고 헷갈리기만 하시나요?

요즘 다들 CSS는 어느 정도 하는 것 같은데, 나만 모르는 것 같으세요? 😢



🎉자~알 오셨습니다! 🎉




CSS는 외우는 게 아닙니다, '이해'하셔야 해요


많은 분들이 CSS를 마냥 어렵게만 생각하시는 경향이 있어요

하.지.만

단언컨대 이 친구도 차근차근 원리를 이해하면서 공부하시면 전혀 어려울 게 없습니다!

한번 기초를 제대로 다져놓으면 그 이후론 절대로 흔들릴 게 없는 CSS

김버그와 함께 CSS의 기본 원리, 제대로 다져봐요 💪🙌


▲  애니메이션이 난무하는 화려한 강의안은 덤 🎁





(농담아님) 유쾌하고 재밌는 개발 강의


저도 처음 개발을 시작할 때 여러 온라인 강의를 들었어요...

그.러.나. 한 가지 문제가 있었다면, 너무너무너무너무 지루해서 끝까지 완강을 할 수가 없었다는 것 😫😫

안 그래도 힘들고 어려운 공부, 재미까지 없을 필요는 없잖아요!


그래서 만들어봤습니다!

유쾌하고 재밌는 CSS 강의를요!

( ( 물론 개그코드가 다르다면... 재미없을 수도... 또륵... 😢 ) )



▼ SAMPLE 


▲  동네 언니 || 누나 인줄






▲  실무 꿀팁(?)까지





(현) 프론트엔드 개발자의 실무 노하우를 꽉꽉 담아내다


아기개발자 🐣           대체 얼마나 해야 실무에서 쓸 실력을 갖출 수 있는거야!?!?

김버그 🐛           잇츠 심플 베이비, 제가 알려준 것만 다 하시면 됩니다!


기본기를 탄탄하게 다지는 것도 (매우) 중요하지만, 그만큼 중요한 건 끝없는 연습이겠죠!

[실전] 강의를 통해서 배운 내용을 함께 복습 + 연습하는 것은 물론, 실무에서 빈번히 사용되는 실무 꿀팁!

3년 만에 연봉 5,000+을 만들어준 노하우를 아낌없이 모두 공유합니다!


강의를 끝까지 성실히만 들어주세요. 그리고 회사에서 칭찬받을 준비 하세요 😉





▲  몬스터급 파이널 프로젝트가 여러분을 기다리고 있습니다







Bonus+

개발자라면 알아야 하는 소소한 팁들을 공유합니다

틈틈이 업데이트될 예정입니다 🐝




.

.

.

.



"실례지만 누구세요...?"


.

.

.

.






https://www.youtube.com/c/kimbug

Preview
Expand All
  • 01
    시작하기에 앞서
  • HTML이 왜 중요한가요?
  • 02
    HTML 기초
  • 태그 해부학
  • 04
    트위터 마크업 챌린지
  • 챕터 소개: 구조적인 웹 문서 설계
  • 06
    Box
  • Box Sizing
  • 11
    Typography
  • Webfont
Curriculum
Expand All
  • 01
    시작하기에 앞서
  • HTML이 왜 중요한가요?
    HTML을 시맨틱하게 작성해야 하는 이유
    강의 100% 활용하기
    강의 환경 세팅
  • 02
    HTML 기초
  • 태그 해부학
    제목과 문단 Headings & Paragraph
    강조 Emphasis
    링크 Anchor
    이미지 Image
    리스트 Lists
    정의 리스트 Description List
    인용 Quotations
    흑마법 Div & Span
    Form (1) - 기본구조
    Form (2) - Input
    Form (3) - Label
    Form (4) - Radio & Checkbox
    Form (5) - Select & Option
    Form (6) - Textarea
    Form (7) - Buttons
    표 Table (1) - 기본 구조
    표 Table (2) - 심화
    미디어 파일 Media
    기타 Etc
    Doctype & Document Structure
    Title, Link, Style & Script
    Meta
    마무리 + 쉬어가기
  • 03
    HTML 훈련
  • Ad Banner
    Google Search Result Item
    Feature Box
    Logo in Header
    Breadcrumb & Pagination
    Product Card
    Instagram User Profile
    Receipt
    Github Dropdown Menu
    Input Group
    Feed
    Gmail Inbox
    Music Player
    Video Player
  • 04
    트위터 마크업 챌린지
  • 챕터 소개: 구조적인 웹 문서 설계
    올바른 Sectioning Elements 사용 방법
    페이지 구조 설계
    Header
    Global Navigation
    Main
    Tweet Form
    Timeline
    Tweet
    Aside
    Footer
    마무리
  • 05
    Hello CSS
  • 강의 소개
    CSS 소개 & 기본 형태
    CSS 사용 방법
    실습 강의를 위한 준비
  • 06
    Box
  • Box Model
    Box Sizing
    Box
    Block
    Inline
    Inline Block
  • 07
    Float
  • Float 1
    Float 2
    [실습] Float 훈련 1
    [실습] Float 훈련 2
  • 08
    Position
  • Position 1
    Position 2
    [실습] Position 훈련 1
    [실습] Position 훈련 2
    [실습] Position 훈련 3
  • 09
    Flexbox
  • Flexbox 1
    Flexbox 2
    [실습] Flexbox 훈련 1 & 2
    [실습] Flexbox 훈련 3
  • 10
    Media Query
  • Media Query
    [실습] Media Query 훈련
  • 11
    Typography
  • Typography 1
    Typography 2
    Webfont
    [실습] Typography Library 제작
  • 12
    Background
  • Background
    [실습] Background 훈련 part 1
    [실습] Background 훈련 part 2
  • 13
    Transition & Animation
  • Transition
    Animation
    [실습] Transition 훈련
    [실습] Animation 훈련
  • 14
    Etc.
  • Box Shadow
    Opacity
    Overflow
    Transform
    Visibility
  • 15
    Selectors
  • 요소, 클래스, ID 선택자 (Type, Class & ID Selector)
    자식, 자손, 형제 선택자 (Child, Descendant & Sibling Combinators)
    구조적 가상 클래스 선택자 (Structural Pseudo-classes)
    동적 가상 클래스 선택자 (User Action Pseudo-classes)
    CSS 선택자 올림픽
  • 16
    Page Layout
  • Grid System
    Bootstrap
    Final Project 안내
    [실습] 작업 환경 세팅
    [실습] Landing Section
    [실습] Service Section
    [실습] Program Section 1
    [실습] Program Section 2
    [실습] Curriculum Section
    [실습] Subscription Section
    [실습] Footer
Recent Update|2024. 05. 02
Instructor Introduction
hello.Goorm Edu Captain 김버그.Let's start learning together!

Lecture Reviews
100,000
90,000
(10%)

Average Rating
5.0
Difficulty
Easy
Lecture Period
Unlimited