목록PRACTICE/REVERSE-ENGINEERING (21)
whatisthis?
index.html undo redo pencil app.js (function($) { var tool; var canvas = $('paint'); var ctx = canvas.getContext('2d'); var history = { redo_list: [], undo_list: [], saveState: function(canvas, list, keep_redo) { keep_redo = keep_redo || false; if(!keep_redo) { this.redo_list = []; } (list || this.undo_list).push(canvas.toDataURL()); }, undo: function(canvas, ctx) { this.restoreState(canvas, ctx..
https://mywebproject.tistory.com/130 HTML 훈련 - (14) Video Player Video Player REFERENCE (style.css) https://github.com/rohjs/bugless-101/tree/master/html-practice/14-video-player 김버그의 HTML&CSS는 재밌다 - 구름EDU HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까.. mywebproject.tistory.com @import url(https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css); * { margin: 0; box-sizing: border-box; } html { font-famil..
https://mywebproject.tistory.com/124 HTML 훈련 - (13) Music Player Music Player REFERENCE (style.css / app.js) https://github.com/rohjs/bugless-101/tree/master/html-practice/13-music-player 김버그의 HTML&CSS는 재밌다 - 구름EDU HTML&CSS를 한번에! 탄탄한 개념이해.. mywebproject.tistory.com var musicPlayItems = document.querySelectorAll(".music-play-item") musicPlayItems.forEach(function(item) { item.isPlaying = false it..
https://mywebproject.tistory.com/122 HTML 훈련 - (12) Gmail Inbox Gmail Inbox REFERENCE (style.css / app.js) https://github.com/rohjs/bugless-101/tree/master/html-practice/12-gmail-inbox 김버그의 HTML&CSS는 재밌다 - 구름EDU HTML&CSS를 한번에! 탄탄한 개념이해부터.. mywebproject.tistory.com var inboxCheckboxes = document.querySelectorAll(".inbox-checkbox") var inboxStars = document.querySelectorAll(".inbox-star") inboxChe..
https://mywebproject.tistory.com/122 HTML 훈련 - (12) Gmail Inbox Gmail Inbox REFERENCE (style.css / app.js) https://github.com/rohjs/bugless-101/tree/master/html-practice/12-gmail-inbox 김버그의 HTML&CSS는 재밌다 - 구름EDU HTML&CSS를 한번에! 탄탄한 개념이해부터.. mywebproject.tistory.com * { margin: 0; box-sizing: border-box; } html { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, C..
https://mywebproject.tistory.com/118 var followButton = document.querySelector(".feed-user-profile button") var likeButton = document.querySelector(".feed-footer button:first-child") var commentButton = document.querySelector(".feed-footer button:last-child") var feedComment = document.querySelector(".feed-comment") followButton.addEventListener("click", function() { if (this.following) { this.i..
https://mywebproject.tistory.com/118 HTML 훈련 - (11) Feed https://user-images.githubusercontent.com/19285811/69063907-43da4800-0a58-11ea-8efb-4b57dca4e3fe.png The most beautiful experience we can have is the mysterious. It is the fundamental emotion that s.. mywebproject.tistory.com * { margin: 0; box-sizing: border-box; } html { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,..
https://mywebproject.tistory.com/116 @import url("https://fonts.googleapis.com/css?family=Nunito+Sans:400,600&display=swap"); * { margin: 0; box-sizing: border-box; } html { font-family: "Nunito Sans", sans-serif; font-size: 16px; line-height: 1.5; color: #1f2d3d; } body { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100vh; margin: 0 a..
https://mywebproject.tistory.com/107 HTML 훈련 - (9)GitHub Dropdown Menu GitHub Dropdown Menu REFERENCE (style.css / app.js) https://github.com/rohjs/bugless-101/tree/master/html-practice/09-github-dropdown-menu 김버그의 HTML&CSS는 재밌다 - 구름EDU HTML&CSS를 한번에!.. mywebproject.tistory.com var dropdownMenu = document.querySelector(".dropdown-menu") var dropdownButton = document.querySelector(".dropdown-butt..
https://mywebproject.tistory.com/107 HTML 훈련 - (9)GitHub Dropdown Menu GitHub Dropdown Menu REFERENCE (style.css / app.js) https://github.com/rohjs/bugless-101/tree/master/html-practice/09-github-dropdown-menu 김버그의 HTML&CSS는 재밌다 - 구름EDU HTML&CSS를 한번에!.. mywebproject.tistory.com * { margin: 0; box-sizing: border-box; } html { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxy..