HTML,CSS만으로 캐릭터를 만들 수 있다니

 

 

요며칠간 계속해서 HTML의 기본과 CSS 수업을 듣고 있는데 프로그래밍 언어보다는 마크업 언어가 그래도 배우기 좀더 수월할거라고 생각했던 과거의 오만했던 나 자신을 반성 중이다ㅎ 

 

오늘 한 과제 : HTML,CSS로 캐릭터 만들어보기

강사님이 며칠 전에 강사님 회사의 마스코트 캐릭터 이미지를 보여주면서 '여러분들도 다 만들거에요' 하시길래 에이 저걸 어떻게 만들어 그림판으로 이미지를 만드는건가 싶었는데 세상에

HTML, CSS로 만든거라고 했다

 

 

그리고 오늘, 정말로 HTML, CSS 만으로 캐릭터를 만들었다

 

 

오늘 배운 CSS 속성

• box model
• border-radius
• font library, font icon library 이용하여 font, icon 적용해보기
• position
• transform
• float

 

CSS의 주요 속성들을 꽤 많이 배운것 같다

 

그리고 오늘까지 배운 내용을 활용하여 자신만의 캐릭터를 만드는 과제를 했다

 

 

 

결과물

                  내가 만들려고 한 것                                                                             내가 만든 것

사진출처: https://www.pushsquare.com/guides/kena-bridge-of-spirits-all-rot-locations

 

 

ㅋ큐ㅠㅠㅠ

아니 유튜브 보다가 어떤 게임 영상을 보게 됐는데 저 캐릭터가 너무너무 귀여운거다

저 캐릭터가 게임 속 크리쳐인데 진짜 너무너무 귀여워 죽을거 가틈

너무 귀여워서 아 저걸 만들어야지...! 했는데

귀엽고 사랑스러운 크리쳐가 내 손을 거치니 그냥 크리쳐가 됨 퓨ㅠㅠ

 

 

 

 

 

 

 

놀란 표정으로도 만들었다

 

 

약간 나뭇잎 얹은 안드로이드 같기도 하고 ㅋㅋ

다 만들고 나서 그럭저럭 뿌듯한 느낌은 들긴했는데 뭔가 생각하고 있던 걸 좀더 명확하게 못 그려내서 아쉽

 

 

 

만들때는 '진짜 html, css만으로 캐릭터를 그릴수 있다고?' 싶었는데 해보니깐 만들 수 있긴 있더라

 

 

position: relative;

오늘 과제의 핵심이 아닐까 생각한다

 

 

 

코딩하다가 relative가 안먹길래 왜 안먹는거지?! 하고 구글링해보고 다시 내 코드를 보니 position: relative 를 display: relative 라고 쓰는 어처구니 없는 실수를 했다 그래놓고선 왜 안먹는지 한참 찾고 있었다 나참...

내 주니어 개발자로서의 앞날이 어떨지 매우 훤히 보이는 듯 ㅎㅎㅎ

 

 

어찌됐든 코딩을 자주 해보는 게 답인것 같다

그리고 결과물까지 다 만든 후에는 코드 다시 보면서 좀더 깔끔하게 쓸 수 없는지 확인하면서 클린코드 짜는 연습을 좀 해야겠다