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 |
|