잘나가는 블로그

장면 1: 프로그래머인 주인공 이민재는 책상에 앉아 HTML과 CSS 파일을 작성하고 있었다. 그의 눈은 화면에 떠오른 각 요소의 조화로움에 매료되었다. 그러나 예상치 못한 문제가 발생했다. "왜 안 되는 거지?" 이민재는 속으로 중얼거렸다. 화면을 살펴보고 다시 코드를 살펴보았지만, 오류는 잡히지 않았다. 그때, 동료 개발자인 박지훈이 다가와서 물었다. "어떤 문제야?" 이민재는 고개를 끄덕였다. "이건 좀 이상해. 내가 스타일을 적용하려고 하는데, 왜 일부 요소들이 제대로 작동하지 않는 걸까?" 박지훈은 웃으며 이야기했다. "CSS를 다루는 것은 예술이야. 때로는 예상치 못한 결과가 나올 수 있어." [HTML 소스코드] Click me [CSS 소스코드] .button { width: 100px; ..

애니메이션 사용하기 @keyframes웹사이트에서 애니메이션 만드는 방법은 자바스크립트로 제작을 많이들 하시는데요.오늘은 CSS를 이용해서 애니메이션을 구현하는걸 설명드리겠습니다.우선 동영상을 보면서 애니메이션 동작 설명부터 하겠습니다. 동영상을 보시면 비쥬얼 이미지가 위 아래로 이동되는 애니메이션 효과가 있는데요.자바스크립트로도 구현이 가능하나 CSS를 이용하면 보다 적은 코드로 가능하다는걸 알 수 있습니다. 방법은 CSS animation 속성과 @keyframes 함수를 이용하는것인데요. animation 속성의 하위 속성은 다음과 같습니다.animation-delay엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정합니다.animation-direction애니메이션이 종료되고 다시 처음부터 ..