-
Javascript, jQuery, jQuery 2016‧01‧13
풀사이즈 배경으로 동영상 or 이미지 삽입하기
풀사이즈 배경으로 동영상(또는 이미지) 삽입하기 미리보기 다운로드 인터넷 속도도 빨라 졌기 때문인지 풀사이즈 백그라운드로 동영상을 삽입하는 사례들이 종종 있습니다.예전에는 이미지로 어떻게든 시원하게 처리했었지만 이제는 동영상으로 더욱 인터렉티브한 사이트를 제공할 수 있게 되었습니다.더군다나 youtube나 vimeo와 같은 비디오 서비스의 동영상도 백그라운드로 넣을 수 있기 때문에 서버에 대한 부담감도 많이 줄어들었습니다.이번에는 간단하게 일반적인 동영상 파일을 백그라운드로 넣고 풀사이즈로 만드는 […]
-
Javascript, jQuery 2016‧01‧07
JS - 배열안의 객체들 중 속성과 값 매칭된 것 가져오기
json 형식으로 데이터를 불러왔다거나 혹은 직접 배열안의 객체 구조를 만들어 데이터화 하여 사용할 때 특정 값을 가진 객체를 찾아서 그 객체가 가진 다른 값을 가져올 때 사용한다. var people = [ { "name": "bob", "dinner": "pizza" }, { "name": "john", "dinner": "sushi" }, { "name": "larry", "dinner": "hummus" } ]; 이런 식으로 배열안에 객체가 있다면 […]
-
Javascript, jQuery 2015‧12‧28
jQuery - 버튼에 마우스 오버 상태에서 클릭한 뒤 마우스 상태에 맞게 css로 만드는 팁
css로만으로 처리하면 참 좋을 듯 한 이 기능은 css에서 hover를 이용하게 되면 클릭했을 때 마우스가 hover라는 영역을 벗어나더라도 hover 상태가 되어 있을 때가 있다. 물론 마우스를 조금만 움직여도 다시 out 상태로 돌아가긴 하지만 상황에 따라 바로 out상태로 구분되어져야하는 상황이 있기 때문에 jquery 코드와 css 코드로 응용해본다. $('#menuButton').on('click',function(e){ //클릭했을 때 액션이 있다면 여기에 스크립트 작성 }).mouseenter(function(e){ […]
-
Javascript, jQuery 2015‧12‧24
JS-페이스북 공유한 뒤 공유 여부값 가져오기
페이스북을 이용해서 게시물을 공유하게 한 뒤 공유가 되었거나 실패하였는지 확인하는 코드가 필요할 때가 있습니다. 이 코드를 작성하기 앞서 페이스북 개발자 센터에서 APP ID를 발급 받으셔야합니다. APP ID 발급 방법은 구글에서 'facebook app id'만 검색해도 쉽게 설명이 잘 나와있으니 참고하신 후 APP ID를 발급 받아놓습니다. 아래는 id 값 sharebutton 을 가진 공유버튼을 클릭하면 페이스북 공유 창이 […]
-
Memo, WP Plugin, WP Tip & Tech 2015‧11‧18
ACF 플러그인 - 싱글 값, 멀티 값 불러오기
http://www.advancedcustomfields.com/ 위 플러그인은 포스팅할 때 추가 입력칸을 만들어서 입력한 값이 사용자 화면에 나오게 하는 아주 유용한 플러그인이다. 설치 후 관리자의 좌측메뉴에서 Custom Fields를 클릭하면 Field Group이 나온다. 거기서 사용하려는 방식과 값들을 설정해준다. (이 방법은 포스팅하지 않겠음) 중요한 것은 관리자에서 입력한 값이 어떻게 사용자 화면에 나올 수 있는지다. 관리자에서 설정할 때 Field Label, Field Name 을 보았텐데 […]
-
2015-2016 2015‧10‧20
Nike Tech Studio
나이키 테크 스튜디오 팝업 스토어 - 디지털 인터렉티브 인터렉티브한 웹사이트를 제작하여 디지털 터치 미디어에 런칭하였습니다. HTML5와 css3, javascript를 이용해서 영상과 모션등을 자유롭게 보여줄 수 있었습니다. [vimeo clip_id="193660246" height="350"]
-
Javascript, jQuery 2015‧10‧17
javascript - head에 tag 엘리먼트 추가하기
상황에 따라 헤더에 스크립트 파일이나 css 태그를 넣어야하는 상황이 온다. 아래와 같이 넣으면 된다. if(!document.getElementById('id1')) { var script = document.createElement('script'); script.id = 'id1'; script.src = 'Scripts/Script1.js'; document.head.appendChild(script); } id는 존재하는 지 여부를 확인하는 것이기 때문에 넣는 편이 좋다.
-
Javascript, jQuery 2015‧10‧17
javascript - 주소의 파라미터값 변수로 받기
http://werty.co.kr/blog/?userid=honggildong&age=21 이런식으로 접속 주소가 발생하였고 클라이언트단에서 위 주소를 기반으로 변수를 받아 인터렉션을 구현할 때 아래 방법을 쓴다. function getParameterByName(name) { name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), results = regex.exec(location.search); return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); } 함수를 추가한 후 아래와 같이 이용해서 값을 […]
-
Javascript, jQuery 2015‧10‧08
구글 맵 - 일정 범위 다중 마커 합산한 Cluster(클러스터) 기능
구글 맵을 이용해서 마커를 찍을 경우가 있는데 이게 여러 개의 마커를 사용할 때가 있습니다. 그런데 여러개의 마커를 사용하게 되면 지도를 zoomout 을 많이 했을 때 엄청나게 많은 마커들이 집중되서 지저분해 보이게 됩니다. 그래서 만들어진 것이 cluster 입니다. 이 것은 여러개의 마커들이 어느 정도 범위안에 속하면 마커를 합치고 합친 갯수를 보여주게 됩니다. 이런 식으로 합쳐 나오게 […]
-
Javascript, jQuery 2015‧08‧10
자바스크립트 - 객체안에 값이 있는지 여부
var A = {}; 라는 객체에 있는지 없는지 여부를 length 로 사용해서 조건문을 만들게 되는데 A.length > 0 이렇게 바로 객체의 길이를 요청하면 에러가 난다. Object.keys(A).length > 0 이 처럼 길이를 요청하면 된다.