본문 바로가기

Programming9

[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] PHP - SMTP(with. PHPMailer) 1. SMTP 란 · [WEB] SMTP / POP3 / IMAP 2. PHPMailer · https://github.com/PHPMailer/PHPMailer GitHub - PHPMailer/PHPMailer: The classic email sending library for PHP The classic email sending library for PHP. Contribute to PHPMailer/PHPMailer development by creating an account on GitHub. github.com · PHP SMTP 관련 검색 시 가장 많이 검색되는 오픈소스 프로젝트 · PHP 5.5 ~ PHP 8.1 호환 · CC(참조), BCC(숨은참조), ReplyTo(회신 주소), 첨.. 2021. 10. 13.
[PROGRAMMING] PHP - STRLEN, STRPOS, SUBSTR, STRTOLOWER, STRTOUPPER, TRIM, EXPLODE, IMPLODE, STRCMP 1. STRLEN ( string $string ) ( PHP4, PHP5, PHP7, PHP8 ) · 문자열 길이 반환 (int) 2. STRPOS ( string $haystack, string $needle, int $offset = 0 ) ( PHP4, PHP5, PHP7, PHP8 ) · 전체 문자열에서 특정 문자열 포함 확인 및 첫 위치 반환 · $offset : 검색 시작 위치, 음수 일 경우 문자열 끝에서 부터 시작 3. SUBSTR (string $string, int $offset, ?int $length = null ) ( PHP4, PHP5, PHP7, PHP8 ) · 전체 문자열에서 특정 범위 추출 4. STRTOLOWER( string $string ) / STRTOUPPER (.. 2021. 10. 12.
[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.
반응형