728x90
728x90
canvas 태그는 HTML5에서 도입된 요소이다. 자바스크립트를 사용하여 동적으로 그래픽을 컨트롤할 수 있게 해준다. canvas 태그를 사용하면, 자바스크립트로 선, 도형, 이미지, 텍스트를 그리고 스타일을 지정할 수 있다. 프레임 기반 애니메이션 및 인터랙티브 기능(마우스 클릭, 키보드 입력 등)을 제공한다. 기본적인 사용법은 다음과 같다. 위와 같은 HTML 파일을 아래의 자바스크립트 코드로 조작한다. const canvas = document.getElementById("test-canvas"); const ctx = canvas.getContext("2d"); ctx.fillStyle = "#ccc"; // top left width height ctx.fillRect(10, 10, 50, 1..
사용자의 브라우저에 보이는 HTML을 스크린샷 찍을 수 있는 방법을 기록하기로 하였다. html2canvas 라는 라이브러리를 사용하여 이를 간단히 구현할 수 있다. npm install html2canvas 함수를 작성하여 기능을 구현해보자면 다음과 같이 작성할 수 있다. import html2canvas from 'html2canvas' ... const copyElement = () => { const root = document.querySelector('#copy-image-div') as HTMLElement if (root) { html2canvas(root, { allowTaint: true }).then((canvas) => { document.querySelector('#copy-roo..
모달창을 구현하는데 있어서 뒤에 화면을 뿌옇게 하고, 모달창의 바깥을 클릭 시 모달창이 꺼지는 기능을 구현하였다. 기본적인 구현 아이디어는, 기존의 화면을 전부 덮어버리는 투명한 요소를 만들고, 이 요소 위에 Modal을 구현하는 것이다. 바깥의 투명한 화면을 클릭하면, 모달창이 꺼지게 만들며 Modal 내부에 닫기 버튼을 만들 수도 있다. Tailwindcss를 사용한 구현 import React from 'react'; export default function Modal({ setIsShow }: { setIsShow: () => void }) { return ( Modal Context close ) } Css를 이용한 기본 구현 가장 기본적인 css를 사용해서도 구현하였다. 역시 미래에 참고하기..