웹 만드는 또름이

안녕하십니까 백수가 된 또르미입니다. 얼마전까지 그리 바쁘더니... 앞으로 뭐해먹고 살지 막막하네요... 이참에 쉬면서 해보고 싶었던 프로젝트나 해봐야겠습니다. 혼자서 프로젝트를 진행해보려니 웹 퍼블리싱, 디자인이 막막하지만... 남는게 시간이니 열심히 해서 개고수가 되어 보겠습니다. ㅎㅎ 오늘은 정말 간단하게 javascript 라이브러리를 이용하여 지도를 그리고, 원하는 위치에 핀을 꽂는 기능을 풀어보겠습니다 해당 지도 라이브러리는 leafletjs 입니다. https://leafletjs.com/ Leaflet — an open-source JavaScript library for interactive maps Leaflet is a modern, lightweight open-source Java..

오늘은 저번에 만들던 이미지를 잘라 저장하기 챕터2 (완) 되시겠다. 몇일의 텀이 있어 저번 글이 기억이 안나시면 살포시 아래 링크 한번만 들어가주십사...^_____^ https://ddorm.tistory.com/10 jQuery & html2canvas 웹에서 원하는 부분의 이미지를 잘라 저장하자! -1- 프로젝트에서 다중 이미지 슬라이더 관련 작업하는 도중 이슈가 발생하였다. 다름 아닌 이미지 크기가 들쭉날쭉인 파일을 여러 개 업로드하다 보면 슬라이더 크기가 천차만별로 변한다는 것...! ddorm.tistory.com 짜놓고 보아하니... 보이는 이미지를 365px로 잘라냈더니 이미지가 굉장히 작고 화질 또 한 엉망이었기때문에 조금의 기능 개선이 있었다. 아래는 스크립트 코드이다. 3:4비율로 ..

프로젝트에서 다중 이미지 슬라이더 관련 작업하는 도중 이슈가 발생하였다. 다름 아닌 이미지 크기가 들쭉날쭉인 파일을 여러 개 업로드하다 보면 슬라이더 크기가 천차만별로 변한다는 것...! object-fit:cover 속성으로 해결하려 했으나... 문제는 각자의 이미지를 잘라내는 부분이 일관성이 있을 리가 없기 때문에 "만들어야 했다...." (앱이면 쉽게 해결할 것을... 웹에서도 해야 돼서...ㅎ) 일단 급하게나마 기능적으로 만들어 본 화면이다. CSS 꼬락서니에 한번 놀라며... GIF 품질에 다시 한번 놀라며... 포스팅을 작성하겠다 이번 작업을 하면서 굉장히 고생했던 건 다름이 아닌 CSS작업이었다. 원하는 대로 나오질 않아서... CSS 작성한 부분은 모두가 굉장히 야매임을 이해해 주시면 감사..

파일 업로드를 할때 간단히 올라갈 파일의 미리보기를 제공 해 줄수 있는 방법이다. 바로 URL API의 createObjectURL 메소드를 이용하는 방법인데 해당 메소드는 주어진 객체의 URL을 받아 DOM으로 반환하여 보여준다. *해당 페이지에서만 사용이 가능한 것이 특징* 사용 가능한 매개변수로는 File, Blob, MediaSource가 있다. 즉 파일을 서버에 업로드하지 않고도 createObjectURL 메소드를 통해서 DOM객체를 생성 할 수 있단 말! 헐레벌떡 구현해 보았다. 복잡할 것 없이 HTML은 심플하게...! 업로드 Input과 미리보기 이미지가 보여 질 imgArea 라는 DIV를 생성했다. 스크립트 부분도 크게 복잡한게 없다. 파일 Input change시에 createObj..