css를 이용한 progressbar 키프레임 애니메이션을 이용하여 길이속성으로 css 효과를 준다. 검정바탕이 전체이며 붉은 색이 시간에 따라 애니메이션 효과로 줄어든다. HTML CSS .progress { position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; height: 80px; background-color: #000; } .progress .bar { position: absolute; top: 2px; left: 2px; width: calc(100% - 4px); height: calc(100% - 4px); background-color: #ff0b7b; transform-origin: left; animation: scal..

https://jsfiddle.net/n6fug4ac/ Edit fiddle - JSFiddle jsfiddle.net css와 이미지를 이용하여 웨이브 효과 애니메이션 출처 : https://www.modoogong.com/promotion/ROCKETPASS

https://violetboralee.medium.com/vscode%EC%97%90%EC%84%9C-bracket-pair-colorizer-%EC%82%AD%EC%A0%9C%ED%95%98%EA%B3%A0-%EB%82%B4%EC%9E%A5-%EA%B8%B0%EB%8A%A5-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-e75558a87990

//실제 파일 첨부 기능 //사용자에게 보여지는 첨부하기 label { position: relative; display: block; height: 60px; cursor: pointer; } .file_real { position: absolute; top: 0; left: 0; z-index: -1; opacity: 0; width: 0; height: 0; } .file_fake { position: absolute; top: 0; left: 0; z-index: 2; padding: 0 calc(134px + 37px) 0 37px; width: 100%; height: 100%; font-size: 16px; border: 2px solid #111; border-radius: 30px; po..

사이트 설계 할 때 부족한 컨텐츠로 footer가 올라와 여백이 보이는 경우가 있는데 이때 display flex 속성을 이용하여 브라우저 화면하단에 footer를 붙이도록 해본다 . 헤더 메인 푸터 #wrap { display: flex; flex-direction: column; min-height: 100vh; } #header { flex: 0 0 auto; } #main { flex: 1 1 auto; } #footer { flex: 0 0 auto; } .item{ flex: 1 1 auto /* 증가너비 감소너비 기본너비 */ } 이런 코드블럭 테마가 이쁘지 않다 ... 나중에 수정해야겠따 . 참고 https://heropy.blog/2018/11/24/css-flexible-box/ htt..

이전에 vue를 공부하면서 정리했던 자료로 글쓰기 1. vscode 확장프로그램 설치 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com 필수는 아니지만 vue 개발하면서 유용할 플러그인을 설치해준다..

https://taeho.io/pages/5d36a0ef-1e17-4957-b075-b5df5ffd9436 💪🏻 개발자 협업 역량의 핵심 - "업무가시성" 이 글은 뱅크샐러드에서 3개월의 수습 기간을 성공적으로 마치고 소프트웨어 엔지니어로 인생 첫 커리어를 시작하는 분에게 드렸던 업무가시성 확보의 중요성 강의 요약입니다. 코딩이나 설계 taeho.io https://blog.banksalad.com/tech/we-work-by-tech-spec/ 뱅크샐러드의 특별한 스펙, '테크 스펙' | 뱅크샐러드 … blog.banksalad.com https://eng.lyft.com/awesome-tech-specs-86eea8e45bb9 How to Write Awesome Tech Specs Tech spec..

https://www.surfit.io/ 서핏 - 매일 성장하는 사람들의 커리어 지식 플랫폼 새 탭에서 펼쳐지는 맞춤 커리어 콘텐츠. 매일 성장하고 더 멋지게 일하세요! www.surfit.io 우연히 서치로 알게 된 후 자주 애용하는 기본 화면이 되었다 기획, 디자인, 개발, 마케팅까지 다양한 분야에서 이야기들을 한 곳에 모아 편리하다.