Mini Projects (66) 썸네일형 리스트형 Infinite Scroll (1) Loader with HTML and CSS (bounce animation) 이 포스트는 Udemy 20 Web Projects With Vanila Javascript 보고 정리하는 내용입니다 https://www.udemy.com/course/web-projects-with-vanilla-javascript/ 20 Web Projects With Vanilla JavaScript Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript (No frameworks or libraries) www.udemy.com 로딩할 때 움직이는 점 3개 다른 이미지 파일 사용하지 않고 HTML, CSS로만 만들기 1. HTML 2. CSS .loader { opacity: 0; display: flex; positi.. Custom Music Player (5) 음악 progress bar 이 포스트는 Udemy 20 Web Projects With Vanila Javascript 보고 정리하는 내용입니다 https://www.udemy.com/course/web-projects-with-vanilla-javascript/ 20 Web Projects With Vanilla JavaScript Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript (No frameworks or libraries) www.udemy.com /* progress */ .progress-container { background: #fff; height: 4px; width: 100%; border-radius: 5px; margin:.. Custom Music Player (4) music-info (transition 여러개) 이 포스트는 Udemy 20 Web Projects With Vanila Javascript 보고 정리하는 내용입니다 https://www.udemy.com/course/web-projects-with-vanilla-javascript/ 20 Web Projects With Vanilla JavaScript Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript (No frameworks or libraries) www.udemy.com /* Music-info */ .music-info { background-color: rgba(255, 255, 255, 0.5); padding: 10px 10px 10px 150px; bo.. Custom Music Player (3) CSS 이미지 위치, rotate 이 포스트는 Udemy 20 Web Projects With Vanila Javascript 보고 정리하는 내용입니다 https://www.udemy.com/course/web-projects-with-vanilla-javascript/ 20 Web Projects With Vanilla JavaScript Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript (No frameworks or libraries) www.udemy.com /* Image */ .img-container { position: relative; width: 110px; } .img-container img { width: 110px; height: .. Custom Music Player (2) CSS 배경색 그라디에이션 이 포스트는 Udemy 20 Web Projects With Vanila Javascript 보고 정리하는 내용입니다 https://www.udemy.com/course/web-projects-with-vanilla-javascript/ 20 Web Projects With Vanilla JavaScript Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript (No frameworks or libraries) www.udemy.com body{ background-image: linear-gradient( 0deg, rgba(247, 247, 247, 1) 23.8%, rgba(252, 221, 221, 1) 92% ); } Expense Tracker (1) div 중간 선 일단 지금은 여기까지 만들었다 ㅋㅋㅋ 몇가지 내용들을 정리해야할 것 같아서 포스트를 써봄봄봄.. 저기 income과 expense total 상자 정중앙에 라인을 어떻게 넣었냐 하면.. 우선 HTML Income +$0.00 Expense -$0.00 바깥에 in-ex-total로 둘러싸고 income-container 하나와 expense-container 하나가 있다 (지금 생각해보니 굳이 둘의 class를 다르게 할 필요는 없었던 것 같다.......................................) 무튼 in-ex-total 속 이 두 div가 정확히 반반씩 너비를 차지하고 중간에 border 선을 넣어서 구획을 주고 싶다 ! .in-ex-total { background: #fff; w.. Meal Finder (2) - Show Single Meal Page 이 포스트는 udemy.com 20 Web Projects With Vanilla JavaScript 강의를 보고 정리한 내용입니다. https://www.udemy.com/course/web-projects-with-vanilla-javascript/ 20 Web Projects With Vanilla JavaScript Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript (No frameworks or libraries) www.udemy.com 만드려는 것: 원하는 음식을 클릭했을 때 화면에 원하는 음식 사진과 함께 요리법, 재료들이 나오게. API를 통해 음식을 받아올 때, 음식마다 id가 있었다. 이 음식 id를 m.. Meal Finder (1) Search & Display Meals from API 이 포스트는 udemy.com 20 Web Projects With Vanilla JavaScript 강의를 보고 정리한 내용입니다. https://www.udemy.com/course/web-projects-with-vanilla-javascript/ 20 Web Projects With Vanilla JavaScript Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript (No frameworks or libraries) www.udemy.com 사용한 API https://www.themealdb.com/api.php TheMealDB.com www.themealdb.com submit.addEventListener('.. 이전 1 2 3 4 5 ··· 9 다음
