•  
  •  
  •  
  •  
 
2017 Nam Insik Portfolio site ː Designed by werty.co.kr ː nis@werty.co.kr
 
 
 
 
 
 
 
 
 
Seoul Cinema mobile web open
Korea Web Design
HFR sites open
MOBIS Carfe Intro Movie
KGC Season Update
HYUNDAI Department Store, PanGyo
Gillette Pop-up Store
Lecture (Building website using wordpress)
KGC Sports site renewal
실내화에 들어가서 안나오려고 하는 졸망이
내려오려고 하는 올망이
꼬리들고 자는 졸망이
행운이 뿌잉뿌잉 발사!!
잠은 편하게 자야지~
아빠 날개가 되어줘! 난 날을꺼야~
난 졸망이라고 함!
행운아 안약 넣자~
어허! 어허! 아빠 거기 내 단추~
 

input에 숫자만 입력받기 (최종판을 위해…)

숫자만 입력받는 방법은 무수히 많다. 숫자외 문자를 입력하면 글이 안써지게 하는 코드 (아쉽게 한글은 완성형으로 해당이 안된다.) css로 ime-mode 를 disabled 해서 한글은 안써지게 하는 코드 (아쉽게 크롬은 반응이 없다.) 또 어렵사리 만들어 놓으니 초성만 쓰고 탭을 눌러 이동하면 그 초성이 input칸에 남아있다. 등등 ...

... 2017/02/23

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

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

... 2017/01/31

JS – 모바일 접속 체크

 와와 같이 선언해준 뒤 사용할 때는 아래처럼 사용하면 된다. 모바일 체크를 2개 올렸는데 나는 이걸 좀 더 쓰는 편이다.

... 2017/01/13

크롬 브라우저 http 웹사이트에서 위치(지오로케이션) 가져오기 중단

크롬 브라우저에서 갑자기 위치 정보가 안들어오길래 찾아보니 이제부터 https의 사이트에서만 위치 정보 가져올 수 있게 업데이트 되었다고 합니다. 개인 위치 정보에 대한 보안 강화 취지인데요. 웹앱 만드시거나 모바일웹 만드실 때 지오로케이션 (geolocation) 쓰시는 개발 작업에 위 내용 유념하시면 좋을 듯합니다. 아래는 관련 구글의 ...

... 2017/01/11

JS – textarea의 글자들에 엔터값을 br태그로 변환

DB 데이터를 불러와서 노출하거나 textarea로 부터 입력받은 데이터를 DB에 저장하려 할 때 종종 쓰인다.  str이라는 변수에 textarea에서 입력받은 데이터가 있다면 엔터는 br 태그로 변환된다. 아래는 예제 미리보기이다.

... 2016/12/16

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

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

... 2016/12/12

JS – 필수 입력칸에 미입력시 안내글 수정

필수 입력해야할 입력칸에 아무것도 입력하지 않고 submit 버튼을 눌렀을 때 나오는 안내글을 수정하자.  이렇게 아이디를 입력 받기 위한 입력칸이 있을 때 oninvalid 속성에 값을 해당 함수로 안내글을 넣어두면 된다.

... 2016/11/22

JS – 유튜브 영상 (음소거,자동재생 상태로) 다중 삽입하기

웹사이트에 유튜브 영상을 여러개 삽입하여 자동 재생시키되 음소거를 시키고 싶을 경우가 있다. 어떻게 보면 간단할 듯 한데 실제로 적용되기 까다롭다. 이유는 음소거 때문이다. 그냥 html 문서에 iframe으로 <iframe src="http://www.youtube.com/embed/영상ID"> 이런식으로 여러개 놓고 자동재생을 시키고 싶을 때는 영상ID 뒤에 ?autoplay=1 파라미터를 추가하고 반복이면 다시 뒤에&loop=1&playlist=영상ID를 ...

... 2016/10/26

Gillette Pop-up Store

질레트 팝업 스토어 - 디지털 인터렉티브 가로 페럴렉스 웹사이트로 제작하여 외부에서 시리얼 통신을 통해 인터렉티브한 미디어를 제작하였습니다. 마그네틱 센서의 절대값을 시리얼 포트와 자바스크립트를 이용해서 마우스의 휠과 같은 역할로 투명 디스플레이 안에서 컨트롤 컨트롤이 되도록 개발되었습니다. 디스플레이 뒤의 모형에 맞춰 스크롤에 맞게 이벤트가 발생하도록 ...

... 2016/10/19

css – div에 글자 입력 받고 placeholder 넣기

 위 처럼 html을 작성한 후 아래처럼 css를 작성한다.  아래는 샘플

... 2016/10/17

구글 통계 – 캠페인 url 만들기

구글 애널리틱스에 캠페인과 관련된 링크를 만들어 사용하게 되면 접속하는 경로의 파라미터들을 통해 어디서 접속해서 어떤 캠페인을 통해 어떤 것을 클릭했는지 등과 같은 좀 더 자세한 추적을 알아낼 수 있다. https://ga-dev-tools.appspot.com/campaign-url-builder/

... 2016/10/11

그림문자인 이모지(emoji) 웹에 사용하기

요즘 아이폰, 안드로이드와 같은 스마트 기기에서 이모지(emoji, 원래는 일본 명칭 에모지이지만 영어 발음으로 전해지다 보니 이모지가 됨)를 종종 사용한다. 특히 인스타그램, 페이스북과 같은 소셜 미디어에서 종종 보았을 것이다. 이게 제공되는 유니코드가 있고 그 유니코드에 따라 스마트폰 OS나 소셜 미디어 마다 이미지로 노출하는 ...

... 2016/10/05

iOS에서 가로모드시 글자 크기 변경 막기

ios 모바일웹은 스마트폰을 가로모드(Landscape)로 변경되면 글자가 갑자기 커져버리는 현상이 발생함. 이를 막기 위해서 아래 코드 body에 삽입  

... 2016/09/12

스코프 데이터 html로 바인딩하기

예를 들어 $scope.text1 = '<h3>제목</h3>';라고 있고 dom에서 {{text1}} 하면 바로 <h3>제목</h3>가 노출된다.이를 html로 적용시키려면 아래와 같이 만들어야한다. 방법 1. 헤더에서 angular-sanitize 를 불러와준다.   모듈에 ngSaitize를 넣어준다.  이제 준비가 되었다. dom에는 아래와 같이 넣어준다. 그럼 제대로 데이터가 html로 바인딩 된 것을 확인할 수 있다. 방법 2. 크게 다른건 없다.조금 설정하는 ...

... 2016/09/08

앵귤러js 공부하기 좋은 사이트 모음(계속 업뎃)

공식 레퍼런스https://docs.angularjs.org/api w3 school의 앵귤러jshttp://www.w3schools.com/angular/angular_ref_directives.asp (영문 사이트)http://www.w3ii.com/ko/angular/default.html (한글화) 국내 실무에 쓰일 법한 내용으로 정리해 놓은 블로그http://palpit.tistory.com/810 (국내) 추가 레퍼런스 , 예제 사이트 http://learnkode.com/Tutorial/Angular/angular-introduction (해외, 또 다른 예제와 레퍼런스 사이트)http://sixrevisions.com/javascript/learn-angular/  (해외, 앵귤러 시작하기 포스팅)http://plnkr.co/edit/Z9b2NJCCSpMK2VBTCM7l?p=preview  (해외, 예제, ui 라우터와 라우터 정보 활용)

... 2016/09/08

페이지 새로 불러오기

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

... 2016/09/08
.