전체 글 (15) 썸네일형 리스트형 [javascript] for와 forEach의 차이, forEach에서 비동기 처리 하는 방법 자바스크립트를 처음 공부하다 보면 이런 난관에 빠지게 된다. 아래 코드는 비동기함수를 이용해서 arr 배열에 값을 넣는 코드이다. 비동기 함수를 사용하고 있기에 async, await를 사용해서 제대로 arr 배열에 값이 들어가도록 하고 있다. const a = new Array(10).fill(1) const arr = [] const asyncFunction = (i) => { return new Promise(resolve => { setTimeout(() => { arr.push(i) resolve() }, 100); }) } (async() => { for (let i = 0; i < a.length; i++) { await asyncFunction(i) } console.log(arr) })(.. [HTML5, CSS3] input checkbox 스타일 설정하기 checkbox를 스타일해보자 기본적인 input checkbox 로는 이렇게 원하는대로 스타일링을 할 수 없다. 그렇다고 기본 input 태그를 이용하자니 너무 안 이쁘기도 하고, 브라우저마다 제공하는 기본 체크박스 모양이 달라 UX에도 좋지 않다. 기본 checkbox를 사용하는 대신에 input 태그를 숨기고 label 태그를 이용해 스타일링을 하면 된다. 먼저 html을 이렇게 설정하자 클릭 여기서 input 태그의 id 속성 값과 label의 for 속성의 값이 일치해야 한다. 해당 값이 일치해야 label 태그를 클릭했을 때 input 태그도 같이 선택된다. 다음 css를 통해 input 태그를 숨기고 label class="btn" 값을 스타일링 하면 된다. .input-area { posi.. 토스 텍스트 필드 효과 따라하기(UI/UX) 얼마 전에 토스 앱을 사용하던 중 토스의 UI가 너무나 디테일하고 아름답다는 사실을 발견해버렸는데요. 평소에 UI/UX 디자인을 공부하고 싶다는 생각도 들고, UI에 멋진 인터렉션을 걸고 싶다는 생각을 하던 중이어서 이렇게 아름다운 디자인을 조금씩 따라 해 봐야겠습니다. 하나하나씩 만들어가며 조금씩 배워간다면 나중에는 멋진 인터렉션도 잘 만들 수 있는 개발자가 되지 않을까 싶어서.. 티끌 모아 태산이니 하나씩 조금씩 모아보자. 목표 input 영역을 클릭 시 해당 placeholder가 상단으로 움직이며 input 박스에 커서가 올라가는 형태. 간단한 UI이지만 기존 placeholder만 들어있는 input 태그보다는 훨씬 사용자가 봤을 때 디자인적으로나 경험적으로나 좋은 디자인인 것 같다. html .. input 태그 image를 base64 형식으로 변경하기 원하는 작업 형식 여기서 image를 base64 형식으로 변경하고 img 태그로 미리보는 과정을 찾아봤다. 완성된 코드만 볼 예정이면 맨 아래 코드만 보면 됩니다 먼저 html과 css의 구조는 이러함 body, html { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } div { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #f2f2f2; } img { min-width: 400px; max-width: 600px; min-height: 200px;.. canvas 마우스 클릭으로 선 그리기 문제가 있을 시 알려주시면 감사하겠습니다. html css html, body {width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;} canvas {width: 100%; height: 100%; background: #f2f2f2;} javascript app.js (module) import { Line } from "./line.js"; class App { constructor () { this.canvas = document.createElement('canvas'); document.body.appendChild(this.canvas); this.ctx = this.canvas.getContext('2d'); this.pix.. canvas 마우스를 따라다니는 원 문제가 있을 시 알려주시면 감사하겠습니다. html css html, body {width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;} canvas {background: #00c3ff; width: 100%; height: 100%;} javascript app.js (module) import { Bubble } from './bubble.js'; class App { constructor () { // init canvas this.canvas = document.createElement('canvas'); document.body.appendChild(this.canvas); this.ctx = this.canvas.getCont.. canvas 마우스 클릭시 해당 좌표로 원 이동 문제가 있을 시 알려주시면 감사하겠습니다. html css html, body {width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;} canvas {background: #00c3ff; width: 100%; height: 100%;} javascript app.js (module) import { Bubble } from './bubble.js'; class App { constructor () { // init canvas this.canvas = document.createElement('canvas'); document.body.appendChild(this.canvas); this.ctx = this.canvas.getCont.. 이전 1 2 다음
