CSS Sprite 애니메이션

2020-01-03

CSS 애니메이션을 단계별로 끊어서 실행시키는 방법은 잘 알려져있지 않다. CSS 스프라이트 내의 이미지와 이미지 사이의 빈 공백은 보여주고 싶지 않으며 스프라이트 이미지를 하나의 프레임으로 취급해서 부드럽게 애니메이션을 적용할 수 있다. 위 사진을 보면 하나의 스프라이트 이미지 내의 이미지 사이사이가 키프레임에 포함되서 빈 공백 부분이 보여지는것을 알…

CSS 트랜지션과 애니메이션

2020-01-02

트랜지션의 특징 마우스를 올리기전엔 박스가 이런 모양이다. 마우스를 올리고난 후엔 박스가 커지며 백그라운드가 노란색으로 변경된다. 속성에 값이 변할때 동안 변화시키겠다를 지정했기 때문에 마우스를 올렸을때 부드럽게 변화한다. 만약에 값 뿐만아니라 div의 다른값이 변했을때도 애니메이션 효과를 주고 싶다면 대신 라고 지정하면 된다. 트랜지션을 트리거 …

반응형 웹 사이트 제작 - margin, padding을 rem이나 em단위로 설정하지 마라!

2019-12-25

크리스마스에 코딩하고 있는 내 인생이 레전드 같지만 오늘도 달린다.. 블로그를 만들면서 포스팅 목록을 보여주는 부분을 작업하고 있는데, 만들면서 보니 내가 반응형 처리에 미숙한 부분이 많다는걸 알게 되어서 다시 처음부터 공부하기 시작했다. 오늘 공부하면서 알게된것들을 정리한다. 😄 🙂 rem단위 사용해라, 그리고 font-size는 100%로 설정하라. …