•  
  •  
  •  
  •  
 
2017 Nam Insik Portfolio site ː Designed by werty.co.kr ː nis@werty.co.kr
 
 
 
 
 
 
 
 
 
Gillette Pop-up Store
Google Webmaster Conference 2013
Impress Media FB App
Samsung Thunders site renewal
Seoul Cinema site renewal
HCI KOREA 2014
K2 shop Flash Update
Lecture (Building website using wordpress)
Character illust for iPhone
바구니 안에 들어가있는 졸망이
아빠 손은 노아의 방주인가요?
아빠 손에 뭔가 있어?!
아빠..손 따뜻해..
행운아 안약 넣자~
아빠 날개가 되어줘! 난 날을꺼야~
꼬리들고 자는 졸망이
거품 샤워중인 졸망이
이건 훌라후프인건가요..
 

React – 01. 준비하기

완전 처음 접한다. 들어는 보았지만 어떻게 시작해야할지 찾아다니면서 엄청 해맸다. 내가 생각하기엔 결론은 두가지 방법이다. 중요한건 ES6, JSX다. 실서버에 올려놓고 ES6와 JSX를 변환을 하느냐?  아니면 올려놓기 전에 변환하고 올리느냐 라는 방식으로 난 구분했다. 올려놓고 번들링 하는 방식의 구축 방법은 http://yumere.tistory.com/78 그렇지 않고 로컬에서 npm으로 번들링하여 완성하고 구축하는 ...

... 2017/04/21

Gulp – 플러그인 설치 및 사용하기

gulpfile.js 를 열고 이제 자동화 설정 셋팅을 해보자. 내가 하려는 자동화 작업은 이렇다. js는 js폴더에 작업한 여러개의 js를 합치고, 코드를 압축한다. scss는 컴파일해서 css로 만들되 역시 코드를 압축해 놓는다. html 파일은 그냥 개발폴더에 추가되거나 수정될 때 배포 폴더에 자동으로 수정된다. localhost로 ...

... 2017/04/11

Gulp – 시작전 준비하기

어제 Gulp(걸프)란 걸 접하고 구글링을 통해서 습득해보는 도중 적어놔야겠다 생각 들어서 정리를 해보려고 한다. (왼쪽은 Gulp 로고라고 하니 알아두자) Gulp는 처음 접하였고 Grunt도 들어는 보았지만 아직 해보진 않았다. 결론은 셋팅해두면 실무에 작업 하는데 도움이 되는 좋은 '자동 빌드 도구'이다. 본인은 이미 비슷한 도구로 ...

... 2017/04/11

JS – textarea 폰트 사이즈 변경

제이쿼리로 하면 간단하지만 자바스크립트로 폰트 사이즈를 직접 변경할 때 아래처럼 getElementById로 선택자를 선언하고 수정하면 된다. 만약 클래스값으로 선택하고자 한다면 getElementsByClassName('클래스명') 이렇게만 지정하면 오류난다.  못찾는다. getElementsByClassName('클래스명') 이렇게 순번을 넣어 개별적으로 선언해주어야 오류나지 않는다.  

... 2017/03/27

PC와 모바일에서 텍스트를 클립보드에 복사 시키기

현실적으로 ios와 안드로이드 및 pc를 만족시키는 클립보드 스크립트는 없다. 기기마다 또는 os 마다 보안 정의도 다르기 때문이기도 하다. 아무튼 이 모든 기기를 만족시켜주기 위해서 두개의 플러그인을 사용해서 이용해보았다. clipboard.js : https://clipboardjs.com/ copy2clipboard.js 자세한 사용법은 각 사이트를 참고하면 되고, 아래는 작성해본 코드이다. head 안에 넣어서 스크립트를 ...

... 2017/03/17

자바스크립트를 이용해 위도,경도를 주소로 변환하기

위도 경도 데이터는 있는데 이를 주소명, 지역명으로 변환하고 싶을 때 사용한다. API 키 발급과 정보 : https://developers.daum.net/services/apis/local/geo/coord2addr  

... 2017/03/02

체크박스 라벨을 이미지 만들었고 클릭해도 반응 없을 때

input  중에 checkbox를 만들고 checkbox는 안보이게 포지션 잡은 뒤 label안에 디자인된 체크박스를 넣었을 때 가끔 이 안의 이미지를 눌러도 checkbox 값이 변경되지 않는 경우가 있다. 이럴 때 스크립트를 넣어주자.  

... 2017/03/02

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
.