animation-name
-
<HTML/CSS> Animation 기초 : 요소 움직이기컴퓨터 알아가기/HTML CSS 2022. 9. 19. 19:30
CSS에서 애니메이션 기초는 Rock's EasyWeb을 기본으로 공부하고 있습니다. Transition의 기본 개념을 이해 하였으니 좀 더 시각적으로 효과적인 Animation 기초를 공부할 필요성을 느꼈습니다. 정말 공부를 하고자 하면 할 내용이 참 많군요. Animation을 공부할 포인트는 어떤 요소를 화면에서 움직이게 하는 기본형태를 공부할 예정인데 다음 순서대로 CSS를 공부해 보고자 합니다. ① 하나의 요소의 색을 변하게 ② 애니메이션 효과를 통하여 요소를 움직이게 ③ 움직이는 요소의 색이 변하게 우선 첫번째 과제를 위하여 기본적인 네모난 요소를 만드는데 HTML상 class명이 square인 태그 기준으로 진행하고자 합니다. 1. 하나의 요소의 색을 변하게 첫번째로 화면에서 빨간 사각형이 ..
-
CSS 움직이는 공 만들기 (상하좌우 움직이는 공)컴퓨터 알아가기/HTML CSS 2022. 5. 4. 19:30
이제는 재미로 공이 바닥에 튕겼다가 다시 중력에 의해 내려오는 모양을 만들어 보려고 합니다. 이를 응용하여 최종 로또추첨기에서 뽑혀지는 총 7개의 공이 움직이면서 1초의 간격을 두고 나타날 수 있게 해보는게 목적입니다. VS Code 편집기를 이용하여 연습해 보도록 하겠습니다. 기본적인 HTML과 CSS가 필요하겠죠. 1. 기본 HTML 포맷만들기 아래 그림과 같이 기본 포맷안에 CSS연결과 JS연결할 경로를 세팅해 줍니다. 이럴경우 태그내 태그의 id를 활용하도록 합니다. 태그는 다음과 같이 간단합니다. 물론 자바스크립트에서는 태그를 선택해야 겠지요. 2. CSS 꾸미기 여기서는 색을 직접 반영하여 진행하며 원의 크기도 지정합니다. 순서는 색, 원모양 만들기, 애니메이션 적용 스킴을 id내에 지정해 주..