김버그의 HTML&CSS는 재밌다

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

강좌 소개
난이도
쉬움
카테고리
웹 프로그래밍 - 프로그래밍
태그
CSS, HTML
수료증
발급 가능
추천 수강대상
- 본인의 웹 디자인을 직접 코드로 구현하고 싶은 디자이너
- 실무에서 바로 적용 가능한 실용적인 스킬을 원하는 분
- 웹 개발을 처음부터 똑바로 배우고 싶은 예비 개발자
- 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

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

강좌 후기
100,000
90,000
(10%)

평균평점
4.9
난이도
쉬움
수강기간
평생 무제한