•  
  •  
  •  
  •  
 
2016 Werty Blog ː Designed by werty.co.kr ː nis@werty.co.kr
 
 
 
 
 
 
 
 
 
MOBIS Carfe Intro Movie
K2 shop Flash Update
esoom agency
werty wordpress blog build
Moss & Dew studio web site
KT Season Update
KOURSS.org
Korea Web Design
w3c korea
아빠..손 따뜻해..
아빠 손은 노아의 방주인가요?
이건 훌라후프인건가요..
실내화에 들어가서 안나오려고 하는 졸망이
꼬리들고 자는 졸망이
참 똘똘하게 생긴 졸망이
바구니 안에 들어가있는 졸망이
행운이 뿌잉뿌잉 발사!!
아빠 손에 뭔가 있어?!
 

동적으로 외부파일 불러와서 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

javascript – head에 tag 엘리먼트 추가하기

상황에 따라 헤더에 스크립트 파일이나 css 태그를 넣어야하는 상황이 온다. 아래와 같이 넣으면 된다.  id는 존재하는 지 여부를 확인하는 것이기 때문에 넣는 편이 좋다.

... 2015/10/17

javascript – 주소의 파라미터값 변수로 받기

http://werty.co.kr/blog/?userid=honggildong&age=21 이런식으로 접속 주소가 발생하였고 클라이언트단에서 위 주소를 기반으로 변수를 받아 인터렉션을 구현할 때 아래 방법을 쓴다.  함수를 추가한 후 아래와 같이 이용해서 값을 받아온다.  

... 2015/10/17
c2

구글 맵 – 일정 범위 다중 마커 합산한 Cluster(클러스터) 기능

구글 맵을 이용해서 마커를 찍을 경우가 있는데 이게 여러 개의 마커를 사용할 때가 있습니다. 그런데 여러개의 마커를 사용하게 되면 지도를 zoomout  을 많이 했을 때 엄청나게 많은 마커들이 집중되서 지저분해 보이게 됩니다. 그래서 만들어진 것이 cluster 입니다. 이 것은 여러개의 마커들이 어느 정도 ...

... 2015/10/08

자바스크립트 – 객체안에 값이 있는지 여부

var A = {}; 라는 객체에 있는지 없는지 여부를 length 로 사용해서 조건문을 만들게 되는데  이렇게 바로 객체의 길이를 요청하면 에러가 난다.  이 처럼 길이를 요청하면 된다.  

... 2015/08/10

javascript – 음수 양수 변환

가끔 수치를 양수로만 받아서 처리해야할 때가 많다. - 100 이든 100 이든 결과는 100이 나와야하는 경우다.  위 코드처럼 변환하고자 하는 값을 넣으면 결과는 양수인 100이 나온다.

... 2015/03/05
preview2

날씨와 관련된 UI

1. FORECAST WEATHER ICON SET PSD/EPS 다양한 날씨의 표현이 들어있어요. 파일은 psd와 eps로 제공됩니다. 링크 : http://www.antonoffplus.com/forecast-weather-icon-set/   2. flaticon - weather 플랫한 아이콘을 제공하는 사이트입니다. 날씨 카테고리로 링크는 http://www.flaticon.com/categories/weather 플랫이라 다 비슷비슷하나 상세보기를 들어가면 디자이너가 명시되어 있어요. 왠만하면 한명의 디자이너를 정하시고 그 사람이 만든 날씨 아이콘을 가져다 활용하시는게 좋습니다. 파일은 iconfont / ...

... 2015/02/24

Angularjs – 컨트롤러 밖에서 컨트롤러 안의 함수 실행

대부분은 아래와 같이 함수를 호출하게 된다.  클릭 A 라는 글자를 클릭하게 되면 스크립트 파일에서 controller 안의 함수를 호출한다. 값을 받은 callAlert 함수는 알럿창으로 click-A라고 출력하게 된다. 여기까지는 가장 일반적인 스코프안의 함수 실행이다. 그러나 스크립트 파일에서 angular controller 밖에서 해당 함수를 호출해야하는 경우가 생긴다.  이런 식으로 dom에서 ...

... 2015/02/24

Angularjs – 지정 엘리먼트 안에 자기만의 함수 호출을 가진 새로운 엘리먼트 생성하기

새로운 엘리먼트를 생성하는 방법은 아래 코드와 같다. 여기에 새로 생성되는 엘리먼트에 컨트롤러더 달아주고, ng-click과 같은 기능도 추가해서 만들어 보려고 한다. 일단 html을 아래와 같이 만든다.   이제 my-directive 엘리먼트 안에 새로운 엘리먼트를 만들고 함수 호출도 넣어보자.  제대로 작동하는지 아래 샘플로 확인할 수 있다. Result 탭을 클릭하여 Result Alert!! ...

... 2015/02/24
kma03

모바일웹에서 기상청 날씨(실황) api 가져와서 파싱해서 노출까지 자바스크립트로 만들기

시작하면서.. 앞으로 글은 장문이 될 것 같아 역시 말이 좀 짧습니다. 기분이 나쁘시더라도 정보를 빠르게 얻어가기 위함이라 생각하시고 양해 부탁드립니다. 아무리 구글을 검색해도 기상청 날씨 API 가지고 데이터를 노출하는 것까지 나와있는 내용이 없었다. 이상하게 순수 클라이언트단에서 처리할 수 있는 자바스크립트 관련 내용이 gridx, gridy ...

... 2015/02/23

jQuery – parseJSON에서 Uncaught SyntaxError: Unexpected token 오류날 때

이 것때문에 참 많이 고생했다. 혹시나 불러온 데이터의 형식이 문제인지 아니면 ajax로 불러올 때 설정을 잘못한건지 답을 찾기가 힘들었다. 그러던 중 조금씩 답이 보이기 시작했는데 바로 ajax로 불러온 데이터안에 구조중 빈공간이지만 내려쓰기 한 것이 있기 때문이였다. 즉 한줄로 써야하는 데이터를 html dom 구조로 ...

... 2015/02/13
.