초급
코딩 자율학습 HTML+CSS+자바스크립트
책에 수록된 예제 코드를 사이트를 통해서 직접 수정하거나 실행할 수 있습니다.
- 14
14개의 챕터
체계적인 챕터 구성
- 295
295개의 동영상
평균 7분 내외
- 240
약 240 시간
학습 권장 시간
- 5.0
수강평
6명 참여
- 강의소개
- 커리큘럼
- 수강평
수코딩이 보장하는
커리큘럼
- 총 레슨 295개
- 영상:
- 실습: 290
- 노트: 5
- 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 파일이 빠져있거나 한부분은 아쉽습니다
김찬혁
코딩 자율학습 책 너무 잘 봤습니다~ 처음 공부하시는 분들에게 강력 추천!
