Dev/NPM
-
Progress bar 라이브러리 추천 - @frogress/lineDev/NPM 2023. 6. 6. 19:05
HTML에서 진행바(progress bar)를 만들려면 아래의 코드를 사용한다. 혹시나 커스터마이징 하는 방법이 궁금할 수 있으니 아래에 링크를 걸어두겠다. 하지만, progress tag를 사용하면 두 가지의 문제점이 있다. 첫 번째로 진행바의 백그라운드를 둥근형태로 구현했을 때, 0 ~ 1%의 진행을 나타내야 할 경우이다. 이 경우에는 progress의 진행바가 네모난 백그라운드 기준으로 퍼센트가 차기때문에 UI가 둥근 막대기를 벗어나게 된다. (따로 진행 너비를 스타일링해주어야 한다.) 두 번째로 진행 정도에 그라디언트를 넣는 경우이다. 진행 너비에 따른 그라디언트가 들어가기 때문에 너비가 작은 경우 그라디언트가 자연스럽지 않고, 찌그러져 보인다. 특히, 둥근 형태의 진행바를 구현할 때에는 더욱 심..
-
Alert창 이쁜 라이브러리 추천 - SweetAlert2Dev/NPM 2023. 5. 20. 21:57
웹 개발을 하다 보면 사용자에게 알림 창으로 필요한 정보를 알려줘야 할 경우가 자주 발생한다. 그래서 보통은 이러한 alert창이나 modal을 이쁘게 디자인하여 사용자에게 보여준다. 디자인 및 기능구현에 있어 생각보다 시간이 소요되는데 간편하고 이쁜 alert 라이브러리를 알게 되었다. 심플하게 사용할 수 있으면서 엄청 이쁘다! 심지어 애니메이션도 구성할 수 있다! 공식문서를 보면 테마도 추가할 수 있다. 최신 업데이트도 빠른 거 같고 매달 다운로드 수도 200만이 넘어간다. 공식문서도 엄청 이쁘고 설명을 잘 써놨으므로 꼭 공식문서를 보는 것을 추천한다. 아래는 유명한 블로그에서 예시를 만들어놔서 가져와보았다. 꼭 이 분 블로그 들어가보시길! SweetAlert2 Using sweetalert2... ..