기본 제작 See the Pen Untitled by seongtae (@stae1102) on CodePen. 위처럼 기본적으로 3개의 도형이 움직이는 아티클을 만들고, 마우스를 올렸을 때 색상을 부여하는 방식의 디자인이다. 1. HTML Heading Text Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias qui aperiam ducimus omnis enim. Consequuntur esse quisquam laborum aspernatur, officiis ipsum fugit optio et hic suscipit ipsam veritatis vero consectetur. Read More HTML 구조는 아래와 같다. └ di..
animation
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..
