<aside>

HTML·CSS·JavaScript의 동작 원리를 확인한 짧은 UI 실습 모음

scroll-snap, 카드 인터랙션과 할 일 목록처럼 한 가지 기술에 집중한 결과물을 정리했습니다.

</aside>

페이지 안내

작업 규모보다 CSS 레이아웃과 JavaScript 이벤트·상태 처리의 기본 원리를 직접 확인하는 데 목적을 둔 기술 실습입니다.

작업 목록

• 사이트 호스팅 주소: https://sevim0104.cafe24.com/cssFullpage/index.html

• 페이지 총 개수: 1페이지

• 제작 기간: 1H (2023년 12월 작업물)

  CSS scroll-snap을 이용해 JavaScript 없이 섹션 단위로 이동하는 풀페이지 화면을 구현했습니다.

• 사이트 호스팅 주소: https://sevim0104.cafe24.com/mini-project/cardOver.html

• 페이지 총 개수: 1페이지

• 제작 기간: 1H (2023년 12월 작업물)

  바닐라 JavaScript로 포인터 위치를 계산하고 카드의 회전값에 반영하는 3D 인터랙션을 구현했습니다.

  

• 사이트 호스팅 주소: https://sevim0104.cafe24.com/js_todolist/todolist.html

• 페이지 총 개수: 1페이지

• 제작 기간: 0.5H (2024년 7월 작업물)

  바닐라 JavaScript로 할 일 목록의 추가와 삭제 기능을 구현했습니다.