[K-디지털 크레딧]_3기: 바로 써먹는 풀스택 기초 - 자바스크립트
    • 01
      시작하기에 앞서
    • [필독] K-디지털 크레딧 FAQ
      [필독] 과정 공지사항
      강의의 방향
      프로그래밍이란?
      구름IDE
    • 02
      OT
    • [필독] 공지사항
      구름EDU
      구름EDU 이론강의
      구름EDU 실습강의
    • 03
      1주차 HTML - 기초
    • 강의 목표
      HTML의 기본 구성
      기본적인 HTML 문서 구조
      Head와 Body
      기본적인 레이아웃
      정리
    • 04
      1주차 제목, 내용 관련 태그
    • 강의 목표
      제목과 본문 태그
      나누기 위한 태그
      글자와 관련된 태그
      정리
    • 05
      1주차 링크 태그
    • 강의 목표
      링크 태그란
      링크 태그의 속성
      웹사이트의 경로와 주소
      정리
    • 06
      1주차 멀티미디어 관련 태그
    • 강의 목표
      이미지 태그
      오디오와 비디오 태그
      유튜브 영상 삽입
      정리
    • 07
      1주차 입력 양식 태그
    • 강의 목표
      입력 양식(form)
      form 태그
      input 태그
      select 태그
      textarea 태그
      button 태그
      정리
    • 08
      1주차 테이블과 리스트
    • 강의 목표
      표(Table)
      목록(List)
      목록 태그의 속성
      정리
    • 09
      1주차 CSS - 기초
    • 강의 목표
      CSS의 의미와 구성 요소
      선택자(Selector)에 대하여
      CSS의 기본 단위
      CSS의 색상
      정리
    • 10
      1주차 선택자(Selector)
    • 강의 목표
      단순 선택자
      복합 선택자
      가상 클래스 선택자
      정리
    • 11
      2주차 Box 모델
    • 강의 목표
      박스(Box)모델
      content
      border
      padding과 margin
      정리
    • 12
      2주차 글자(Text) 관련 스타일
    • 강의 목표
      폰트 종류와 웹 폰트
      폰트의 크기와 형태
      텍스트 정렬
      정리
    • 13
      2주차 위치 정렬
    • 강의 목표
      block과 inline
      inline-block
      position
      float
      정리
    • 14
      2주차 위치 정렬 - flexbox
    • 강의 목표
      flexbox에 관하여
      flex container: 방향과 흐름
      flex container: 정렬1
      flex container: 정렬2
      flex container: 정렬3
      flex item
      정리
    • 15
      2주차 HTML&CSS 기본
    • 1강
      2강
      3강
      4강
    • 16
      2주차 CSS 심화 - 클래스 선택자
    • 1강
      2강
      3강
      4강
    • 17
      2주차 블럭과 인라인
    • 1강
      2강
      3강
      4강
    • 18
      2주차 CSS 타이포그래피
    • 1강
      2강
      3강
      4강
      5강
    • 19
      2주차 Float 속성으로 가로배치 1
    • 1강
      2강
      3강
      4강
    • 20
      3주차 위치 정렬 - grid 1
    • 강의 목표
      grid layout 기본
      grid container: template
      grid container: gap
      grid container: auto
      grid container: grid
      grid container: align & justify
      정리
    • 21
      3주차 위치 정렬 - grid 2
    • 강의 목표
      grid item: row, column
      grid item: area
      grid item: self
      정리
    • 22
      3주차 상속과 우선순위
    • 강의 목표
      상속
      우선순위
      정리
    • 23
      3주차 Float 속성으로 가로배치 2
    • 1강
      2강
      3강
      4강
      5강
    • 24
      3주차 Position 속성 입문
    • 1강
      2강
      3강
      4강
      5강
    • 25
      3주차 Position 속성 좀 더 다뤄보기
    • 1강
      2강
      3강
      4강
    • 26
      3주차 auto와 %, Negative Margins
    • 1강
      2강
      3강
      4강
      5강
    • 27
      3주차 반응형 사이드바 레이아웃
    • 1강
      2강
      3강
      4강
      5강
    • 28
      4주차 CSS Animation - transition
    • 시작하기 전에
      delay
      duration
      property
      timing-function
      transition
      정리
    • 29
      4주차 transform
    • 시작하기 전에
      scale
      rotate, translate
      skew, origin
      정리
    • 30
      4주차 keyframe
    • 시작하기 전에
      Keyframe의 시작
      animation과 관련된 프로퍼티_1
      animation과 관련된 프로퍼티_2
      animation과 관련된 프로퍼티_3
      Loading Spinner 만들기
      Loading Bar 만들기
      정리
    • 31
      4주차 JS Animation - DOM
    • 시작하기 전에
      DOM이 무엇이길래?
      DOM 접근 1
      DOM 접근 2
      DOM 조작하기 1: 요소 스타일
      DOM 조작하기 2: 요소 스타일 수정
      정리
    • 32
      4주차 Event
    • 시작하기 전에
      이벤트(Event)
      이벤트 핸들러(Event Handler)
      this와 Event 객체_1
      this와 Event 객체_2
      Prevent Default
      정리
    • 33
      4주차 Animation
    • 시작하기 전에
      Web Animations
      classList
      Transition Event_1
      Transition Event 2
      Animation Event
      Timer Function
      정리
    • 34
      4주차 float 기반의 그리드 시스템1
    • 1강
      2강
      3강
      4강
      5강
      6강
    • 35
      4주차 float 기반의 그리드 시스템2
    • 1강
      2강
      3강
      4강
      5강
    • 36
      4주차 모바일 우선 반응형 작업
    • 1강
      2강
      3강
      4강
      5강
    • 37
      5주차 JS 준비운동
    • JS 숲을 보고 시작하자
      개발자답게 사용하는 Chrome Browser_1
      개발자답게 사용하는 Chrome Browser_2
      JS를 움직이는 다양한 데이터, 자료형과 연산
      JS에게는 온 세상이 객체다_1. 이론
      JS에게는 온 세상이 객체다_2. 실습
      코드의 흐름을 제어하는 조건문과 반복문_1. 이론
      코드의 흐름을 제어하는 조건문과 반복문_2. 실습
      JS에서 만나는 함수_1. 이론
      JS에서 만나는 함수_2. 실습
      생성자 함수로 객체 찍어내기
      객체로서의 함수
    • 38
      5주차 프레임워크를 위한 JS
    • 쉬어가기1. 문법 학습의 함정
      스코프: 이 변수, 어디까지 쓸 수 있을까?
      this의 모든 것_1. 개요
      this의 모든 것_2. 상세
      DOM 가지고 놀기_1. goormIDE
      DOM 가지고 놀기_2. CLI에서 JS 실행하기
      DOM 가지고 놀기_3. getElementbyid
      DOM 가지고 놀기_4. HTML 태그의 속성 조작하기
      DOM 가지고 놀기_5. input 태그 다루기
      callbak 함수: 넌 좀 기다렸다 오렴
    • 39
      5주차 하나씩 살펴보는 ES6
    • 변수, 상황별로 나눠 쓰자
      문자열을 좀 더 쉽게 사용하는 템플릿 리터럴
      화살표 함수: 시간도 없는데 함수도 복잡하게 쓰나?
      배열 가지고 놀기_1. 배열의 정체와 길이
      배열 가지고 놀기_2. 요소 추가
      배열 가지고 놀기_3. 배열을 순회하는 두 가지 방법
      배열 가지고 놀기_4. 필터링, 마무리
      쉬어가기2. 코드 스타일
    • 40
      5주차 깊게 알아보는 ES6
    • 구조분해할당으로 똑똑하게 값 빼내기
      Spread와 Destructuring
      클래스로 세상만물 프로그래밍
      Class 실습
      모듈로 여러 파일에 나눠 작업하기
      예외 처리
      Promise Async Await
    • 41
      6주차 프레임워크 없이 CRUD 구현하기
    • Overview
      이번 프로젝트에서 쓰일 핵심 JS 개념
      초기 세팅
      데이터 정의_1
      데이터 정의_2
      테이블에 데이터 넣기
      버튼 만들기
      입력 행 만들기
      삭제 구현
      추가 구현
      수정하기
      save 구현
    • 42
      6주차 웹 게임 제작: 공 피하기
    • overview
      이번 프로젝트에서 쓰일 핵심 JS 개념
      환경설정
      데이터 정의
      마우스 좌표와 timer 함수
      시작 기능 만들기
      공 만들기_1
      공 만들기_2
      공 움직이기
      게임오버 점수판 만들기
      reset 기능과 프로젝트 마무리
    • 43
      6주차 JavaScript 크롤링: 뉴스와 멜론 차트
    • 이번 프로젝트에서 쓰일 핵심 JS 개념
      프로젝트 환경 세팅
      뉴스 기사 크롤링_1
      뉴스 기사 크롤링_2
      Melon Chart 크롤러_1
      Melon Chart 크롤러_2
    • 44
      6주차 크롬 확장 앱 만들기
    • Overview
      이번 프로젝트에서 쓰일 핵심 JS 개념
      Chrome Extension을 이루는 요소
      manifest.json
      로고 이미지 만들기
      기본 환경 세팅
      클릭시 새 탭에서 열기 구현
      popup html 구현
      DomContentLoaded 이벤트 리스너 등록 & 프로젝트 큰 그림 정리하기
      검색 기록에서 가장 많이 typed된 url 가져오기
      url-typed된 횟수 매핑
      최종 배열 만들기
      Chrome Extension 등록
    • 45
      6주차 자바스크립트 입문
    • 자바스크립트란?
      자바스크립트의 역사
      자바스크립트의 특징
      자바스크립트 엔진이란?
      실습 환경 구축 - 구름IDE
    • 46
      7주차 자바스크립트 문법
    • 기본 문법
      연산자
      데이터 타입
      조건문
      조건문 실습 - 양수 구별하기
      조건문 실습 - 자판기
      반복문
      반복문 실습 - 역순으로 출력하기
      함수
      함수 실습 - 제곱 값 출력하기
    • 47
      7주차 객체지향 자바스크립트
    • 객체지향이란?
      객체지향의 요소
      컨스트럭터(생성자)
      스코프와 호이스팅
      클로저
    • 48
      7주차 Node.js 소개와 설치
    • Node.js 란?
      이벤트 기반 비동기 방식
      Node.js 의 특징
      Node.js의 아키텍쳐
      Node.js 설치
      REPL 활용하기
    • 49
      7주차 기본 모듈과 Node.js 기초
    • 노드의 모듈 개념
      전역 객체 : Global
      OS 모듈
      Utility 모듈
      File System 모듈
      Event 모듈
      노드에서의 상속
    • 50
      7주차 확장모듈 - npm 활용하기
    • npm 소개 및 설치
      확장모듈 설치
      확장모듈 관리
      package.json
      확장모듈 - nodemon
    • 51
      7주차 주요 확장 모듈 - express
    • express 설치
      새 프로젝트
      내부 구성
      페이지 라우팅
      간단한 웹 페이지 이동
    • 52
      8주차 주요 확장 모듈 - express Pug
    • 표현방법 및 계층구조
      태그 ID, 클래스, 속성
      태그 콘텐츠
      자바스크립트와 CSS
      설치 및 예제
      Pug를 이용한 웹페이지 실습
    • 53
      8주차 주요 확장 모듈 - socket.io
    • 클라이언트/서버 통신
      Web Socket이란?
      이벤트 주고 받기
      socket.io를 이용한 채팅 구현 - 구현에 앞서
      socket.io를 이용한 채팅 구현 - 기본
      socket.io를 이용한 채팅 구현 - 추가 기능
      socket.io를 이용한 채팅 구현 - 도전 문제
    • 54
      8주차 실전 프로젝트 - 빙고 게임 만들기
    • 구현에 앞서
      빙고 게임 - 코드
      빙고 게임 - 설명
      빙고 게임 - 도전 문제
    • 55
      8주차 주요 확장 모듈 - mongoose
    • mongoDB란?
      mongoose 살펴보기
      온라인 메모장 만들기 - 구현에 앞서
      온라인 메모장 만들기 - 코드
      온라인 메모장 만들기 - 설명
      온라인 메모장 만들기 - 도전 문제
    • 56
      8주차 주요 확장 모듈 - Redis
    • Redis란?
      Redis 설치하기
      Redis 기본 사용 방법
      Publisher / Subscriber
    • 57
      8주차 실전 프로젝트 - 간단한 SNS 개발
    • 구현에 앞서
      SNS 개발 - passport.js를 이용한 구글 로그인 준비
      SNS 개발 - 코드
      SNS 개발 - 설명
      SNS 개발 - 키 값을 json 파일로 분리하기
      SNS 개발 - 도전 문제
      마무리
    [필독] K-디지털 크레딧 FAQ
    01 시작하기에 앞서
    [필독] K-디지털 크레딧 FAQ
    Q. K-디지털 크레딧 과정은 어떻게 참여하나요?
    A. 본 과정은 내일배움 카드 소지자를 대상으로 진행됩니다. HRD-Net에서 강좌에 신청을 통해 크레딧을 차감한 뒤, 구름EDU에서 해당 강좌에 신청하시면 실제 자비부담금을 결제하실 수 있는 결제 링크를 전달 드릴 예정입니다.

    👉발급 자격 요건 및 신청 방법 확인하기


    Q. 국민내일배움카드는 어떻게 발급받나요?

    A. 직업능력개발훈련에 참여하고자 하는 대한민국 국민이라면 국민내일배움카드를 발급 받을 수 있습니다.

    단, 아래에 해당되는 분들은 발급 받을 수 없습니다.

    1.현직 공무원
    2.사립학교 교직원
    3.재학생 (졸업예정자는 제외)
    4.연 매출 1억 5천만 원 이상의 자영업자
    5.월 임금 300만원 이상의 대기업 근로자
    6.특수형태 근로자

    👉 발급 자격 요건 및 신청 방법 확인하기
    ( 📞 자세한 문의는 고용노동부 1350)


    Q. HRD-Net 등록 시 회차(기수)는 어떻게 선택하면 되나요?

    A. 교육 과정은 기수 제로 운영됩니다.
    지원하고자 하는 기수에 맞게 선택하여 등록해 주셔야 합니다.
    구름EDU의 강좌이름에 기수가 포함되어 있습니다. 같은 기수로 선택해주세요


    Q. 신청 접수 확인은 어떻게 하나요?

    A.신청 접수 단계에서 등록하신 이메일로 개별 안내됩니다.


    Q. K-디지털 크레딧 과정은 누가 교육을 들을 수 있나요?

    A. 만 34세 이하 청년, 만 34세 이상 만 55세 미만 중장년 여성 등 실업자 중 디지털ㆍ신기술 분야 직업능력개발훈련을 받지 않은 사람을 대상으로 합니다.


    Q. 훈련에 필요한 개인 준비물이 있나요?

    A. 개인 노트북 혹은 PC를 준비해 주세요. 교육 과정은 온라인 기반으로 진행되어 고사양이 필요하지 않습니다.


    Q. 훈련 자부담금은 얼마인가요?

    A. 이 과정은 국민내일배움카드 계좌 지원 한도 외 50만원(유효기간 1년)이 추가 지원 대상이며, 잔여 크레딧에 따라 최소 개인 자부담금 10%가 발생합니다.


    Q. 훈련 자부담금은 어떻게 결제하나요?

    A. HRD-Net에서 크레딧 결제한 정보와 구름EDU에서 과정 신청해주신 정보를 바탕으로 개별 결제 링크를 전달합니다. 

    ✔️ 자부담금도 꼭 내일배움 카드를 통해서 결제해주세요

    질문하기