See the Pen test1 by seongtae (@stae1102) on CodePen. 로딩 애니메이션 두 번째 입니다. 사각형이 각각 위치를 옮겨가며 색상을 바꿉니다. 여기서 사용하는 것은 position 속성과 background-color 속성입니다. 1. HTML 작성 HTML의 구조를 보면 └ div .loading ├ span └ span 이렇게 class가 "loading"인 div 태그 아래 자식으로 span 태그를 두 개 갖고 있습니다. div 태그는 두 개의 태그를 감싸고 포지션을 사용하기 위함입니다. 2. CSS 작성 2-1. 기본 구조 .loading { width: 100px; height: 100px; position: relative; } .loading span { ..
키프레임
See the Pen Untitled by seongtae (@stae1102) on CodePen. CSS에서 애니메이션을 배웠습니다. 로딩창에서 원의 크기가 개별적으로 달라지는 애니메이션을 구현하곤 합니다. 이를 구현하기 위해서는 가상클래스와 keyframes를 사용합니다. 먼저 html입니다. div 안에 span 태그를 3개 넣습니다. 이 span 태그가 원형 도형입니다. 그 다음 핵심인 CSS를 작성합니다. .loading span { display: inline-block; width: 15px; height: 15px; background-color: grey; border-radius: 50%; animation: loading 1s linear infinite; } display: inl..
