분류 전체보기 (484) 썸네일형 리스트형 Editors - Shortcuts (IntelliJ, VS Code) When coding, most developers use editors such as VS, and IntelliJ because of the efficiency thanks to many features that an editor provides that can reduce repetitive work. In this post, I would like to introduce some of the shortcuts for features of the editors as knowing many shortcuts for features can boost efficiency one more level.List of Contents" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 .. 편집기 단축키들 (IntelliJ, VS Code) 코드를 짤 때 대부분 개발자들이 VS, IntelliJ 등 편집기를 사용합니다. 이유는 편집기가 가진 다양한 기능을 통해 중복작업을 줄이고 작업효율을 향상하는 것이 가능하기 때문입니다. 편집기가 가진 기능은 사용빈도가 높기 때문에 단축키를 알아두면 더욱 효율적인 작업이 가능하므로 오늘은 각종 편집기에서 어떤 단축키를 통해 어떤 기능을 사용가능한지 살펴볼까 합니다. 목차" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 IntelliJ 검색 폴더구조 코드작성 리팩토링 VS Code .. Canvas - Dynamic Sizing While the width and height of a canvas element are relevant to the pixel, the width and height of the CSS are relevant to the size of the element that the size is applied to. For this reason, it is not a good practice to set the size of a canvas element with CSS as we would do with normal elements, if not possible, and it is better to rely on the element itself or JavaScript. With that being sai.. Deprecated When writing a code it is often that you see the message 'Deprecated'. Deprecated codes are the codes that are being replaced by updated or new codes that do the same function in a better way. Deprecated codes are meant to be replaced completely at some point but until then the codes work as normal. Given that it lives on a dead sentence it is recommended to use updated or new codes whenever pos.. Canvas The HTML element provides various features such as drawing shapes and animations that can be used to create games and other applications. In this writing, we will see some of its attributes and how to use them and I will also introduce some useful tricks when working with the canvas such as dynamic sizing and the drawing application made with the canvas. HTML 삽입 미리보기할 수 없는 소스 Drag and Drop Let's see how we can implement drag and drop using JavaScript Set Up In the HTML file, add the draggable="true" to the element you want to drag and drop. Add styles /* main.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: flex; align-items: center; justify-content: center; gap: 10px; } .img-box { height: 200px; width: 200px; border: solid 3px #000; borde.. JavaScript Module - Button Ripple Effect Let's see how we can create a button ripple effect. The completed code looks like the one below. I have used the coordinates and the click event to implement this. // wave-module.js export function createEffect() { const btn = document.querySelector('button') const rippleEl = document.querySelector('.ripple') btn.addEventListener('click', (e) => { rippleEl.classList.add('clicked') rippleEl.style.. 자바스크립트 모듈 - 버튼물결 자바스크립트로 버튼 클릭 물결효과 모듈을 만들어 보았습니다. 완성된 물결효과 코드는 아래와 같은데요. 요소의 위치와 클릭이벤트를 사용하여 효과를 적용하는 방식입니다. // wave-module.js export function createEffect() { const btn = document.querySelector('button') const rippleEl = document.querySelector('.ripple') btn.addEventListener('click', (e) => { rippleEl.classList.add('clicked') rippleEl.style.left = `${e.clientX - e.target.getBoundingClientRect().x}px` rippleEl... 이전 1 ··· 7 8 9 10 11 12 13 ··· 61 다음
