웹 만드는 또름이

안녕하세요 나날이 격무에 시달리고 있는 또름입니다. 오늘은... 회원가입이나, 무엇을 판매하기전 금액을 설정할때 등등 Input 태그에서 "입력할때" 간단히 유효성을 맞출수 있는 jquery를 슥슥 써보겠다. Input이란... 무슨 정보를 받아야되냐에 따라서 숫자만 받아야 할 경우도 있고 전화번호 같은 경우에는 자동으로 하이픈(-)을 붙여서 형식을 통일 시켜야 할 경우가 있다. (아무리 Input위에 숫자만 입력해달라고 해도 문자 넣으시는분들 천지..!) 이게 기본중의 기본으로 submit 할때나 backend에서 유효성을 검사하겠지만 (하겠죠?안하면 박살나겠죠???) 개발자도 사람인지라 까먹을수도있고 위와 같은 방식으로 유효성 체크를 하였을 경우에는 사용자가 submit버튼을 눌러서 에러띄우고 다시적..

오늘은 저번에 만들던 이미지를 잘라 저장하기 챕터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..