1. | ![]() |
1-1. 프로그래밍 기초 | 프로그래밍 기초 2D 그래픽 기초 기본 도형 그리기 레퍼런스 착아보기 변수 | ![]() |
![]() |
1-2. 2D Graphics 기초 | 프로그래밍 기초 4D 그래픽 기초 기본 도형 그리기 레퍼런스 착아보기 변수 | ![]() |
|
![]() |
1-3. 기본 도형 그리기 | 프로그래밍 기초 6D 그래픽 기초 기본 도형 그리기 레퍼런스 착아보기 변수 | ![]() |
|
![]() |
1-4. 레퍼런스 찾아보기 | 프로그래밍 기초 8D 그래픽 기초 기본 도형 그리기 레퍼런스 착아보기 변수 | ![]() |
|
![]() |
1-5. 변수 | 프로그래밍 기초 10D 그래픽 기초 기본 도형 그리기 레퍼런스 착아보기 변수 | ![]() |
|
2. | ![]() |
2-1. 변수 (1) | 변수 데이터 타입 | ![]() |
![]() |
2-2. 변수 (2) | 변수 데이터 타입 | ![]() |
|
![]() |
2-3. 데이터 타입 (1) | 변수 데이터 타입 | ![]() |
|
![]() |
2-4. 데이터 타입 (2) | 변수 데이터 타입 | ![]() |
|
![]() |
2-5.[실습] 학생 정보 관리하기 | 변수 데이터 타입 | ![]() |
|
3. | ![]() |
3-1. 판단하기_if구문 활용하기 (1) | if 구문 활용하기 [실습] 나이테처럼 쌓이는 원 그리기 | ![]() |
![]() |
3-2. 판단하기_if구문 활용하기 (2) | if 구문 활용하기 [실습] 나이테처럼 쌓이는 원 그리기 | ![]() |
|
![]() |
3-3. [실습] 나이테처럼 쌓이는 원 그리기 | if 구문 활용하기 [실습] 나이테처럼 쌓이는 원 그리기 | ![]() |
|
4. | ![]() |
4-1.[실습] 움직이는 공 | [실습] 움직이는 공 [실습] 슈팅게임 만들기 | ![]() |
![]() |
4-2. [실습] 슈팅게임 만들기 | [실습] 움직이는 공 [실습] 슈팅게임 만들기 | ![]() |
|
5. | ![]() |
5-1. 반복문_while문 | while문 for문 [실습] for문의 활용 | ![]() |
![]() |
5-2. 반복문_for문 | while문 for문 [실습] for문의 활용 | ![]() |
|
![]() |
5-3. [실습] for문의 활용 | while문 for문 [실습] for문의 활용 | ![]() |
|
6. | ![]() |
6-1. 함수 | 함수 [과제] 반복문 사용한 포스터 | ![]() |
![]() |
6-2.[과제] 반복문 사용한 포스터 | 함수 [과제] 반복문 사용한 포스터 | ![]() |
|
7. | ![]() |
7-1. 일반 웹 페이지에 p5.js 화면 넣기 | 일반 웹 페이지에 p5.js 화면 넣기 그 밖의 가능성들 | ![]() |
![]() |
7-2. 그 밖의 가능성들 | 일반 웹 페이지에 p7.js 화면 넣기 그 밖의 가능성들 | ![]() |
|
8. | ![]() |
8-1. DOM 활용하기(1) | DOM 활용하기 Event 활용하기 [실습] 버튼 클릭하면 숫자 증가, 감소 | ![]() |
![]() |
8-2. DOM 활용하기(2) | DOM 활용하기 Event 활용하기 [실습] 버튼 클릭하면 숫자 증가, 감소 | ![]() |
|
![]() |
8-3. Event 활용하기 | DOM 활용하기 Event 활용하기 [실습] 버튼 클릭하면 숫자 증가, 감소 | ![]() |
|
![]() |
8-4. [실습] 버튼 클릭하면 숫자 증가, 감소 | DOM 활용하기 Event 활용하기 [실습] 버튼 클릭하면 숫자 증가, 감소 | ![]() |
|
9. | ![]() |
9-1. 태그 스타일링 (1) | 태그 스타일링 | ![]() |
![]() |
9-2. 태그 스타일링 (2) | 태그 스타일링 | ![]() |
|
![]() |
9-3. 태그 스타일링 (3) | 태그 스타일링 | ![]() |
|
![]() |
9-4. 태그 스타일링 (4) | 태그 스타일링 | ![]() |
|
10. | ![]() |
10-1. CSS Grid | CSS Grid 클래스의 유무로 인터랙션 만들기 | ![]() |
![]() |
10-2. 클래스의 유무로 인터랙션 만들기 (1) | CSS Grid 클래스의 유무로 인터랙션 만들기 | ![]() |
|
![]() |
10-3. 클래스의 유무로 인터랙션 만들기 (2) | CSS Grid 클래스의 유무로 인터랙션 만들기 | ![]() |
|
11. | ![]() |
11-1. [PROJECT] Photo Gallery (1) | Photo Gallery | ![]() |
![]() |
11-2. [PROJECT] Photo Gallery (2) | Photo Gallery | ![]() |
|
![]() |
11-3. [PROJECT] Photo Gallery (3) | Photo Gallery | ![]() |
|
![]() |
11-4. [PROJECT] Photo Gallery (4) | Photo Gallery | ![]() |
|
12. | ![]() |
12-1.[PROJECT] Font Explorer (1) | Font Explorer | ![]() |
![]() |
12-2. [PROJECT] Font Explorer (2) | Font Explorer | ![]() |
|
![]() |
12-3. [PROJECT] Font Explorer (3) | Font Explorer | ![]() |
|
![]() |
12-4. [PROJECT] Font Explorer (4) | Font Explorer | ![]() |
|
![]() |
12-5. [PROJECT] Font Explorer (5) | Font Explorer | ![]() |
|
![]() |
12-6. [PROJECT] Font Explorer (6) | Font Explorer | ![]() |
|
![]() |
12-7. [PROJECT] Font Explorer (7) | Font Explorer | ![]() |
|
13. | ![]() |
13-1. BOM 활용하기 | BOM 활용하기 각 태그의 크기와 위치를 알아내기 Where am I | ![]() |
![]() |
13-2. 각 태그의 크기와 위치를 알아내기 | BOM 활용하기 각 태그의 크기와 위치를 알아내기 Where am I | ![]() |
|
![]() |
13-3. [PROJECT] Where am I (1) | BOM 활용하기 각 태그의 크기와 위치를 알아내기 Where am I | ![]() |
|
![]() |
13-4. [PROJECT] Where am I (2) | BOM 활용하기 각 태그의 크기와 위치를 알아내기 Where am I | ![]() |
|
![]() |
13-5. [PROJECT] Where am I (3) | BOM 활용하기 각 태그의 크기와 위치를 알아내기 Where am I | ![]() |
|
![]() |
13-6. [PROJECT] Where am I (4) | BOM 활용하기 각 태그의 크기와 위치를 알아내기 Where am I | ![]() |
|
14. | ![]() |
14-1. [PROJECT] Hide & Seek (1) | Hide & Seek | ![]() |
![]() |
14-2. [PROJECT] Hide & Seek (2) | Hide & Seek | ![]() |
|
![]() |
14-3. [PROJECT] Hide & Seek (3) | Hide & Seek | ![]() |
|
![]() |
14-4. [PROJECT] Hide & Seek (4) | Hide & Seek | ![]() |