본문 바로가기

반응형

Story

jQuery 애니메이션은 어떻게 작동하는가? jQuery 애니메이션은 어떻게 작동하는가? - 기본 편 http://d2.naver.com/helloworld/0265052 "웹 개발에서 가장 많이 사용하는 JavaScript 프레임워크는 단연 jQuery일 것입니다. 2006년 6월 30일 존 레식(John Resig)이 jQuery 1.0a를 공개한 이후 jQuery는 꾸준히 발전해 지금은 업계의 현실적인 표준이라고 말해도 손색이 없을 만큼 성장했습니다. jQuery는 DOM을 제어하고 이벤트를 처리하는 일을 주로 담당하지만, 그 외에도 웹 개발을 쉽게 할 수 있게 도와주는 많은 기능을 제공합니다. 이 글에서는 jQuery가 제공하는 기능 가운데 jQuery.fn.animate() 함수에 관해 이야기하려 합니다. "jQuery 애니메이션은 어떻게.. 더보기
안드로이드에서 서버모니터링 monyt 서버를 관리하는 사람은 외부에서도 서버상태를 수시로 체크해야 하는경우가 있는대 안드로이드용 앱중에 monyt 란게 쓸만한거 같다. 마켓에서 설치 후 서버추가메뉴에서 Server Name 과 Monyt Script URL 과 Request Status Interval 을 입력해준다 Server Name 은 관리용 이름이니 적당히 적어주고 Monyt Script URL 은 아래 스크립트를 서버에 저장해주고 그 주소를 적어준다. (http://도메인주소/monyt.php 형태로적어주면 된다.) Request Status Interval 은 기본 5minutes 이다. https://monyt.net/ 에 들어가면 script 를 찾을수있는대 버전이 변하는경우도 있으니 안될경우 체크해야 할거 같다. 스크립트 주.. 더보기
고도몰에서 추가페이지를 iframe 로 사용시 주의사항 고도몰 작업시 추가 페이지를 사용하는경우가 있다. 어떤경우는 이 추가 페이지를 iframe 으로 내용중에 넣게 되는대 이게 큰 문제 없다 생각했는대 모바일 버전을 보다가 pc버전 보기를 눌렀을때 일부 스마트폰에서 문제가 발생했다. Template_Error #1 cannot find defined template ..... 경로명..... 에러 메세지는 위와 같다. 경로명을 잘 보면 skin 경로가 모바일 skin 경로를 표시하고있다. 모바일에서 pc 버전 보기할때 파라메터값이 ?pc 가 붙는대 이걸 이용해서 ..../proc/추가페이지명.htm&pc 로 해주면 해결된다. pc 버전에서만 사용하던 iframe 이니 끝에 &pc 를 강제로 붙여 두어도 문제 없다. 더보기
javascript 에서 replace 를 문자열 전체에 적용하기 자바스크립트 REPLACE 를 사용해서 문자열 치환을 하면 첫번째 하나만 치환이 된다. 문자열 전체에 적용하고자 하면 정규식을 사용하여 치환해야 한다. ex) ' (작은따옴표) 를 없애고자 한다면 var str = "aaaa'bbbb'cccc"; str.replace(/\'/gi,""); 처럼 사용하면 된다. 위 정규식 설명을 하면 - ' 을 정규식에 넣기위해 \' 을 사용하였고 - // 마지막에 g : 모든 문자열에서 pattern 검색 - i : 대소문자 구분안함 이렇게 replaceAll 처럼 사용한다. 더보기
jquery ajax 로 dynamic 하게 항목(row) 지우기(remove) 목록으로 나열되어있는 항목들이 있을때 하나씩 버튼등을 눌러서 하나씩 삭제할때 값을 전송하여 화면 전체가 reloading 되면 화면이 깜빡이는 현상과 스크롤이 이동되는 현상을 격어야 한다. 간단하게 ajax 를 사용해서 서버단에서 삭제 처리와 목록요소만 지우는 방법으로 처리해보자. php 사용예를 들어서 다음처럼 목록이 화면에 출력이 되고 .... 더보기
파일첨부에 이미지만 첨부할 수 있도록 처리 input file form 을 이용해서 파일을 전송할때 이미지 파일만 전송처리 파일첨부 을 통해서 저장시 전송이후 서버스크립트로 처리하는 방법은 많이 존재 하지만 전송전에 체크하는 방법은 많이 않아 정리해둔다. 첫번째 최근 브라우져 ie10 이후 지원 되는 방법 accept 로 사용하게 되면 파일찾기 클릭해서 탐색창이 나올때 이미지 외에 파일은 보이지 않는다. 다만 "사용자 지정 파일" 로 되어있는 부분을 "모든 파일" 로 수정하면 이미지 파일뿐 아니라 모든 파일이 보이게되 막을수가 없게 된다. 하지만 이 방법만으로도 일반인들에게는 많은 효과를 걷을수있을것이다. 추가로 할 수 있는 방법은 javascript 를 사용해서 막는 방법이다. 두가지 방법을 다 사용하는것이 더 효과적일 것이다. 더보기
jquery 으로 iframe 내용에 접근하기 iframe 내에 있는 항목등을 접근하여 값을 가져온다거나 값을 주어야 할 경우가 있다. 요즘은 jquery 를 많이 사용하다 보니 jquery 로 접근하여 사용하면 편리할거 같은대 iframe 을 selector 로 해도 동작하지 않았다. 찾아보다 다음과 같은 방법으로 접근해보니 정상동작하였다. iframe 은 $('iframe[src="sample.htm"]') 이나 $('iframe[name="iframename"]') 등으로 선택하고 $('iframe[src="sample.htm"]').contents() 으로 iframe 내부에 접근한다. 그다음은 $('iframe[src="sample.htm"]').contents().find("body") 처럼 하면 된다. 나의 경우는 iframe 안에 또 .. 더보기
jQuery Selectors jquery 셀렉터가 헤깔리는 경우가 많은대 많이 사용하기에 참고용으로 남겨둔다. jQuery Selectors Selector Example Selects * $("*") All elements #id $("#lastname") The element with id="lastname" .class $(".intro") All elements with class="intro" .class,.class $(".intro,.demo") All elements with the class "intro" or "demo" element $("p") All elements el1,el2,el3 $("h1,div,p") All , and elements :first $("p:first") The first elemen.. 더보기
다음 api 를 이용한 지도 만들기 (사용자 이미지를 이용한 마커 / 컨크롤 올리기) 다음지도에서 지원하는 약도만들기로 부족할때는 api 를 통해서 지도를 만들어야 합니다. api 는 api key 가 반드시 필요해서 다음회원으로 가입후 key 를 발급 받아야 합니다. http://apis.map.daum.net/ 우측 상단에 보이는 API KEY 발급 버튼을 눌러서 시작합니다. 이용약관에 동의합니다. 우선 사용할 앱을 먼저 등록합니다. 만들어진 앱으로 사용할수있는 api 들도 보입니다. 사용할 이름을 입력해줍니다. 앱을 만든후 홈페이지에서 자바스크립트를 통하서 지도 api를 사용할거니 RES/JS API 에 + 버튼을 눌러줍니다. 플렛폼을 웹브라우져로 선택하고 사용하려는 도메인 주소를 Referer 에 입력합니다. http:// 가 빠지면 형식에 맞지 않는다고 경고가 나옵니다. 줄바꿈해.. 더보기
다음 약도만들기 지도 서비스 다음 지도를 이용한 약도만들기 기존에 홈페이지를 만들면서 찾아오시는길등에 다음지도를 사용해서 서비스를 해왔던 분들이 많을겁니다. 하지만 기존방식으로 위와 같이 사용하셨던 분들은 다음지도에서 이렇게 "지도서비스의 약도만들기로 변경이 필요합니다. 본 약도 서비스는 2016년 5월 30일 종료됩니다." 라는 문구를 보시게 될겁니다. 다른방법으로 이용을 해야 하는대 api 를 직접 사용하지 않고 다음에서 제공하는 약도만들기 편리한 2가지 방법이 있습니다. 첫번째 다음지도 에서 주소를 검색합니다. http://map.daum.net/ 상단 메뉴에 공유를 선택하고 지도 퍼가기를 클릭하면 지도 삽입 태그를 제공해 줍니다. 이 소스를 사용하셔도 되는대 마커가 없어서 정확한 위치와 상호명등을 보여줄수가 없습니다. 두번째.. 더보기

반응형