나만의 캐릭터 만들기 과제

제 1회 자신만의 캐릭터 그리기 경진대회

강사님께서 '나만의 캐릭터 만들기 경진대회'를 개최하셨다. 수업에서 배웠던 CSS 이론 지식을 총동원해서 어쨋든 결과물을 만들어내야 하는건데 난 학습 진도가 느려서 이제와서 완성해보았다...

디자인쪽에 소질이 없는 난.. 곰을 그리고 싶었는데, 그냥 라이언이 되버린 느낌이랄까...? 😥

캐릭터명은 '샤이베어🐻' 인데, 막상 결과물을 보니까 정말 이름대로 부끄러워진다... 앞으로 더 디자인 감각과 실력을 올려야지..

🎈미션 : 기존에 없는 나만의 캐릭터를 CSS로 구현해서 만들기

📝과제 : https://bighuni.github.io/front-end-school/Assignment/211104_Character/

---

[회고]

• 먼저, html 구성에서 전체를 포괄하는 클래스명은 shybear
• 하부 클래스로 face, ear, eye, nose, flush, mouth
• content로 <h1> 와 <p>로 내용을 기입
• body의 백그라운드 색으로 캐릭터를 돋보이고, 조금 귀엽게 보이고 싶어서 틸그린(#008080) 느낌의 색상을 고름
• shybear 클래스만 position을 relative로 두고, 나머지는 모두 absolute
• top, left, width, height의 값을 수시로 변경 및 조절하면서 감각을 어느 정도 익힘
• 처음에는 선, 도형이 겹쳐지는걸 어떻게 조절할지 몰랐는데, z-index로 우선순위를 둬서 바꾸면 된다는 것을 알게됨
• border-radius 값을 조절하면서 원하는 모양의 원으로 깎아내리는데 시간을 많이 소비함
• transform: rotate(10deg); 으로 눈썹의 기울기 조정
• text-align: center; 로 텍스트 중앙 정렬
• font-family: "IM_Hyemin-Bold";로 h1태그와 p태그 내용 폰트 설정
• 마지막은 hover로 포인팅 기울기 장치 설정

 

다른 미래님들 만드신 작품들 보니까 음영도 넣으시고, 3D 구현까지 하셨다.. 난 아직 갈 길이 멀지만 조급해 하지말고, 꾸준히 나만의 학습 속도와 리듬으로 진득하게 나아가기...! 💪🏻