초급

코딩 자율학습 HTML+CSS+자바스크립트

책에 수록된 예제 코드를 사이트를 통해서 직접 수정하거나 실행할 수 있습니다.
  • 14

    14개의 챕터

    체계적인 챕터 구성

  • 295

    295개의 동영상

    평균 7분 내외

  • 240

    약 240 시간

    학습 권장 시간

  • 5.0

    수강평

    6명 참여

  • 강의소개
  • 커리큘럼
  • 수강평
수코딩이 보장하는

커리큘럼

  • 총 레슨 295개
  • 1. 공지사항
    • 오탈자 안내
    • Live Server 익스텐션 설치 후 오류 발생 시 해결 방법
    • Prettier Extension 적용 안내
  • 2. 1장
    • 시작하기전에
    • 첫 번째 HTML | p.43
  • 3. 2장
    • HTML 기본 구조 | p.49
  • 4. 3장
    • hn 태그 | p.61
    • p 태그 | p.62
    • br 태그 | p.63
    • blockquote.html | p.63
    • q.html | p.64
    • ins&del.html | p.65
    • sub&sup.html | p.65
    • div.html | p.68
    • span.html | p.69
    • ul.html | p.71
    • ol.html | p.72
    • dl.html | p.73
    • a.html | p.76
    • img.html | p.77
    • img-link.html | p.78
    • strong.html | p.80
    • em.html | p.81
    • input.html | p.85
    • label.html | p.86
    • fieldset.html | p.87
    • textarea.html | p.89
    • select.html | p.90
    • select&optgroup.html | p.91
    • select&size.html | p.92
    • select&multiple | p.92
    • select&selected | p.93
    • button.html | p.94
    • disabled.html | p.94
    • readonly.html | p.95
    • maxlength.html | p.96
    • checked.html | p.96
    • placeholder.html | p.97
    • table-sample.html | p.100
    • table.html | p.102
    • colgroup&col.html | p.105
    • scope.html | p.106
    • audio.html | p.109
    • video.html | p.110
    • audio_source | p.112
    • title_attribute.html | p.121
  • 5. 4장
    • css.html | p.132
    • internal.html | p.134
    • index.html | p.135
    • inline.html | p.137
  • 6. 5장
    • asterisk.html | p.142
    • tag_selector.html | p.143
    • id_selector.html | p.144
    • class_selector.html | p.145
    • attribute_selector_1.html | p.146
    • attribute_selector_2.html | p.146
    • group_selector | p.150
    • child_selector.html | p.150
    • descendant_sibling.html | p.151
    • adjacent_sibling.html | p.152
    • general_sibling.html | p.153
    • before_after.html | p.155
    • link-pseudo.html | p.157
    • hover.html | p.157
    • active.html | p.158
    • input_pseudo.html | p.158
    • checkbox_pseudo.html | p.159
    • disabled_pseudo.html | p.159
    • enabled_pseudo.html | p.160
    • first-child&last-child.html | p.161
    • nth-child.html | p.161
    • nth-last-child.html | p.162
    • nth-of-type.html | p.162
    • nth-last-of-type.html | p.163
    • first-of-type.html | p.163
    • last-of-type.html | p.164
  • 7. 6장
    • specificity-1.html | p.173
    • specificity-2.html | p.173
    • inherit.html | p.177
    • font-family.html | p.183
    • font-size.html | p.184
    • font-weight.html | p.185
    • font-style.html | p.186
    • font-variant.html | p.187
    • color.html | p.188
    • text-align.html | p.188
    • text-decoration.html | p.190
    • letter-spacing.html | p.191
    • line-height.html | p.193
    • margin.html | p.198
    • margin-collapse.html | p.200
    • border.html | p.204
    • padding.html | p.206
    • width-height.html | p.207
    • box-sizing.html | p.207
    • box-sizing-modify.html | p.210
    • display.html | p.212
    • background-color.html | p.213
    • background-image.html | p.214
    • background-image-small.html | p.214
    • background-image-big.html | p.215
    • background-repeat.html | p.216
    • background-size.html | p.217
    • background-position.html | p.218
    • background-attachment-scroll.html | p.220
    • background-attachment-fixed.html | p.220
    • background-attachment-local.html | p.220
    • background.html | p.222
    • relative.html | p.225
    • absolute.html | p.227
    • fixed.html | p.228
    • sticky.html | p.229
    • z-index.html | p.231
    • float-image.html | p.232
    • float-layout.html | p.234
    • float-ex1.html | p.237
    • clear.html | p.239
    • clear-solved.html | p.240
    • clear-solved-2.html | p.240
    • transition.html | p.242
    • transition-delay | p.244
    • transition-timing-function | p.246
    • animation-basic | p.251
    • animation-duration.html | p.252
    • animation-fill-mode.html | p.254
    • animation-iteration-count.html | p.254
    • animation-play-state.html | p.255
    • transform-basic.html | p.260
    • transform-translate.html | p.261
    • transform-scale.html | p.261
    • transform-skew.html | p.262
    • transform-rotate.html | p.263
    • transform-origin.html | p.264
    • webfont.html | p.267
    • fontawesome.html | p.269
  • 8. 7장
    • flex-basic.html | p.279
    • flex.html | p.281
    • flex-direction.html | p.282
    • flex-wrap.html | p.283
    • flex-flow.html | p.284
    • justify-content.html | p.285
    • align-items | p.287
    • align-content.html | p.288
    • align-self.html | p.288
    • grid-basic.html | p.292
    • grid.html | p.293
    • grid-template | p.293
    • grid-gap.html | p.296
    • grid-align-items.html | p.297
    • grid-justify-items.html | p.298
    • grid-template-areas.html | p.300
    • grid-line.html | p.302
    • mediaquery.html | p.309
  • 9. 8장
    • internal_script.html | p.320
    • error.html | p.327
  • 10. 9장
    • let_variable.js | p.339
    • const_variable.js | p.339
    • const_variable_error.js | p.339
    • string_type.js | p.342
    • string_type_wrap.js | p.343
    • string_type_operator.js | p.344
    • string_type_operator2.js | p.344
    • string_type_escape.js | p.345
    • string_type_escape2.js | p.346
    • template_string.js | p.346
    • template_string_ex.js | p.347
    • number_type.js | p.347
    • number_type_add.js | p.347
    • boolean_type.js | p.348
    • boolean_type_ex.js | p.348
    • undefined_type.js | p.349
    • null_type.js | p.349
    • array.js | p.350
    • object_literal.js | p.352
    • in_de_crement.js | p.354
    • pre_indecrement.js | p.355
    • after_indecrement.js | p.355
    • logical_nagation.js | p.356
    • ternary_operator.js | p.360
    • operator-1.js | p.362
    • operator-2.js | p.363
    • typeConversion.js | p.363
    • typeConversion2.js | p.364
    • typeConversion3.js | p.364
    • if.js | p.367
    • else.js | p.368
    • else_if.js | p.368
    • switch.js | p.370
    • switch_default.js | p.371
    • if_condition.js | p.372
    • if_case.js | p.373
    • switch_case.js | p.373
    • while.js | p.376
    • do_while.js | p.377
    • for.js | p.378
    • for_for.js | p.379
    • for_in_arr.js | p.380
    • for_in_obj.js | p.381
    • for_in_arr.js | p.382
    • for_break.js | p.382
    • for_break_ex.js | p.383
    • for_continue.js | p.383
  • 11. 10장
    • gugudan_console.js | p.392
    • gugudan_for.js | p.392
    • gugudan_func.js | p.393
    • naming_func.js | p.395
    • anonymous_func.js | p.396
    • naming_func_call.js | p.396
    • arrow_func.js | p.397
    • gugudan.js | p.400
    • parameter_default.js | p.402
    • add_func.js | p.403
    • add_func_return.js | p.403
    • return_exit.js | p.404
    • return_arrow.js | p.404
    • global.js | p.406
    • block_scope.js | p.408
    • reference.js | p.409
    • hoisting.js | p.410
    • hoisting_func.js | p.410
    • hoisting_express.js | p.411
    • iife.js | p.413
  • 12. 11장
    • object.js | p.423
    • object_dot.js | p.424
    • dynamic_object.js | p.426
    • primitive_copy.js | p.428
    • shallow_copy.js | p.431
    • pw_length.js | p.434
    • includes.js | p.434
    • indexOf.js | p.435
    • length_for.js | p.436
    • date_instance.js | p.437
    • date_instance2.js | p.438
    • date_instance3.js | p.438
    • date_method.js | p.439
    • getDateDiff.js | p.440
    • random.js | p.441
    • getMaxRandom.js | p.441
    • getMinMaxRandom.js | p.442
    • window.html | p.446
    • open.html | p.447
    • popup.html | p.572
    • scrollToBy.html | p.449
    • scrollToByBehavior.html | p.450
  • 13. 12장
    • dom_basic.html | p.457
    • getElement.html | p.462
    • query.html | p.464
    • content.html | p.467
    • content_set.html | p.468
    • style_set_1.html | p.469
    • style_set_2.html | p.469
    • classList_add.html | p.471
    • classList_remove.html | p.472
    • classList_toggle.html | p.472
    • dataset.html | p.473
    • attribute.html | p.475
    • attribute2.html | p.476
    • attribute3.html | p.477
    • node_basic.html | p.480
    • createNode.html | p.480
    • removeChild.html | p.485
    • removeChildAll.html | p.485
    • forms.html | p.487
    • forms_name.html | p.489
    • forms_element.html | p.490
    • input.html | p.492
    • input_set.html | p.493
    • textarea.html | p.493
    • textarea_set.html | p.494
    • checkbox.html | p.494
    • checkbox_set.html | p.495
    • radio.html | p.496
    • radio_set.html | p.497
    • select.html | p.497
    • select_set.html | p.498
    • fileupload.html | p.499
    • inline_event1.html | p.503
    • inline_event2.html | p.504
    • property_listener.html | p.505
    • addEventListener.html | p.506
    • addEventListenerArrow.html | p.506
    • event_object1.html | p.508
    • event_object2.html | p.510
    • event_cancel.html | p.511
    • this.html | p.512
    • this_arrow.html | p.514
  • 14. 13장
    • 헤더(header) 영역
    • 메인(main) 영역
    • About Me 영역
    • What I Do 영역
    • Portfolio 영역
    • Contact With Me 영역
    • 반응형 코드 영역
    • 자바스크립트 코드 영역
    • 최종 전체 코드

수강생 강의 후기

  • 6명 참여 / 5.0(6 ratings)
5
100%
4
0%
3
0%
2
0%
1
0%
전상호
굿입니다
조상현
정말 강의 잘 듣고 있습니다. 일을 다니면서 코딩을 배우는게 어렵고 할수가없었는데 이렇게 라도 학습할수있어 참 좋네요 ㅎㅎ
이충원
책과 제공되는 소스코드를 보면서 공부하면 영상없이도 수월한 학습이 가능합니다. 아직 개발환경 구축도 하지 않은 상태라면 아주 추천합니다. 정말 쉽게 필요한 부분만 설명해주면서 궁금할만한 건 잠깐 뒤에라도 내용이 나올 정도로 독자를 생각하면서 만든 책 같았습니다. 다만 셀프체크 문제 해답이 셀프체크 조건을 지키지 않거나 책에 없는 기능을 써서 풀거나 해서 아쉽습니다. 이론 학습 용으로 쓰고 다른 문제로 연습하면 좋을 것 같습니다.
김유주
주석으로 좀더 자세히 실습에 대한 내용을 적어주시면 좋겠습니다
희미한녀석
실습에 정말 많이 도움이 됩니다! 다만 가끔 css 파일이 빠져있거나 한부분은 아쉽습니다
김찬혁
코딩 자율학습 책 너무 잘 봤습니다~ 처음 공부하시는 분들에게 강력 추천!
수코딩 로고수코딩

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

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

유튜브 로고
카카오 채널