minkyeongJ/makeCharacter

CSS로 캐릭터 만들기

🍍Pineapple Duck🦆

✨간단설명 : 파인애플을 너무 사랑한 나머지 머리에 쓰고다니는 "파인애플 오리"입니다!

✨프로젝트 목표

1. Figma로 직접 구상한 캐릭터를 HTML/CSS를 이용하여 코드로 구현합니다.
2. 애니메이션을 이용하여 캐릭터에 생동감을 더합니다.

✨사용언어

HTML/CSS

✨결과화면

링크에서 확인하기 👉 https://minkyeongj.github.io/makeCharacter/

✨만들면서 배운 점

1. Position 속성의 사용
2. Keyframes의 사용
3. Figma 사용
4. nth-of-type의 사용
5. 가운데 정렬

✨만들면서 생긴 고민

1. div를 이렇게 분류하는 것이 맞을까?
2. position:absolute 적용 시 내가 예상한 기준과 다른데 어떤 이유 때문일까?
3. 오리 눈 eyes-blue:hover시 eyes-blue본인과 그 자식요소 모두의 설정을 바꾸고 싶은데 어떻게 할 수 있을까?
4. CSS가 필요이상으로 길게 작성되지 않았나?

✨소감

그림으로 그리기만 가능했던 나만의 캐릭터를 코드를 이용해서 만들 수 있게되어 아주 뿌듯합니다! 앞으로 더 다양한 기능을 적용할 수 있도록하겠습니다.