[CSS] css로 춘식이 만들기

시작하며

라이언에 이어서 춘식이를 만들어보기로 했다.

라이언은 코드가 있었지만, 춘식이는 인터넷에 뿌려진 코드가 없었기 때문에 처음부터 끝까지 내가 직접 코드를 쳐서 구현했다.

---

춘식이를 만들 때 참고한 사진

1. 색상 뽑기

: 1차로 제작한 라이언 때와는 다르게 내가 처음부터 직접 제작을 해야했기 때문에 대상 분석을 꼼꼼히 진행했다.

하지만 위치는 라이언과 대략 비슷하다고 판단하여 빠른 제작을 위해 이 부분은 스킵했다.

https://imagecolorpicker.com/

👍 Color Picker online | HEX Color Picker | HTML Color Picker

춘식이 캐릭터의 색상 추출은 위 주소에서 간단하게 할 수 있었다.

 

2. 동글한 라이언과 다르게 타원형으로 이루어진 춘식이

: 춘식이의 얼굴과 눈, 코 등의 타원형을 맞추기 어려워서 시간이 오래 걸렸다. 결국 참고한 사진 속 춘식이와는 원의 모양이 다른 것 같지만 타협하기로 했다.

특히 춘식이의 얼굴형이 굉장히 까다로웠고 아래 코드로 얼추 비슷하게 구현시켰다.

border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y

 

3. 얼굴만큼 까다로웠던 하얀 코

춘식이 원본사진

: 라이언때도 하얀 수염부분이 어려웠지만 춘식이는 2배로 어려웠던 것 같다.

정말 난해해 보이는 모형으로 춘식이를 만든 부분에서 제일 오래 걸렸던 부분이다.

1차로 타원형 두 개를 제작해 transform: rotate() 속성을 사용하여 춘식이 코의 모습과 비슷하게 만들었다.

이후 라이언때와 동일하게 before 속성을 사용해서 하얀 원형을 만들어 두 개의 타원형이 겹치면서 생긴 검은 선을 가려주었다.

하얀 코 완성!

 

4. z-index로 순서를 정하기 어려울 때

: 춘식이의 코부분에 수염 4개와 입, 볼터치 등이 많이 모여있는 구간이라 z-index를 사용하여 정리하기 까다로웠다.

이럴 경우 html에서 순서를 정리하면 쉽고 간편하게 원하는대로 정할 수 있다.

뷰포트에 html코드가 위에서부터 아래로 쌓이기 때문에 코드가 위에 있을수록 해당 코드로 구현된 이미지가 뷰포트 화면 가장 아래에 쌓여있고 코드 아래로 내려갈수록 처음 뷰포트에 쌓였던 이미지를 가리며 그 위에 차곡차곡 쌓이는 형태이다.

css로 춘식이 만들기 완성~!

---

마치며

동글동글하게 생긴 라이언에 비해 타원형으로 생긴 춘식이는 css로 구현하기가 생각보다 까다로웠다.

그래도 아무것도 보지않고 직접 이것저것 코드를 써가며 만들어보니 css에 어느정도 자신감이 붙었다.

결과물이 눈에 바로 보이는 코드작업은 언제나 재미있는 것 같다.