FEDev Story

웹사이트 제작시 많이 사용되는 webfont는 시스템 폰트보다 훨씬 큰 용량을 차지한다. 그런 이유로 웹폰트 제작업체는 webfont의 로딩후 콜백함수를 호출하는 등 작업에 필요한 API를 제공하는게 보통이다. 하지만 API를 제공하지 않는다면? 페이지를 정상적으로 렌더링하려면 이미지, css, 자바스크립트 등 많은 resource 파일들이 정상적으로 먼저 로딩되어야 한다. 하지만 큰용량을 차지하는 webfont의 로딩을 관리하는 API가 제공되지 않는다면 생각지 못한 오류를 만날 수 있다. fontfaceonload.js fontfaceonload.js (github.com/zachleat/fontfaceonload) 플러그인은 webfont가 정상적으로 로딩되었는지 실패하였는 지에 따라 콜백함수를 실..

출처 : http://jsonobject.tistory.com/209 HTML에서 JavaScript 파일 실행하기 HTML 문서에서 독립된 파일의 JavaScript 소스 코드를 실행하기 위해서는 head 또는 body 엘러먼트의 자식 엘러먼트로 아래와 같이 script 엘러먼트를 작성하는 방법이 일반적으로 많이 쓰인다. jQuery를 이용하여 JavaScript 파일을 동적으로 실행해보자 그렇다면 HTML이 아닌 JavaScript 레벨에서 외부의 JavaScript 소스 코드를 실행하는 것이 가능할까? 가능하다. 단순히 script 엘러먼트를 생성하고 src 애튜리뷰트를 부여 후 DOM에 추가하면 된다. jQuery를 사용하면 아래와 같이 한 줄의 명령으로 실행할 수 있다. // Velocity.j..

출처 : http://jsonobject.tistory.com/39 내부 프로젝트에서 코드와 같은 룩업 데이터를 선택하는 화면은 팝업 윈도우로 호출하려는 생각에 팝업 윈도우에서 유저가 선택한 값을 부모 윈도우로 반환하는 방법을 테스트하고 정리하였다. 부모 윈도우에서는 아래와 같이 작성한다. function openNewWindow(url) { var name = '_blank'; var specs = 'menubar=no,status=no,toolbar=no,width=500,height=200'; var newWindow = window.open(url, name, specs); newWindow.focus(); } function getReturnValue(returnValue) { var div =..

출처 : http://ismydream.tistory.com/98event.stopPropagation() event.stopPropagation() 을 이해하기 위해서는 우선 HTML 상에서 사용자 이벤트가 어떻게 전달되는지 이해해야 합니다. 웹에서의 클릭이벤트 전파propagation 의 사전적의미는 전파, 확산입니다. 사용자가 마우스로 웹페이지 내의 버튼을 클릭했을때 대부분의 사람들은 버튼만 반응했다고 생각하게 됩니다. 하지만 웹페이 내부에서는 버튼을 감싸고 있는 부모 태그들 또한 클릭 이벤트에 반응하게 됩니다. 이것을 Bubble Up(버블업)이라고 합니다. 위 슬라이드 우측의 문서구조를 보면 a 태그는 li, ul 의 두개의 부모태그가 있습니다.사용자가 a 태그를 클릭했을때 클릭이벤트는 a 태그..

//새로 고침 방지 기능 실행 function LockF5(){ if (event.keyCode == 116) { event.keyCode = 0; return false; } } document.onkeydown = LockF5; IE8에서 작동하도록 하려면 아래 방법을 사용한다. document.onkeydown=function(e) { var event = window.event || e; if (event.keyCode == 116) { event.keyCode = 0; alert("This action is not allowed"); return false; } }

DOM 업데이트시 브라우저는 화면을 다시 그리고(repaint), 엘리먼트를 재구조화(reflow)하는데, 이 또한 비용이 많이 드는 작업이다. 원칙적으로 DOM 업데이트를 최소화하는 게 좋다. 문서 조각을 생성해 외부에서 수정한 후, 처리가 완전히 끝난 다음에 실제 DOM에 추가하는 방법이 있다. var p, t, frag; frag = document.createDocumentFragment(); p = document.createElement('p'); t = document.createTextNode('first paragraph'); p.appendChild(t); frag.appendChild(p); p = document.createElement('p'); t = document.create..