컨셉 : 머리, 몸통, 팔, 다리를 각각 element로 나누고, 구성은 앞면,뒷면,컨테이너 이렇게 3개로 구성되어 있으며, 전체 캐릭터를 감싸는 컨테이너에 position : relative을 주고, 각각의 몸 구성요소들에게 position : absolute를 주고, 배치를 하나하나 한다.

html

face : 면 ( backface, fronface )

각각의 face-front와 face-back 요소들을 position : absolute 를 줘서 두 요소를 포갠다.

<aside> 💡

몸의 5가지 요소를 비슷하게 구조를 짠다.

</aside>

5가지로 나눈이유 : 각각의 요소에 애니메이션이 들어가기 때문…. 각각 따로 움직이기 때문이다.

머리가 나눠져있는 모습.

머리,몸통,팔,다리를 캐릭터 컨테이너 기준으로 absolute로 배치해보자

1. 머리

top : 0 인데 left로는 얼마만큼 이동해야할지 calc() 함수를 사용해서 계산해줘야함. (%로 표현할 것)

.character-head {
    left: calc(42 / 856 * 100%);
    top: 0;
    z-index: 60;
		/* 머리길이 */
    width: calc(770 / 856 * 100%);
		/* 머리 높이 */
    height: calc(648 / 1334 * 100%);
		/* 흔들릴 방향 */
		transform-origin: center bottom;
}

42 / 856 은