-
2015-2016 2016‧10‧19
Gillette Pop-up Store
질레트 팝업 스토어 - 디지털 인터렉티브 가로 페럴렉스 웹사이트로 제작하여 외부에서 시리얼 통신을 통해 인터렉티브한 미디어를 제작하였습니다. 마그네틱 센서의 절대값을 시리얼 포트와 자바스크립트를 이용해서 마우스의 휠과 같은 역할로 투명 디스플레이 안에서 컨트롤 컨트롤이 되도록 개발되었습니다. 디스플레이 뒤의 모형에 맞춰 스크롤에 맞게 이벤트가 발생하도록 매칭해놓았으며 영상들을 제어하도록 되어있습니다. [vimeo clip_id="193542807" height="350"]
-
Html, CSS 2016‧10‧17
css - div에 글자 입력 받고 placeholder 넣기
<div contenteditable="true" placeholder="여기에 글자를 입력해주세요."></div> 위 처럼 html을 작성한 후 아래처럼 css를 작성한다. [contenteditable=true]:empty:before{ content: attr(placeholder); display: block; /* For Firefox */ } div[contenteditable=true] { border: 1px solid #ddd; color : #333; font-size: 12px; width: 300px; padding: 5px; } 아래는 샘플
-
Tools 2016‧10‧11
구글 통계 - 캠페인 url 만들기
구글 애널리틱스에 캠페인과 관련된 링크를 만들어 사용하게 되면 접속하는 경로의 파라미터들을 통해 어디서 접속해서 어떤 캠페인을 통해 어떤 것을 클릭했는지 등과 같은 좀 더 자세한 추적을 알아낼 수 있다. https://ga-dev-tools.appspot.com/campaign-url-builder/
-
Html, CSS 2016‧10‧05
그림문자인 이모지(emoji) 웹에 사용하기
요즘 아이폰, 안드로이드와 같은 스마트 기기에서 이모지(emoji, 원래는 일본 명칭 에모지이지만 영어 발음으로 전해지다 보니 이모지가 됨)를 종종 사용한다. 특히 인스타그램, 페이스북과 같은 소셜 미디어에서 종종 보았을 것이다. 이게 제공되는 유니코드가 있고 그 유니코드에 따라 스마트폰 OS나 소셜 미디어 마다 이미지로 노출하는 디자인이 조금씩 다른 것이지만 의미와 코드는 거의 같다. 이는 바로 이모지 유니코드 테이블을 […]
-
Html, CSS 2016‧09‧12
iOS에서 가로모드시 글자 크기 변경 막기
ios 모바일웹은 스마트폰을 가로모드(Landscape)로 변경되면 글자가 갑자기 커져버리는 현상이 발생함. 이를 막기 위해서 아래 코드 body에 삽입 -webkit-text-size-adjust: 100%;
-
Angularjs 2016‧09‧08
스코프 데이터 html로 바인딩하기
예를 들어 $scope.text1 = '<h3>제목</h3>';라고 있고 dom에서 {{text1}} 하면 바로 <h3>제목</h3>가 노출된다.이를 html로 적용시키려면 아래와 같이 만들어야한다. 방법 1. 헤더에서 angular-sanitize 를 불러와준다. <script src="/angular-1.5.8/angular-sanitize.min.js"></script> 모듈에 ngSaitize를 넣어준다. var app = angular.module('모듈이름',['ngRoute','ngAnimate','ngSanitize'], function($httpProvider){ }); 이제 준비가 되었다. dom에는 아래와 같이 넣어준다. <p ng-bind-html="text1"></p> 그럼 제대로 데이터가 html로 바인딩 된 것을 확인할 수 있다. 방법 2. […]
-
Angularjs 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 라우터와 라우터 정보 활용)
-
Angularjs 2016‧09‧08
페이지 새로 불러오기
현재 보고 있는 페이지를 리로드가 필요할 때가 있다. 라우터를 주로 쓰게 되는데 $location.path('경로') 이렇게 하면 ng-router와 ng-view 로 해당 페이지가 바인딩 되긴 하지만 캐시가 남아있다.캐시를 지우는 $templateCache.removeAll(); 를 쓰기도 하지만 php를 이용해서 로그인 전/후에 따른 php 분류 코드가 제대로 안먹힐 때가 있다. 그래서 결론은 $window.location.reload(); 이걸 쓴다.
-
Javascript, jQuery 2016‧07‧18
JS-아이폰 사파리 앞으로,뒤로 버튼에 대한 캐시 삭제
아이폰의 앞으로 또는 뒤로가기 버튼을 이용해서 페이지를 이동하게되면 캐시를 가지고 있어서 자바스크립트가 새로이 계산되어야할 것이 계산되지 않는 경우가 있다. 캐시와 무관하게 페이지가 열릴 경우 리로딩 되게 하는 스크립트를 넣으니 해결 되었다. $(window).bind("pageshow", function(event) { if (event.originalEvent.persisted) { window.location.reload() } });
-
Javascript, jQuery 2016‧06‧29
JS - 브라우저 체크(ie 11 포함)
windows 10에 있는 ie 11은 navigator.userAgent 로 체크할 경우 msie로 더이상 체크할 수 없게 되었다. 자세한 이유는 'User Agent 파헤치기 (navigator.userAgent)' 여기에 자세한 설명이 있다. 어찌되었던 아래는 모든 ie일 경우 체크하게 하는 조건문이다. var agent = navigator.userAgent.toLowerCase(); if ( (navigator.appName == 'Netscape' && agent.indexOf('trident') != -1) || (agent.indexOf("msie") != -1)) { // ie일 경우 }else{ // […]