목록분류 전체보기 (71)
타쿠꺼
bubbling이란 자식요소 -> 부모요소로 이벤트 트리거가 순차적으로 작동하는것을 말한다.즉 자식요소를 클릭하면 부모요소도 클릭되는 효과를 갖는 것이다.이는 이벤트트리거의 디폴트 값이다. capturing은 이와는 반대로 부모요소 -> 자식요소로 이벤트 트리거가 순차적으로 작동하는것을 말한다.이는 따로 설정을 해주어야 한다. 이벤트리스너 메서드의 3번째 매개변수로 true를 넘겨주면 된다.
visibility: hidden; 은 보이진 않지만, 공간은 차지하고 있다. 그러나 마치 없는것 처럼 상호작용은 하지 않는다.예를 들어 이 속성이 적용된 엘리먼트에 mouseenter 이벤트리스너를 등록해도, hidden이기 때문에 작동하지 않는다.
슬라이드메뉴 만들기 1. 커서가 있던 위치에 따라 슬라이드 되는 방향이 바뀐다. 2. background-position을 이용해 3분할을 한다.3. 이미지크기가 800px인데 각 슬라이드 화면의 크기는 265px + border-right 1px = 266px이다.그리고 마지막 슬라이드는 border-right가 없으므로 컨테이너의 width는 797px이다.4. animate로 background-position을 사용할 때에는 position-x, position-y를 나눠서 하자."background-position": "~px ~px"가 먹히지 않는다.
block 엘리먼트들은 디폴트값으로 width: 100%, height: auto; 값을 갖는데 이는 position: static, relative 일 때만이다.position: absolute, fixed인 경우 block 엘리먼트들은 자신들이 담고있는 자식요소의 크기만큼 컨테이너 크기를 갖게 된다.이는 hover 영역과 연관이 있으므로 잘 알아두도록 하자.
오버워치 폰트
Koverwatch http://kr.battle.net/forums/static/fonts/koverwatch/koverwatch.ttf
네비게이션 만들기 1. 스크립트 animate 사용을 지양하였다.2. css 트랜지션을 이용하여 스크립트로는 클래스를 주고, 빼면서 자연스럽게 트렌지션으로 애니메이션 효과를 줬다.3. setTimeout으로 메뉴를 마구 눌렀을 때, 겹치는 현상을 방지하였다. 크로스 브라우저를 위해선 animate 사용을 해야겠지만.. 어차피 몇년 뒤면 IE 구버전은 사라질것이다. z축 스크롤 1. body의 높이를 적당히 크게 설정한다.2. translateZ와 perspective를 이용하여 position: absolute로 한곳에 여러개를 배치한다.3. 스크롤에 따라 동적으로 translateZ의 크기를 각각 변화시킨다.
Deferred 생성 var dfd = $.Deferred(function(deferred) { });cs Deferred 객체를 생성한다. 매개변수로 익명함수로 넘기고, 이 익명함수는 Deferred를 반환하기 전 실행된다.익명함수의 매개변수는 생성자로 넘겨지는 Deferred객체이다.이렇게 생성된 Deferred는 resolve, reject, notify가 호출되기 전까지 대기상태에 머무른다.대개는 $.Deferred(); 로 매개변수를 따로 넘기진 않는다. Deferred.state() Deferred 객체의 상태에 관한 문자열을 반환한다.resolve, reject 되지 않았으면 "pending"notify 되었어도 "pending"resolve 되었으면 "resolved"reject 되었으면 ..
1. Brackets Icons2. Color Highlighter3. Custom Region Code Folding4. Emmet5. Indent Guides6. jQuinter7. Paste and Indent8. Tabs - Custom Working9. White Space Sanitizer10. Stripper (Skin)