Point 1

HTML과 CSS 스킬로

창의적인 웹 제작

프로필 링크, 메시지 카드, 원페이지 홈페이지 프로젝트를 통해 실용적이고 창의적인 웹 디자인을 완성합니다.

Point 2

애니메이션과 인터랙션으로

생동감 있는 페이지 구현

3D 회전 효과, 스크롤 애니메이션, 다이내믹 이미지를 활용해 더욱 몰입감 있는 웹 페이지를 제작합니다.

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