Web 공부 (5) 썸네일형 리스트형 JavaScript - Item Drag and Drop (드래그 앤 드랍 만들기) 1. Style .dragContainer { background-color: #333; height: auto; padding: 1rem; margin-top: 1rem; } .draggable { padding: 1rem; background-color: white; border: 1px solid black; cursor: move; } .draggable .dragging { opacity: .5; } 2. HTML 1 2 3 4 Test Button 3. Script const draggables = document.querySelectorAll('.draggable'); const containers = document.querySelectorAll('.dragContainer'); dragg.. 웹개발 공부 - 1. 프로젝트를 만들어보자 먼저 프로젝트를 만들 빈 폴더를 생성을 해줍니다. 그다음 VSC(Visual Studio Code)를 켜줍니다. 저는 VSC를 사용합니다. 왼쪽 상단의 File 누른후 Open Folder를 눌르면 파일 탐색기가 열립니다. 거기서 아까 프로젝트로 사용할 빈 폴더를 선택해줍니다. 이제 프로젝트에서 쓸 폴더를 만들겠습니다. assets : 이미지 파일, css 파일, js 파일 등을 저장할 디렉터리 입니다. controllers : 페이지가 로딩되기전에 처리할 각종 업무를 보는 디렉터리 입니다. model : DataBase와 연동하거나 데이터를 Input, Output 하는 디렉터리 입니다. views : 화면에 보여질 페이지가 있는 디렉터리 입니다. 열심히 MVC 구조를 만들어 볼려고 노력해보겠습니다. .. IE(Internet Explorer) 에서 Script(스크립트)가 작동하지 않을때 이코드를 태그안에 넣으면 작동한다. JavaScript - 차트(chart)를 이미지화 시켜서 Excel 로 내보내기(export) 안녕하세요. 이번 글에서는 차트를 이미지화 시켜서 excel로 export를 해보겠습니다. 차트가 있다는 가정하에 진행하겠습니다. 저는 Chart.js 컴포넌트를 이용해서 차트를 만들었습니다. 밑에 사진이 제가 임시로 만든 차트입니다. 이 차트를 excel export를 해보겠습니다. 먼저 차트를 base64로 인코딩을 해줍니다. 1. canvas id를 가지고 옵니다 var canvas1 = document.getElementById('Unit1_Chart'); var canvas2 = document.getElementById('Unit2_Chart'); 2. base64 인코딩 var dataURL1 = canvas1.toDataURL(1.0); var dataURL2 = canvas2.toData.. 비주얼 스튜디오 코드(Visual Studio Code) -초간단 한글 설정 안녕하세요. Visual Studio Code 간단하게 비주얼 코드라 부르겠습니다. 비주얼 코드에 한글을 적용해보겠습니다. 정말 간단하니 쉽게 적용하실 수 있을 것입니다. 비주얼 코드를 실행해주세요. 1. 왼쪽에 테트리스 모양의 아이콘을 클릭해주세요. 2. 검색란에 Korea를 적어주세요 3. 오른쪽 install을 눌러주시면 됩니다. 그러면 오른쪽 아래에 이런 모양의 문구가 뜨면서 Restart Now 버튼이 생성되시는걸 확인하실 수 있습니다. 버튼을 눌러서 비주얼 코드를 재시작하면 끝입니다. ㅎㅎ 정말 쉽죠? 한글이 잘 적용된 것 같습니다. 끝! 이전 1 다음
