멋쟁이 사자처럼 <CSS>로 캐릭터 만들기 수상!

---

 

 

수업 중에 배운 HTML과 CSS를 이용해서 코딩으로 캐릭터 만들기!

 

 

 

---

 

 

 

 

 5일 차 때 했던 대회인데 사정이 있어 조금 늦게 포스팅하게 되었다. 기본적인 내용은 제목에 적혀 있듯이 배운 내용을 바탕으로 캐릭터를 그리는 거다. 나는 코딩으로 그림을 그릴 수 있다는 사실도 이번에 처음 알았고 생각보다 엄청나게 많은 것을 할 수 있다는 것도 알게 되었다.(실력이 좋다는 전제하에)

 

일단 HTML 으로 마크업 구조를 먼저 생각하고 진행했는데 다른 분들은 <section> <header> <footer> 등으로 그 안에서도 나름 시멘틱 하게 구성하려고 노력하신 거 같다. 근데 나는 그림인데 어떤 태그가 맞는지 잘 떠오르지 않아 <div>의 클래스만 주어서 만들었다. (한참 멀었다)

 

아래는 마크업 코드

 

<div class="face">
    <div class="brows-left"></div>
    <div class="brows-right"></div>
    <div class="eye-left"></div>
    <div class="eye-right"></div>
    <div class="nose-left"></div>
    <div class="nose-right"></div>
    <div class="teeth"></div>
    <div class="mouse"></div>
    <div class="make-left"></div>
    <div class="make-right"></div>
  </div> 
    <div class="ear-left"></div>
    <div class="ear-right"></div>     
  <div class="shadow"></div>

 

보는거처럼 아주 단순하다 얼굴 부분에는 눈코입 눈썹 메이크업 그리고 귀와 그림자는 밖에 부분이라 밖으로 빼서 작업을 하였다.

 

근데 문제는 CSS인데 기술이 좋은 만큼 그림이 생각한 데로 나오기 마련인데 필압의 강약은 어떻게 해야 하고 어떻게 해야 붙고 지워지는 를 구상하기가 너무 힘들어서 아는 한도 안에서 최대한 단순하게 작업했던 거 같다.

 

 

 

우수상!!!!

 

 

 

 

그래도 무려 우수상을 받았고 상장까지 나와서 기분이 너무 좋았다. 기술이 부족했지만 캐릭터 라는건 멋있는 거 보다는 색감이나 느낌 같은 게 더 중요하게 작용한 게 아닌가 싶다. 물론 최우수상이나 대상분들은 손으로 그리는 것보다 훨씬 이쁘게 잘 만들어서 너무 놀랐던 기억이 있다.

 

빨리 발전해서 다음에는 더 나은 기술로 원하는 결과물을 구현해 보고싶다.

 

 

 

완성된 결과물

 

 

Angry Rabbit

 

 

 

 

 

 

https://github.com/chry8822

chry8822 - Overview