김평범's OrdinaryCode

Animation.css npm으로 간단히 설치가 가능하며 설치된 이후 해당 css를 CDN혹은 파일로 import 해놓으면 class 를 통해서 Animation을 이용할 수 있다. 위 사이트에서 실제로 제공되는 애니메이션 효과도 모두 확인해볼 수 있다. 간단하지만 매우 강력한 라이브러리 https://animate.style/ Animate.css | A cross-browser library of CSS animations. Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-..

웹사이트를 구성하다 보면 로딩 바가 은근 많이 사용된다! 보통 css, Javascript로 만들기도 하지만 HTML만으로도 Process bar를 만들 수 있다고 한다. 🌖HTML progress tag html에서 이용하는 progress tag는 로딩바 형태의 UI를 생성해준다. 안에 들어가는 속성은 아래와 같다. value : 실제 값 min: progress의 최소값 max: progress의 최댓값 progress tag를 이용하면 아래와 같은 UI가 생성된다. sample code 진행상항 실제로 0부터 100 사이의 중간인 50%까지 파란색이 차있는 것을 볼 수 있다. 🎨HTML Progress CSS 적용하기 기본적으로 제공하는 UI는 실제로 만들 화면상에 어울리지 않을 가능성이 높아서 ..