프로필 링크, 메시지 카드, 원페이지 홈페이지 프로젝트를 통해 실용적이고 창의적인 웹 디자인을 완성합니다.
3D 회전 효과, 스크롤 애니메이션, 다이내믹 이미지를 활용해 더욱 몰입감 있는 웹 페이지를 제작합니다.
웹 페이지 설계부터 배포까지의 전 과정을 경험하며 실질적인 웹 개발 능력을 키웁니다.
환경설정을 통해 기본 개발 환경을 구축하고, HTML로 뼈대를 설계합니다.
CSS를 활용해 버튼 디자인을 완성하며, 최종적으로 깃허브를 통해 실시간으로 배포하는 과정을 학습해요!
HTML/CSS와 함께 JavaScript를 활용해 메시지 카드에 다양한 인터랙션을 추가합니다.
카드에 메시지를 적고, 다양한 버튼과 기능을 더해 기능적이고 감각적인 메시지 카드를 완성해볼까요?
스크롤 애니메이션과 장면 전환 효과를 통해 생동감 넘치는 원페이지 홈페이지를 제작합니다.
디테일 점검과 배포까지 완성하며 실질적으로 활용 가능한 결과물을 완성해요!
개발 환경을 설정하기 위해 비주얼 스튜디오 코드 설치와 사용법을 학습합니다. 저장과 공유를 통해 웹 페이지를 효율적으로 관리하는 방법을 배웁니다.
HTML 태그를 활용해 간단한 프로필 페이지를 설계하고 기본 구조를 이해합니다. 배경, 이미지, 버튼, 링크 등 웹의 기본적인 태그를 응용하는 방법을 학습합니다.
CSS를 활용해 버튼의 마우스 오버 효과와 모션 스타일을 추가합니다. 텍스트, 색상, 크기를 조정하여 사용자 경험을 향상시키는 방법을 배웁니다.
깃허브를 통해 프로젝트를 업로드하고 웹에 배포하는 방법을 익힙니다. 배포한 웹 페이지를 다른 사람들과 공유하는 실습도 진행합니다.
이미지, BGM 등의 파일 경로를 설정하며 프로젝트 폴더를 체계적으로 구성합니다. HTML 기본 구조와 파일 경로를 연결하여 효율적으로 설계하는 방법을 배웁니다.
메시지를 카드 형태로 표현하기 위해 HTML과 CSS를 활용해 구조를 설계합니다. 그룹화된 요소를 사용해 깔끔하고 직관적인 웹 페이지 레이아웃을 만듭니다.
3D transform을 활용하여 카드에 입체적인 회전 애니메이션 효과를 추가합니다. 카드에 생동감을 더해 시각적 매력을 높이는 방법을 배웁니다.
JavaScript를 사용해 랜덤 메시지 출력, 새로고침 버튼, BGM 재생 기능을 구현합니다. 다양한 인터랙션을 추가하여 카드의 기능성과 사용자 경험을 개선합니다.
원 페이지 홈페이지로 사용할 텍스트와 그림, 사진 등 콘텐츠 자료를 준비합니다. 콘텐츠를 정리하고 HTML에 반영하며 초기 구조를 완성합니다.
JavaScript를 활용해 스크롤 시 텍스트와 요소가 자연스럽게 등장하는 효과를 만듭니다. 임팩트 있는 스크롤 애니메이션으로 콘텐츠를 돋보이게 연출합니다.
이미지와 색상을 활용해 다이내믹한 스크롤 애니메이션을 구현합니다. 화면 전환 효과를 추가하여 페이지의 생동감을 극대화합니다.