•  
  •  
  •  
  •  
 
2018 Nam Insik Portfolio site ː Designed by werty.co.kr ː nis@werty.co.kr
 
 
 
 
 
 
 
 
 
K2 shop Flash Update
Google Webmaster Conference 2013
Nike Tech Studio
Impress Media FB App
TOYOTA PRIUS 2016
KGC Sports site renewal
Gillette Pop-up Store
HFR sites open
Moss & Dew studio web site
오잉? 이건 뭐지?
내려오려고 하는 올망이
실내화에 들어가서 안나오려고 하는 졸망이
바구니 안에 들어가있는 졸망이
아빠..손 따뜻해..
참 똘똘하게 생긴 졸망이
꼬리들고 자는 졸망이
먹이로 유인하다
이불 덮고있는 졸망이
 

페이지 새로 불러오기

현재 보고 있는 페이지를 리로드가 필요할 때가 있다. 라우터를 주로 쓰게 되는데 $location.path('경로') 이렇게 하면 ng-router와 ng-view 로 해당 페이지가 바인딩 되긴 하지만 캐시가 남아있다.캐시를 지우는  $templateCache.removeAll(); 를 쓰기도 하지만 php를 이용해서 로그인 전/후에 따른 php 분류 코드가 제대로 안먹힐 때가 있다. 그래서 ...

... 2016/09/08

JS-아이폰 사파리 앞으로,뒤로 버튼에 대한 캐시 삭제

아이폰의 앞으로 또는 뒤로가기 버튼을 이용해서 페이지를 이동하게되면 캐시를 가지고 있어서 자바스크립트가 새로이 계산되어야할 것이 계산되지 않는 경우가 있다. 캐시와 무관하게 페이지가 열릴 경우 리로딩 되게 하는 스크립트를 넣으니 해결 되었다.  

... 2016/07/18

JS – 브라우저 체크(ie 11 포함)

windows 10에 있는 ie 11은 navigator.userAgent 로 체크할 경우 msie로 더이상 체크할 수 없게 되었다. 자세한 이유는 'User Agent 파헤치기 (navigator.userAgent)' 여기에 자세한 설명이 있다. 어찌되었던 아래는 모든 ie일 경우 체크하게 하는 조건문이다.  아래는 마이크로소프트 개발자 네트워크에 올라온 문서이다.참고하면 좋을 듯..  https://msdn.microsoft.com/ko-kr/library/hh869301(v=vs.85).aspx

... 2016/06/29

jQuery – input과 textarea 글자 입력수 제한

해외에서 공유된 코드이다. 원문 : http://www.scriptiny.com/2012/09/jquery-input-textarea-limiter/  이렇게 플러그인으로 만들어 놓고 아래처럼 코드를 사용한다. 아직까지 안써봤지만 필요할 때 유용하게 써먹어야지!

... 2016/05/03

TOYOTA KOREA website renewal

토요타 코리아 - 웹사이트 반응형 웹사이트로 제작하였습니다. 개발 초에는 ie7부터 맞추는 작업도 있었으며, 비주얼적인 면이 많고 이와 함께 인터렉션들도 많기 때문에 여러 사용자들의 행동 변수들을 감안하여 시나리오에 맞춰 개발하게 되었습니다. youtube 영상을 담은 슬라이드 플러그인, 비규칙적 카드 레이아웃 플러그인을 만들어서 적용시켰습니다.

... 2016/04/14

TOYOTA PRIUS 2016

토요타 프리우스 2016 - 마이크로 웹사이트 프로모션 웹사이트로 PC 버전을 원페이지 스크롤로 제작하였습니다.자바스크립트로 심플한 슬라이드부터 확장형 슬라이드를 플러그인으로 제작 / 유튜브 API를 이용해여 빅비지 영상으로 이벤트 핸들을 활용 / 마우스 인터렉션을 이용한 마스킹 / 이미지 시퀀스를 통한 연출 스크립팅등을 제작하였습니다.  

... 2016/03/25

JS – youtube 재생 완료 이벤트 받기

유튜브 영상을 가져와서 사이트를 제작할 경우가 발생할 때 여러가지 인터렉션을 구현하게 된다. 그 중 영상의 재생이 끝났다는 이벤트를 받아와서 다른 행동이나 스크립트가 실행되도록 하고자 할 때 아래와 같이 스크립트를 작성한다. 시작 전 ie8 이하는 해당 기능이 되지 않는다.  이유는 html5를 지원하는 브라우저에서만 ...

... 2016/03/24

JS – 이미지 로드 완료된 후 스크립트

 

... 2016/03/10

관리자가 보내는 이메일 주소와 이름 변경하기

워드프레스에서 회원들에게 보내는 이메일이 있을 경우 어떤 경우, 보내는 사람이 wordpress 로 나오고 보내는 이메일 주소가 wordpress@자기 도메인 으로 나오는 경우가 있다. 본인은 계정이 잠겼을 때 해당 계정 사용자에게 이메일이 보내지는데 저렇게 보내지게 되어서 수정하기로 했다.   테마폴더의 functions.php 를 열어 아래 코드를 추가하자.  이렇게 ...

... 2016/02/25

동적으로 외부파일 불러와서 dom에 바인딩($http, ng-view, ng-include 3가지 활용)

html 중에 메뉴를 아래와 같이 만들었다 가정합니다. index.html 그리고 메뉴 구조를 아래처럼 변수에 담아두겠습니다. app.js 이렇게 만들어 놓는 이유는 외부에서 동적으로 저 안에 메뉴가 추가되거나 삭제 되면 반영이 될 수 있도록 하기 위함입니다.  다음은 js파일에 앱설정을 합니다. app.js 모듈 설정을 추가 합니다.  모듈은 라우터랑 애니메이션을 넣겠습니다. 이제 스크립트로 ...

... 2016/01/19

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

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

... 2016/01/13

JS – 배열안의 객체들 중 속성과 값 매칭된 것 가져오기

json 형식으로 데이터를 불러왔다거나 혹은 직접 배열안의 객체 구조를 만들어 데이터화 하여 사용할 때 특정 값을 가진 객체를 찾아서 그 객체가 가진 다른 값을 가져올 때 사용한다.  이런 식으로 배열안에 객체가 있다면 여기서 dinner가 sushi 인 사람의 이름을 가져올 때는 아래와 같다.  이렇게 ...

... 2016/01/07

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

ACF 플러그인 – 싱글 값, 멀티 값 불러오기

http://www.advancedcustomfields.com/ 위 플러그인은 포스팅할 때 추가 입력칸을 만들어서 입력한 값이 사용자 화면에 나오게 하는 아주 유용한 플러그인이다. 설치 후 관리자의 좌측메뉴에서 Custom Fields를 클릭하면 Field Group이 나온다. 거기서 사용하려는 방식과 값들을 설정해준다. (이 방법은 포스팅하지 않겠음) 중요한 것은 관리자에서 입력한 값이 어떻게 사용자 화면에 ...

... 2015/11/18

Nike Tech Studio

나이키 테크 스튜디오 팝업 스토어 - 디지털 인터렉티브 인터렉티브한 웹사이트를 제작하여 디지털 터치 미디어에 런칭하였습니다. HTML5와 css3, javascript를 이용해서 영상과 모션등을 자유롭게 보여줄 수 있었습니다. 

... 2015/10/20
.