제 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 구현까지 하셨다.. 난 아직 갈 길이 멀지만 조급해 하지말고, 꾸준히 나만의 학습 속도와 리듬으로 진득하게 나아가기...! 💪🏻