당신이 만든 사이드 프로젝트에 대한 README.md를 작성하는 것이군요! 여기 템플릿이 있어요:
이 프로젝트는 side-project 입니다. 재미있어 보이는것들 개발하고 추후 업무에 도움이 되길 희망합니다.
이 프로젝트는 기존 카드 애니메이션에 기반하여 추가적인 기능을 구현하고, 개선된 사용자 경험을 제공하는 것을 목표로 하고 있습니다.
이 프로젝트의 핵심은 input + label element의 조합입니다.
input과 label 연결시켜줌으로써 label 선택 시 input radio checked가 활성화 되어 click event 제어를 전혀 할 필요 없습니다.
checked 여부에 따라 width 값을 변경하고 transition 주어 smooth한 UI를 노출할 수 있었습니다.
Card width에 따라 description 노출여부가 결정되어야 했습니다. 접혔을 때는 아래로 내리고, 펼쳐젔을 때는 원위치에 위치하여 icon 크기를 유지할 수 있었습니다.
또한 description 문구가 길경우 말줄임을 text-overflow, -webkit-line-clamp, -webkit-box-orient, overflow 조합으로 해결 할 수 있었습니다.
- 4개의 이미지가 있고 활성화 되어 있는 것만 펼처서 보여지고 나머지는 접혀있습니다.
- 4개 중 하나를 선택하면 펼쳐지고 나머지는 접힙니다.
git clone https://github.com/insidedw/card-animation.git을 이용해 저장소를 클론합니다.- 프로젝트 디렉토리로 이동합니다.
- 종속성을 설치합니다:
npm install
- 프로젝트를 시작합니다:
npm start - 브라우저에서
http://localhost:3000(또는 지정한 포트)로 프로젝트를 엽니다.
특정 파일을 편집하여 애니메이션 효과나 설정을 변경할 수 있습니다.
이 프로젝트는 MIT 라이센스를 따릅니다.
프로젝트에 관련된 정보들을 위의 템플릿에 맞춰 채워넣으면서, 추가된 기능이나 변경된 내용, 사용법, 이미지 및 링크를 제공해주세요.