프로그래밍8 [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. [STUDY] 기본기 (Study) - OSI 7 계층, TCP/IP 4 계층 1. OST 7 계층(Open System Interconnection 7 Layer) · (표준을 따르는) 서로 다른 시스템 간의 통신을 위해 필요한 절차를 7 계층으로 구분한 모델 · 장비 개발 또는 통신 표준 설계에서 주로 사용 물리 (Bit) ↔ 데이터링크 (Frame) ↔ 네트워크 (Packet) ↔ 전송 (Segment) ↔ 세션 (data) ↔ 표현 (data) ↔ 응용 1) 물리 (L1, Phsical layer) · 네트워크 하드웨어 전송 기술 (PDU:Bit) · 데이터 전송 및 디지털 ↔ 전기 신호를 변환 · 프로토콜 : RS-232, 10 BASE-T 등 · 장치 : 허브, 리피터 2) 데이터링크 (L2, Data link layer) · MAC 주소를 사용하여 데이터의 .. 2021. 10. 2. [STUDY] 기본기 (Study) - 관점지향 프로그래밍(AOP, Aspect Oriented Programming) 1. AOP 란 · 기능(메소드)을 핵심 관심사(core concerns)와 횡단 관심사(Cross-cutting Concerns)에 대한 '관점'으로 분리하여 모듈화를 극대화하여 기존의 기능을 분리없이 하나의 객체에 모아놓는 OOP의 변경과 재사용 한계를 극복하기 위한 프로그래밍 기법 2. AOP 구현 1) 관심사 (concerns) : 기능 · 핵심 관심사(core concerns) : 단일 주요 핵심 기능 · 횡단 관심사(cross-cutting concerns) : 여러 모듈에서 공통적으로 사용되는 부가 기능 2) 어드바이스(Advice) · 횡단 관심사를 모아 놓은 모듈(aspect)에서, 기능을 사용할 수 있도록 설정한 인터페이스 · 프로그램 코드의 "Joint point" 에 삽입 3) .. 2021. 10. 2. [STUDY] 기본기 (Study) - 선언형(Declarative), 명령형(Imperative) 1. 선언형 프로그래밍 (Declarative Programming) ・ 논리형 (logic), 함수형 (function) ・ 과정(flow)을 추상화하고 결과(What)에 기반하여 설명 function double(arr) { return arr.map( item => item*2 ); } 1) 논리형 프로그래밍 (Logic Programming) ・ 비절차적 언어(non-procedual language) ( 실행 순서에 관계없이 원하는 결과를 정의 및 요청 (데이터베이스 SQL 문 등 ) ・ 수학적논리와 일반적 논리(AND, OR ...)를 통해 프로그램을 표현하고 결과를 도출하는 프로그래밍 기법 2) 함수형 프로그래밍 (Functional Programming) ・ "순수함수(pure func.. 2021. 10. 2. 이전 1 다음 반응형
