웹 만드는 또름이

안녕하세요 또르미 입니다.백만오천년만에 Jquery 관련 글 하나 써봅니다... 주위에 초보 친구들이 자꾸 물어보는게 비슷비슷해서 아싸리 남겨놓으면'내가 덜 말해줘도 되잖아' 오늘 간단하게 작성할 내용은 Juqery로 각종 입력폼을 제어하는 방법입니다. id, name, data등... 여러가지 방법이 있지만 제가 편한 방법으로 몇가지만 적어 두었습니다용  사용자 명사용자 나이 10 20 30 40사용자 성별남성여성사용자 취미등산낚시게임 일단 예제로 사용될 HTML입니다. 엮시 간단합니다. input, select, radio, checkbox만 우선 정리하였읍니다.웹개발을 하게 되시면서, DB에서 값을 불러오든 유효성 검사를 해서 특정값을 제어하든... 입력폼에 대한 변경이 굉장히 자주자주자주자..

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

나날이 격무에 시달리고있는 또름입니다......살려주세요 너무 포스트를 안올려서 오늘은 간단하게 pinch zoom 구현한 것을 포스팅하겠습니다 //pinch 진행 상태 let scaling = false; //pinch 초기 거리 let setDist = 0; $("#img").on("touchstart", function(event){ if(event.originalEvent.touches.length === 2){ scaling = true; } }) 터치스타트 이용해서 2개의 터치포인터가 이벤트에 잡히면 scaling 변수를 true로... $("#img").on("touchmove", function(event){ if(scaling){ var dist = Math.hypot( event.ori..

안녕하세요 나날이 격무에 시달리고 있는 또름입니다. 오늘은... 회원가입이나, 무엇을 판매하기전 금액을 설정할때 등등 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..

저번글에서 페이지 아래에 도달하면 jquery 이벤트를 실행 되도록 작업하였다 https://ddorm.tistory.com/5 jQuery + Ajax로 인피티니 스크롤, 무한 스크롤을 구현해보자. -1- 게시판 리스트를 pagination 형식에서 무한 스크롤 형식으로 변경해 달라는 요청이 있었다. 계속 테스트를 하면서... 나도 사실 많은 게시물을 페이지를 넘나들며 보기엔 너무 귀찮았다. 비록 장점 ddorm.tistory.com 이번글에서는 Ajax를 이용해서 데이터를 불러오는 작업을 해보도록 하겠다. 현재 테스트에 사용되고 있는 쿼리는 페이지의 갯수를 정해놓고 paging 변수를 받아 LIMIT을 주는 형식으로 짜여져 있다. 예) 50개의 목록을 가진 게시판 2page = SELECT * FRO..

여러분들의 모든 말씀이 옳습니다. 많이 가르쳐 주세요...! 작업 내용 1. 이미지가 존재하는 DIV가 있다 2. 해당 이미지를 클릭하였을 경우 이미지에 대한 위치정보를 가져온다 - (저번에 썼음) 3. 필요한 값을 별도의 입력폼으로 입력받아 해당 위치에 플로팅한다. - (어제 썼음) 4. 플로팅된 리스트를 나열하여 수정 OR 삭제가 되도록 한다. - (오늘 내용) 어제 작성한 글을 통해서 이미지 위에 해당 태그를 올리는 것 까지 작업해두었다 허나 문제는 픽셀로 top과 left를 잡아 올리면 디바이스에 따라 이미지 width 와 height가 바뀔시 엄한곳을 찍는다는것...!! px로 css 적용시키지 말고 계산해서 %로 변경하세용... 오늘은 리스트표시 & 태그 내용 수정 및 삭제를 할 수 있도록 작..

여러분들의 모든 말씀이 옳습니다. 많이 가르쳐 주세요...! 작업 내용 1. 이미지가 존재하는 DIV가 있다 2. 해당 이미지를 클릭하였을 경우 이미지에 대한 위치정보를 가져온다 - (어제썼음) 3. 필요한 값을 별도의 입력폼으로 입력받아 해당 위치에 플로팅한다. - (이번 내용) 4. 플로팅된 리스트를 나열하여 수정 OR 삭제가 되도록 한다. - (나중에써야징) 1번글을 통해 간단히 img tag를 클릭하였을 시 좌표를 반환하는 것을 만들었었는데 좀 더 심화해서 이미지 클릭 > 태그 입력폼 보여주기 > 입력버튼을 통하여 태그 플로팅 하기 기능을 만들어봤당. 어제의 html 태그 아래 입력폼을 간단히 만들어준다. ( inputArea ) 클릭하기 전에 입력폼이 나와있으면 안되니까 기본적으로 inputAr..

작업 필요 내용 1. 이미지가 존재하는 DIV가 있다 2. 해당 이미지를 클릭하였을 경우 이미지에 대한 위치정보를 가져온다 3. 필요한 값을 별도의 입력폼으로 입력받아 해당 위치에 플로팅한다. - (나중에써야징) html로 간단히 div와 img 태그를 작성해준다. 이벤트 바인딩 (이미지를 클릭했을때만 작동되도록 이미지에) 이미지를 클릭후 console.log로 해당값 확인 (x,y값) $(this)[0] 부분을 console.log로 찍어 보면 다양한 값들을 확인 할 수 있으니 한번 둘러봐도 좋을듯 아래는 지금까지 소스...