잡코리아의 러닝맨 (css, image icon set)

 

문득 잡코리아 보는데 눈에 잘 안띄다가

 

열심히 달리는 녀석을 보니 어떻게 개발했을까 궁금해서 개발자 도구를 열어 간단하게 열어봤다.

 

GIF 로 구현한건가? 싶기도 해서.

 

당근마켓의 직급별 러닝맨

 

hover 처리

 

 

스타일을 보아하니 순수 CSS 처리가 아닌 Javascript 를 이용한 Style 업데이트 + icon set 활용으로 보인다.

element.class {
    background-position: -84px -37px;
    left: 56.19%;
    bottom: 0px;
}

icon set 은 모든 아이콘 이미지를 한번에 불러올 수 있는 장점이 있고,

 

background-position 으로 잘라서 쓸 수 있다. 단, 서로다른 크기의 이미지라면 위치를 세세하게 알고 있어야겠다.

 

잡코리아의 러닝맨 아이콘 셋

 

보통 2D 게임 캐릭터 이미지를 구현할 때 이런식으로 많이 쓰는데

 

아이디어는 괜찮은 것 같다.