•  
  •  
  •  
  •  
 
2017 Nam Insik Portfolio site ː Designed by werty.co.kr ː nis@werty.co.kr
 
 
 
 
 
 
 
 
 
Impress Media FB App
Lecture (Building website using wordpress)
Gillette Pop-up Store
werty wordpress blog build
Samsung Thunders site renewal
HFR sites open
KOURSS.org
KGC Season Update
Moss & Dew studio web site
행운이 뿌잉뿌잉 발사!!
음…아빠! 아빠가 빠뜨린게 있어~!
이불 덮고있는 졸망이
거품 샤워중인 졸망이
참 똘똘하게 생긴 졸망이
오잉? 이건 뭐지?
아빠 날개가 되어줘! 난 날을꺼야~
먹이로 유인하다
내려오려고 하는 올망이
 

Posts Tagged "jquery"

VI Simple Slider (심플한 터치 슬라이드) 플러그인

미리보기  다운로드 심플한 가로 슬라이더입니다. 엄청난 슬라이드 효과는 없습니다.  그냥 모바일에서 터치 슬라이딩하면 스와이핑 되고, 마지막 슬라이드에서 터치 드래그 하면 다시 처음으로 이어지는 슬라이드입니다. 자동으로 시간에 맞춰 슬라이딩 되고, 슬라이드 반복을 제어 할 수 있습니다. 데스크탑에서 클릭 스와이핑 기능을 제어할 수 있습니다. 슬라이딩 되는 모션을 'easeOutQuart'과 ...

... 2017/01/31

JS – datepicker(jQueryUI,달력) 이용시 두개 날짜 범위 설정

jquery UI 의 datepicker를 이용해서 input 칸에 포커스 했을 때 달력이 나오고 날짜를 선택하면 input 칸에 값이 들어가는 기본 베이스를 사용하면서 아래와 조건이 있는 경우가 있어서 예제를 만들어 보았다. 특정 기간 범위 설정 특정 기간 범위만 활성화 시작 달력과 끝 달력에 ...

... 2016/12/12

풀사이즈 배경으로 동영상 or 이미지 삽입하기

풀사이즈 배경으로 동영상(또는 이미지) 삽입하기 미리보기  다운로드 인터넷 속도도 빨라 졌기 때문인지 풀사이즈 백그라운드로 동영상을 삽입하는 사례들이 종종 있습니다.예전에는 이미지로 어떻게든 시원하게 처리했었지만 이제는 동영상으로 더욱 인터렉티브한 사이트를 제공할 수 있게 되었습니다.더군다나 youtube나 vimeo와 같은 비디오 서비스의 동영상도 백그라운드로 넣을 수 있기 때문에 ...

... 2016/01/13

jQuery – 버튼에 마우스 오버 상태에서 클릭한 뒤 마우스 상태에 맞게 css로 만드는 팁

css로만으로 처리하면 참 좋을 듯 한 이 기능은 css에서 hover를 이용하게 되면 클릭했을 때 마우스가 hover라는 영역을 벗어나더라도 hover 상태가 되어 있을 때가 있다. 물론 마우스를 조금만 움직여도 다시 out 상태로 돌아가긴 하지만 상황에 따라 바로 out상태로 구분되어져야하는 상황이 있기 때문에 ...

... 2015/12/28

JS-페이스북 공유한 뒤 공유 여부값 가져오기

페이스북을 이용해서 게시물을 공유하게 한 뒤 공유가 되었거나 실패하였는지 확인하는 코드가 필요할 때가 있습니다. 이 코드를 작성하기 앞서 페이스북 개발자 센터에서 APP ID를 발급 받으셔야합니다. APP ID 발급 방법은 구글에서 'facebook app id'만 검색해도 쉽게 설명이 잘 나와있으니 참고하신 후 APP ID를 ...

... 2015/12/24

jQuery – css로 display none와 block에 상태에 따른 처리

css를 이용해서 인터렉션을 구성해 놓은 경우가 있다. 특히나 display : block 과 none를 이용해서 요소를 보이거나 사라지게 하는 상황이 많은데 스크립트로 함수를 만드는 중에 이에 따른 행동이 필요할 때가 있다.  .popup 엘리먼트가 가시적으로 보이는지 아닌지에 따른 조건문이다.

... 2015/01/26

jQuery – 특정 속성 가진 엘리먼트 찾고 속성 제거하기

특정 속성을 가진 엘리먼트를 찾는 방법은 쉽니다.  위 코드처럼 선택하면 div 중에 title 속성이 있는 엘리먼트들을 선택하게 된다.그러면 여기서 title이라는 속성을 지우면 아래와 같다.  간단하다. removeAttr이면 된다.

... 2014/11/06

IE9에서 script5022 DOM Exception: INVALID_CHARACTER_ERR (5) 오류 났을 때

반응형웹 사이트 프로젝트를 할 때 크로스 브라우징 검수를 할 때가 있다.작업하는 PC의 IE가 10이고 개발자 도구를 이용하여 IE 9 이하를 테스트하는 것과 실제 순수 IE9 이하와는 결과가 틀리게 나오는 경우가 많다. 또한 IE Tester도 비슷하게 구현하는 것인지라 최대한 가상 PC를 ...

... 2014/08/26

페이드 인/아웃 슬라이드쇼 (와이드 배경 이미지 변경) 플러그인

페이드 인/아웃 슬라이드쇼 (와이드 배경 이미지 변경) 플러그인 미리보기 창 크기에 따라 이미지를 세로 중앙 중심으로 스케일링한다. 슬라이드 이미지들의 로드가 끝난 후에 이미지를 노출한다. 브라우저 크기가 변경될 때마다 그에 맞춰 조절된다. 사용법 <head>와 </head> 사이에 아래 코드를 추가한다.   위 코드 중에  을 원하는 옵션과 선택자를 넣어 자신이 원하는 ...

... 2014/03/24

제이쿼리 플러그인 제작 정규 교육

야무님의 제이쿼리 플러그인 제작 정규 과정 중이예요.어렵긴한데 만들면 뿌듯하네요 ㅎ사실은 수업 커리큘럼 중에 SASS가 있었기에 들었던 것이고 제이쿼리도 다시한번 다지기 위해서 들었습니다.빨리 SASS 생활화해야하는데 ㅠㅠ 그렇지를 못하네요. 

... 2013/11/06

jQuery – 라디오 버튼 체크 여부 확인

입력폼에서 라디오 버튼에 값을 선택하였는지 안하였는지 체크를 해서 만약 선택하지 않았다면 라디오 버튼으로 화면이 이동되어 체크할 수 있도록 해보자 일단 html에서 라디오버튼은 아래와 같이 설정하였다.  이제 제이쿼리 파일로 아래와 같이 설정하면 된다. var Category1은 html에서 id가 Category1인 것을 선언하였고,  를 html에서 name 부분의 값이다. Category1.focus() ...

... 2013/09/11
콘솔 오류

관리자 페이지 중 위젯에서 드래그 & 드롭이 안되는 현상

워드프레스 공식 홈페이지 사용자 포럼에서는  Admin widget drag and drop not working 으로 질문이 올라온 내용이긴 하나 제대로 답변이 적혀져 있지 않아서 정리하였다. 일단 이런 현상의 이유는 여러가지가 있으니 원인부터 찾아보자. 파이어폭스에 파이어 버그를 설치한 후 오류가 나는 페이지로 이동하여 F12를 눌러 ...

... 2013/01/14

jQuery-브라우저 창 사이즈 조절에 따른 이벤트 만들기

 브라우저를 크기 조절에 의한 이벤트를 받아 명령을 내릴 때 주로 사용한다. 아래 소스 코드를 보면 resize가 두번 들어간다. 후에 있는 .resize() 는 이 함수를 한번 실행하라는 말이다. 즉,아래 코드는 코드를 삽입한 웹페이지를 접속하자마자 resize 안의 코드를 실행하고 창이 조절될때 마다 코드를 실행하라는 의미다.

... 2012/10/18

jQuery-마우스가 브라우저 밖으로 나갔을 때 이벤트

마우스가 브라우저를 나가는 이벤트를 받아서 활용하는 두가지 방법이 있다. 하나는 (창이 전환되었을 경우, 혹은 마우스가 다른 창을 클릭하여 화면이 바뀐 경우), 다른 방법은(순전히 화면에서 마우스가 나갔을 경우), 두 방법은 엄연히 다르다. 자세한 설명은 .bind() 와 .blur()에 대해서 jQuery 도움말을 보면 된다.

... 2012/10/18

jQuery-마우스 움직임을 이용, 좌표값 가져오기

마우스의 좌표를 이용해서 div들을 움직이게 하고 싶은 경우가 있다. 마우스의 움직임에 대한 값을 얻어낸다면 나머지는 응용하면 된다. 마우스의 움직임. 즉, 좌표값을 얻어내는 방법은 아래와 같다.  코드를 설명하자면 document. 즉, 브라우져 내부에서 마우스를 움직이게 되면 x값인 e.pageX와 y값인 e.pageY를 가져와서 status라는 id를 가진 곳에 노출하라라는 말이다.

... 2012/10/17
.