웹 개발/웹프로그래밍44 JavaScript | html2canvas 캡쳐 사용방법 html2canvas html2canvas는 웹페이지를 캡쳐할 때 유용한 자바스크립트 라이브러리입니다. 캡쳐 바디 안 모든 요소 1 2 3 4 5 6 html2canvas(document.body, { backgroundColor: "#000000" }), then(function(canvas) { var base64image = canvas.toDataURL window.open(base64image, "_blank") }); Colored by Color Scripter cs 특정 요소 1 2 3 html2canvas(document.getElementById("capture")).then(function(canvas) { }); Colored by Color Scripter cs 특정 요소 제외 (.. 2020. 9. 29. JavaScript | jQuery 셀렉터와 동작 셀렉터 (어떤 것을 가져와) 기본 흐름 - $(선택자).동작함수() - 어떤 것(요소)를 가져와서 무엇을 하는 것입니다. 1$('ex').hide();cs $() 함수- 선택된 HTML요소를 제이쿼리에서 이용할 수 있는 형태로 생성- $() 함수를 통해 생성된 요소는 제이쿼리 객체 - 다시 말해 괄호 안에 셀렉터에 해당하는 요소를 가져와서 jQuery오브젝트를 만듭니다. $(function() { }) - $(function() { }) : 페이지읽가 완료되고 나서 작성된 코드를 실행합니다. 원형은 아래코드입니다.123$(document).ready(function() { });cs 셀렉터id 셀렉터 — $('#id')id는 문서 안에 하나만 있어야 합니다. 그래서 많은 수를 바꾸려 한다면 모두 하나하나.. 2020. 9. 4. JavaScript | 자바스크립트 개발도구 개발도구 걸프 (Gulp)반복적인 개발작업을 자동화 시켜주는 자바스크립트 빌더. 라이브러리 jQuery 모든 브라우저에서 동작하는 클라이언트 자바스크립트 라이브러리로 html의 ClientSide 조작을 단순화JQuery UI : CSS, HTML로 구성된 GUI위젯, 애니메이션 시각 효과, 테마 묶음JQuery Mobile : 터치에 최적화된 웹 프레임워크 Paper.js자바스크립트 벡터 그래픽 프레임워크. 오픈 소스 React JS 단일 웹 페이지나 모바일 앱에서 UI 화면에 표시되는 뷰 개발에 사용 React Native모바일 네이티브 애플리케이션 RequireJS자바스크립트 파일/모듈 로더로 브라우저, Rhino, Node 같은 환경에서도 사용할 수 있습니다. 모듈 방식의 스크립트 로더를 사용하며.. 2020. 9. 4. JavaScript | 자바스크립트 그래픽 그래픽 코드 재사용 및 최적화 - 자바스크립트는 클래스기반언어가 아닙니다. - DOM + jQuery 를 같이 사용하는 것이 웹페이지에서 최적화지만 성능저하로 빈도를 최소화해야만 합니다. DHTML- 스프라이트- 애니메이션 이동 스크롤링- CSS만 사용한 스크롤링 : 제어가 어렵습니다.- 자바스크립트 스크롤링 : 배경이미지 스크롤링타일기반이미지 스크롤링 고급 UI- HTML5 폼- 자바스크립트 UI 라이브러리 사용jQuery UI를 사용한 웹 인터페이스 개선- ExtJS : 견고한 사용자 인터페이스 시스템 HTML5 캔버스 웹페이지에서 자바스크립트를 사용하면 캔버스 안에 그림을 그릴 수 있습니다. 캔버스 vs SVG (Scalable Vector Graphic) — SVG가 수정이 쉽고 폭넓게사용됩니다... 2020. 9. 3. 티스토리 | HTML 구조와 주요 태그 티스토리 스킨 HTML은 너무 길고 복잡하며 들여쓰기도 파악하기 힘듭니다. 이에 중요 태그들의 레이아웃을 살펴보며 대략적인 구조파악에 도움이 되시길 바랍니다. 티스토리 HTML 구조 : 티스토리 스킨가이드에 따른 자바스크립트를 지정해줄 영역, 그룹치환자 : 상단 영역 해당하는 컨텐츠, 네비게이션링크 : 검색 : 컨테이너 (본문+사이드바) : 컨텐츠 영역 : 검색결과 : 공지사항 : 방명록 : 보호글 : 본문 : 색인. 인덱스 페이지 : 영구적인 링크. 포스팅에 부여된 URL를 의미 퍼머링크 게시물이 어느 경우에나 연결되는 절대적인 불변 주소로 블로그 주소를 옮기거나 할 때에도 접속 가능하게 해주는 주소 : 글 관리 기능 : 본문내용 : 태그 : 관련글 : 댓글 : 페이징 : 사이드바 : 푸터, 하단영역 .. 2020. 5. 13. CSS | 5. 박스모델 단위 절대 길이 px : pixels pt : points. (윈도우 9pt = 12px, 맥 9pt = 9px) 상대 길이% : 퍼센트em : 요소의 폰트 사이즈rem : 루트 요소의 폰트 사이즈vw : 뷰포트(브라우저)의 width값을 기준으로 1%의 값 색상 color 속성 컬러 키워드 : red, black, blue 같은 키워드로 지정16진법 : 6자리로 두 자리씩 세가지 색상을 나타냄RGB( ) : 레드, 그린, 블루 (0~255 정수)RGBA( ) : 레드, 그린, 블루 + 알파값(0은 투명, 1은 불투명) background 속성 background-color : 배경의 색상을 지정. (default : transparent)background-image : 배경으로 사용할 이미지 경로를 .. 2020. 4. 3. HTML | 3. 태그와 속성 태그와 속성 기본태그 : 문서 타입 정의. 최상단에 위치 : 전체 도큐멘트 : 문서의 기본설정이나 외부 스타일 시트 파일, js 파일 연결 등 : 도큐멘트 바디, 실제 브라우저 화면에 나타나는 부분 : 메타 태그 제목과 단락 : 제목 (heading) 태그. h1 ~ h6 : 단락 (paragraph) 태그 텍스트 : bold. 글자를 굵게 : italic. 글자를 기울인다. : underline. 글자에 밑줄 : strike. 글자에 중간선 링크 : anchor 태그. 링크 생성 - href 속성 : 반드시 가지고 있어야할 속성 - target 속성 : 어느창에서 열 것인가. _self _blank _parent _top 내부 링크 : 같은 페이지 내 특정 위치로 이동하고자 하는 경우 컨테이너 단순히 .. 2020. 3. 27. 코드이그나이터 | 폴더와 파일 최상위 폴더 (루트 폴더) ❛ index.php : 주요 경로 상수를 결정함- define('SELF', pathinfo(the ))- 시스템폴더- 루트폴더 application 폴더: 사용자가 작성하는 소스와 여러가지 환경 설정 파일들이 저장되는 최상위 디렉토리 ❛ cache : 캐쉬파일❛ config : 환경설정 파일- autoload.php : CI에서 사용되는 패키지, 라이브러리, 설정 파일등을 자동을 로드- database.php : 데이터베이스 연결 정보- routes.php : 컨트롤러의 기본설정과 URI라우팅설정을 추가할 수 있다 ❛ controllers : MVC중 컨트롤러 파일하위폴더는 하나까지 ❛ core : core기능들을 사용자가 확장할 때 쓰는 파일Codeigniter.php ❛.. 2020. 2. 8. 이전 1 2 3 4 5 다음
