HTML7 [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 Transform) 02 코드 · HTML, CSS(SCSS), 자바스크립트(Javascript) 기능 · 이미지 (preserve-3d) 배치, 네비에기션 버튼을 통한 이미지 회전 1. HTML & CSS 1) 코드 뷰 #main-body .container#example > .content[name="example"] { width: 100%; height: 100vh; padding: 0 1vw; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; /* flex 설정 */ -ms-flex-direction: column; -webkit-flex-direction: column; flex-direc.. 2021. 10. 18. [PROGRAMMING] 프로그래밍 (Programming) - 이미지 변환(Image Transform) 01 코드 · HTML, CSS(SCSS), 자바스크립트(Javascript) 기능 · 마우스 커서 움직임에 따라 이미지를 좌,우 또는 상,하 이미지 회전 효과 1. HTML & CSS 1) 코드 뷰 · figure#target 데이터 "data-rt-type" 은 좌,우 또는 상,하 회전 결정 ( x | y ) #example > .content[name="example"] { height: 100vh; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; align-items: center; -moz-box-align: cente.. 2021. 10. 17. [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) 돋보기(Magnifier-glass) 코드 · HTML, CSS(SCSS). 자바스크립트(Javascript) 기능 · 마우스 커서를 따라 부분 확대, 돋보기(Magnifier-glass) 효과 1. HTML & CSS 1) 코드 뷰 Image : Magnifying-Glass /* #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; } /* 자식 노드(child) 사이즈가 큰 .. 2021. 10. 2. [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 다음 반응형
