•  
  •  
  •  
  •  
 
2017 Nam Insik Portfolio site ː Designed by werty.co.kr ː nis@werty.co.kr
 
 
 
 
 
 
 
 
 
Mobis Phoebus site renewal
Korea Web Design
KT Season Update
Seoul Cinema mobile web open
Hold Holic
HFR sites open
HYUNDAI Department Store, PanGyo
d&c site renewal
Impress Media FB App
꼬리들고 자는 졸망이
잠은 편하게 자야지~
아빠 손에 뭔가 있어?!
아빠..손 따뜻해..
이건 훌라후프인건가요..
이불 덮고있는 졸망이
오잉? 이건 뭐지?
아빠 손은 노아의 방주인가요?
먹이로 유인하다
 

Javascript, jQuery

자바스크립트와 제이쿼리

크롬에서 미디어쿼리 버그 대처

크롬 브라우저에서 간혹 미디어쿼리가 제대로 작동하지 않을 때가 있다. 아래와 같은 순서로 테스트해보면 간혹 버그가 발생한다. 1. 미디어쿼리로 만든 웹사이트를 크롬에서 연다. 2. 미디어쿼리의 영역에 해당되는 모습이 나오게 창을 줄여본다. 3. 크롬 브라우저의 상단에 새 탭을 눌러 임의의 사이트를 접속한다. 4. 그 상태에서 창을 최대한으로 ...

... 2013/10/08

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

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

... 2013/09/11

jQuery – 간단한 랜덤 배너 이미지노출

이미지와 링크, alt가 랜덤하게 노출되는 간단한 배너를 만들어보자. 일단 방금 만들었던 소스를 예제로 아래에 넣어보았다.  images에는 이미지 경로를 입력한다. bannerlink에는 이미지에 맞춰 클릭시 이동시킬 url을 넣는다. bannerTitle에는 앵커에 대한 타이틀을 넣어준다. bannerAlt에는 alt에 넣을 텍스트를 입력한다. 위에는 예시로 총 3개의 배너를 정의한 것인데 추가하려면  images 으로 추가한다. 물론 bannerlink, bannerTitle, bannerAlt ...

... 2013/09/07

jQuery – 속성 또는 속성 값으로 선택자 지정하기

본문에서 alt 값이 "이미지 설명"을 가진 이미지를 선택하여 지우거나 이동하거나 등등 처리를 할 때가 있을 것이다. 이럴 때 이 alt에 대한 값을 찾아서 선택자(selector)로 지정할 수 있다. 사용법은 간단하다.  위 코드는 <img src = "test.jpg" alt="이미지 설명" /> 와 같은 이미지를 선택하여 처리할 ...

... 2013/03/29

jQuery – 선택자 삭제 .remove

div라든가 p, span 등과 같은 선택자를 삭제할 때 사용한다. 입력 방식은 두가지 정도이다.  또 하나는 아래와 같다.    필자는 간단하게 주로 아래와 같이 쓴다.   만약 위와 같이 쓰는 경우 클래스일 경우 .class 로 선택자를 넣어도 된다. 이렇게 되면 해당 클레스가 있는 div가 삭제가 된다.

... 2013/03/22

jQuery-$.cookie 플러그인 사용법 (쿠키 활용편)

사용자의 쿠키를 이용해서 유동적으로 사이트를 운영할 때가 많다. 자바스크립트로 쿠키를 만드는 방법은 생략한다. (이미 검색하면 많이 나온다.) 제이쿼리는 플러그인 사용으로 간단하다. 일단 플러그인을 페이지내에 삽입해야한다. 해당 파일은 https://github.com/carhartl/jquery-cookie 이 곳에서 최신버전을 받아서 사용하거나 지금 필자가 쓰는 버전을 첨부파일로 넣을테니 다운받아 써도 상관없다. (다운받아 사용할 경우 차후에 ...

... 2012/11/08

JS-setTimeout() , clearTimeout()

setTimeout() : 시간을 지정하고 지정된 시간에 함수를 실행하게 만든다. clearTimeout() : 위에서 실행한 그 함수를 취소할 때 사용한다.   setTimeout() 사용법은 아래와 같다.  timer라고 지정한 이유는 clearTimeout() 을 할 때 대상을 찾기 위함이다. window.setTimeout 라고 써도 되고 setTimeout 써도 된다. (이유는 window 객체를 사용하는 메소드이기 때문이다.) 3000은 3초다. 1초면 1000으로 ...

... 2012/11/08

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

jQuery-div 높이를 창의 100%로 조절할 때 (창 사이즈 유동 적응)

div로 코딩할때 가끔 필요한 것이 height 100%가 안된다는 점이다. 제이쿼리와 자바스크립트를 이용해서 간단히 만들어 본다.  윈도우가 로딩된 후 funLoad를 실행하였고, 창을 조절하면 다시 funLoad를 실행한다. funLoad는 container라는 id를 가진 div의 height값을 조절하라고 명령한다.

... 2012/10/15

jQuery-마우스 이벤트시 부모 div의 id 값 가져오기

마우스 오버의 경우를 예로 든다. $ Btn에 마우스를 올리면 그 상위 div 중에 id 값을 얻을 수 있다.

... 2012/10/15

접속 동시 페이지 이동 태그

1. 메타태그 <head>와 </head> 사이에 넣는다. content 에 설정된 숫자는 이동되려는 숫자이므로 0초후면 페이지가 보이자마자 0초후에 이동한다는 뜻으로 설정된 값이다.  2. 자바스크립트의 replace를 이용해서 이동이 가능하다.  3. 자바스크립트의 href를 이용해서 이동이 가능하다.  4. php를 사용하는 페이지라면 php를 이용하여 이동이 가능하다.

... 2012/08/19

자바스크립트 새창 뛰우기 옵션과 방법

<head>와 </head> 사이에 아래 코드를 넣어주세요.  위 코드 설명드리자면, popup에는 그냥 그 팝업창 이름을 지정해줄 수 있어요. 아무거나 써 넣으셔도 됩니다. width =  숫자는 가로 크기, height = 숫자는 창 세로 크기 입니다. left = 숫자는 모니터 화면의 좌측으로 부터 얼마만큼 떨어뜨릴지 포지션을 ...

... 2012/04/09

입력칸 스타일과 자바스크립트 샘플

입력칸 배경에 이미지를 넣어서 포커스가 되면 이미지가 사라지고 다시 포커스가 아웃되면 나타나는 스크립트 확인 버튼도 이미지로 출력하는 내용

... 2012/03/19

플래시에서 자바스크립트 함수 호출

  이렇게 플래시에 넣어주고, 플래시를 삽입시킨 페이지에서 자바스크립트에 를 넣어주면 된다.

... 2011/11/24
.