Point 1

창의성과 논리적 사고력을

키우는 코딩 학습

웹 디자인과 코딩으로 상상력을 발휘해 나만의 캐릭터와 게임 세계를 완성하며 창의적 문제 해결 능력을 배양합니다.

Point 2

직관적이고

재미있는 프로그래밍

블록 코딩과 반응형 웹을 활용하여 쉽고 재미있게 프로그래밍에 입문할 수 있습니다. 코드를 시각적으로 조립하면서 논리적 사고와 구조적 사고력을 자연스럽게 익히게 됩니다.

Point 3

기본 개념부터

실습 중심의 학습

캐릭터의 움직임, 배경 변화 등 실제 구현을 통해 상상력을 구체화하며, 웹 디자인과 창의적인 아이디어를 논리적으로 표현하고 해결할 수 있는 역량을 기릅니다.

1) Preferences

개발 환경을 설정하기 위해 비주얼 스튜디오 코드 설치와 사용법을 학습합니다. 저장과 공유를 통해 웹 페이지를 효율적으로 관리하는 방법을 배웁니다.

2) Profile html

HTML 태그를 활용해 간단한 프로필 페이지를 설계하고 기본 구조를 이해합니다. 배경, 이미지, 버튼, 링크 등 웹의 기본적인 태그를 응용하는 방법을 학습합니다.

3) Button css

CSS를 활용해 버튼의 마우스 오버 효과와 모션 스타일을 추가합니다. 텍스트, 색상, 크기를 조정하여 사용자 경험을 향상시키는 방법을 배웁니다.

4) Github

깃허브를 통해 프로젝트를 업로드하고 웹에 배포하는 방법을 익힙니다. 배포한 웹 페이지를 다른 사람들과 공유하는 실습도 진행합니다.

5) Folder Setting

이미지, BGM 등의 파일 경로를 설정하며 프로젝트 폴더를 체계적으로 구성합니다. HTML 기본 구조와 파일 경로를 연결하여 효율적으로 설계하는 방법을 배웁니다.

6) Message Card

메시지를 카드 형태로 표현하기 위해 HTML과 CSS를 활용해 구조를 설계합니다. 그룹화된 요소를 사용해 깔끔하고 직관적인 웹 페이지 레이아웃을 만듭니다.

7) 3D rotate

3D transform을 활용하여 카드에 입체적인 회전 애니메이션 효과를 추가합니다. 카드에 생동감을 더해 시각적 매력을 높이는 방법을 배웁니다.

8) Javascript

JavaScript를 사용해 랜덤 메시지 출력, 새로고침 버튼, BGM 재생 기능을 구현합니다. 다양한 인터랙션을 추가하여 카드의 기능성과 사용자 경험을 개선합니다.

9) Prepare contents

원 페이지 홈페이지로 사용할 텍스트와 그림, 사진 등 콘텐츠 자료를 준비합니다. 콘텐츠를 정리하고 HTML에 반영하며 초기 구조를 완성합니다.

10) Scroll animation

JavaScript를 활용해 스크롤 시 텍스트와 요소가 자연스럽게 등장하는 효과를 만듭니다. 임팩트 있는 스크롤 애니메이션으로 콘텐츠를 돋보이게 연출합니다.

11) Dynamic image

이미지와 색상을 활용해 다이내믹한 스크롤 애니메이션을 구현합니다. 화면 전환 효과를 추가하여 페이지의 생동감을 극대화합니다.

12) Completion

완성된 디자인을 디테일하게 점검하고 배포 과정을 진행합니다. HTML, CSS, JavaScript 기술을 활용한 최종 결과물을 프레젠테이션합니다.

Customer Care

Follow Us