JavaScript16 [PROGRAMMING] 프로그래밍 (Programming) - DOM-TO-IMAGE 코드 · HTML, 자바스크립트(Javascript), CSS · dom-to-image (JS CDN) · https://openbase.com/js/dom-to-image 기능 · HTML5 캔버스를 사용하여 DOM 노드를 이미지로 변환 및 생성 1. HTML · figure#main : (dom-to-image) 'domtoimage' 오브젝트에 적용할 리소스와 결과(이미지)를 표시할 영역 · figure#main > figcaption[name="resource"] > #resource-original : (dom-to-image) 'domtoimage' 오브젝트에 사용될 DOM 노드 (이미지 표시용) · figure#main > img[name="result"] : (dom-to-image) '.. 2021. 10. 28. [PROGRAMMING] 프로그래밍 (Programming) - HTML 포함(Include HTML) 코드 · HTML, 자바스크립트(Javascript) 기능 · 외부 HTML 코드를 특정 위치에 삽입 1. HTML · include-html : HTML 코드 삽입을 위한 커스텀 속성 2. 자바스크립트 · includeHTML 함수 호출 시, includeHTML 종료 콜백(completed) 매개변수 사용 · includeHTML 함수 호출을 통해 main#target 노드 하위에 content.html 페이지 안의 내용을 삽입 // HTML 포함 함수 (Include HTML) function includeHTML( completed ) { // 모든 노드 (*) 선택 및 파싱 var elem, file, xhr; var elemAll = document.getElementsByTagName("*".. 2021. 10. 19. [PROGRAMMING] 프로그래밍 (Programming) - 이미지 색상 추출(Image color picaker) 코드 · HTML, CSS(SCSS), 자바스크립트(Javascript) 기능 · 이미지 파일에서 색상 데이터를 추출 (Image Color Picaker) 1. HTML & CSS 1) 코드 뷰 #main-body #example > .content { width: 100%; height: 100vh; padding: 0 20px; max-width: 1280px; } #main-body #example > .content > #del-upload { background-color: rgba(0, 0, 0, 0.25); width: 227px; max-width: 227px; height: 350px; max-height: 350px; display: block; padding: 20px; left: .. 2021. 10. 9. [PROGRAMMING] 프로그래밍 (Programming) - 이미지(Image) 줌인(Zoom-In) 코드 · HTML, CSS(SCSS). 자바스크립트(Javascript) 기능 · 마우스 커서를 따라 이미지를 확대 (Zoom-In) 1. HTML & CSS 1) 코드 뷰 Image : Zoom-In /* #main-body #magnifier-glass > .content */ .wrap { width: 100%; text-align: center; padding: 2rem 0; } .wrap > .ct-img { max-width: 100%; position: relative; display: inline-block; border: 1px solid RGB(0, 0, 0, 0.1); overflow: hidden; } .wrap > .ct-img.scrollbar { /* 자식 노드(child) 사.. 2021. 10. 2. 이전 1 2 다음 반응형