WEB

MDI 설치 $ yarn add @mdi/font -D // OR $ npm install @mdi/font -D 👍 Vue // plugins/vuetify.js import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader import Vue from 'vue' import Vuetify from 'vuetify/lib' Vue.use(Vuetify) export default new Vuetify({ icons: { iconfont: 'mdi', // default - only for display purposes }, }) 👍 Nuxt default 로 ic..

[Javascript] Javascript HTML5 Canvas Libraries HTML5 canvas를 쉽게 다룰 수 있게 해주는 다양한 라이브러리들. fabric.js : http://fabricjs.com/ TMI NHN Toast ui 의 Image editor도 이 라이브러리를 쓴다. (https://ui.toast.com/tui-image-editor) 장점 다양한 예제(Demo)가 있다. 사용하는 사람, 이걸 사용해서 개발된 프로젝트가 많다. 단점 Free Drawing(Pen)으로 그린 그림을 지우는 방법이 딱히 없다. issue에 방법이 하나 있긴 함 => https://github.com/fabricjs/fabric.js/issues/1225 하지만 위 방법을 사용하면 배경이 지워지..

❓ fabric.js - Javascript HTML5 canvas library - HTML5 canvas를 쉽게 다룰수 있게한 라이브러리로 canvas위에 그린 그림들을 "객체(object)"로 관리 합니다. - Demo : http://fabricjs.com/ - Documents : https://github.com/fabricjs/fabric.js/wiki 🌟 canvas 사이즈 변경 이벤트 - canvas는 width와 height를 100%로 설정하면 안된다(적용이 안됨). - fabricjs를 이용하면 canvas의 사이즈를 변경시, canvas위에 그린 배경과 요소들이 자동으로 크기가 변경된다. - window resize 이벤트 발생 시 처리 순서 1) 화면 변경 비율을 계산. 2) c..

[CSS][Bootstrap] Spinner 화면 중앙 위치하도록 설정하는 방법 Bootstrap4 - spinners spinner, 즉 loading 표시를 화면 가운데(중앙)에 위치하도록 하기 위에서는 아래와 같이 css에 추가해주면 된다. .spinner { display: block; position: fixed; z-index: 1031; top: calc( 50% - ( ...px / 2) ); /* where ... is the element's height */ right: calc( 50% - ( ...px / 2) ); /* where ... is the element's width */ } top과 right의 ... 은 각자 자신에게 맞는 요소 크기를 입력해 주면 된..

[JavaScript] TreeView 사용하기 (fancytree) - 5 Drag N Drop 이전 글 : [JavaScript] TreeView 사용하기 (fancytree) - 4 context menu 드래그앤드롭(DragNDrop)기능을 사용하기 위해서는 dnd5모듈을 추가해야한다. dnd5 모듈을 이용해서 기본적인 기능은 가능하지만, 드래그앤 드롭시 목적지 폴더에 내가 옮기려는 파일과 이름이 같은 파일이 존재할 경우 예외처리를 추가하고자 한다. dnd5의 이벤트는 다음과 같다. dragStart : 드래그 이벤트 시작시 (마우스 누름) dragDrag : 드래그 이벤트 중 dragEnd : 드래그 이벤트 끝남 dragEnter : 드래그 이벤트 중 "over", "before, "after"..

[JavaScript] Bootstrap Modal 닫힘 방지 방법 Modal 밖 영역 눌렀을 때 자동 닫힘 방지 방법1. HTML 방법2. JavaScript $('#modal').modal({ backdrop: 'static' }) 키보드 ESC 눌렀을 때 자동 닫힘 방지 ( KeyEvent 방지 ) 방법1. HTML 방법2. JavaScript $('#modal').modal({ keyboard: false }) [참고] https://stackoverflow.com/questions/16152073/prevent-bootstrap-modal-from-disappearing-when-clicking-outside-or-pressing-esca