목록2016/05 (23)
타쿠꺼
display: inline-block; 을 여러 엘리먼트에 주면, 이상하게도 엘리먼트간에 빈 공백이 발생한다.이는 inline 속성 자체가 스페이스바, 줄바꿈을 공백으로 인식하기 때문이다.따라서 이를 해결하는 방법은 여러가지가 있으나 이는 https://css-tricks.com/fighting-the-space-between-inline-block-elements/ 을 확인하면 되고, 현실적인 방안은 부모컨테이너에 폰트사이즈를 0으로 주는 것이다.
메뉴를 누르면 해당 메뉴의 본문이 내려오는 효과1. animate로 효과를 줄 땐 css transition효과는 빼야 한다. (반대도 마찬가지)2. HTML에서 article 배경은 고정되어 있기 때문에, article을 전부 만들지 말고 div로 나눠서 배경은 하나로 만드는게 좋을 것 같다.3. jquery 체이닝할 때, 코드의 순서에 신경을 써야 한다. 특히 콜백을 부를 때, 변수의 변화를 신경을 잘 써야함.4. 왠지 모르겠지만, 지금까지 animate는 하나의 요소에만 먹히는줄 알았다. 그게 아님.. 모든 요소가 다 먹힘.. each로 쓸 필요 없음..5. 따라서 사실상 article의 on 클래스로 활성화인걸 굳이 나눌 필요가 없는듯 하다. 원래는 이전에 나와있던 요소를 구분하기 위해 on 클래..
Math.random() 은 0(포함)부터 1(포함하지않음) 사이의 난수를 생성한다.Math.floor은 버림을 한다. 따라서 이를 이용하여 Math.floor(Math.random() * m) + n; 이렇게 하면 n ~ (n+m) 범위의 정수를 생성할 수 있다.
부모컨테이너의 z-index가 자식요소의 z-index보다 작아도, background는 항상 자식요소보다도 뒤에 깔려있다. transition간의 z-index 변화는 transition이 끝난 뒤에야 반영되므로 즉각적인 z-index 변화를 원한다면 스크립트를 써야 한다. 부모컨테이너의 크기를 넘어선 img 혹은 display: inline-block 의 자식요소들의 경우, hover의 범위가 이해할 수 없는 범위가 되어버린다.(https://jsfiddle.net/kimtaku/f1mewqxf/3/) 이런 경우, block 요소를 사용하니 해결되었다.(https://jsfiddle.net/kimtaku/f1mewqxf/4/)
모든 객체는 생성됨과 동시에 __proto__프로퍼티를 갖게 되는데, 이는 프로토타입 객체를 가리킨다.객체의 기본은 Object.prototype이다.함수의 경우 __proto__는 Function.prototype을, 배열의 경우에는 Array.prototype을 가리킨다. (그 외 Boolean, Number등이 있다)여기서 Function.prototype, Array.prototype도 객체이므로 결국 이들의 __proto__는 Object.prototype을 가리킨다.따라서 결국 모든 객체는 Object.prototype으로 귀결되며, Object.prototype만이 __proto__프로퍼티가 없다.함수를 새로 정의하는 경우, 함수이름.prototype 프로퍼티를 갖게 된다.그리고 이 함수를 ..
자바스크립트에서 생성자 함수는 함수에 new를 붙이면 그것이 생성자 함수가 된다. 가령, 어떤 함수 func이 선언되었다면 var foo = new func(); 과 같이 사용하면 func함수가 생성자함수로 작동하여 객체를 반환시킨다.이 때, 생성자 함수에 return을 명시할 필요는 없다. 다만, 명시적으로 객체를 반환시키는 경우엔 해당 객체를 반환시키며, 객체가 아닌 String, Number, Boolean 등을 반환시키면 해당 반환은 무시하고 this가 바인딩된 객체를 반환시킨다.작동 메커니즘은 다음과 같다. 1. 함수가 new와 함께 호출되면, 빈 객체를 생성한다.2. 해당 객체에 this를 바인딩 시킨다.3. 함수가 실행된다.4. 해당 객체를 반환한다. 따라서 생성자 함수는 내부적으로 this..
this 자바스크립트에서 this는 1. 메서드에서 호출되는 경우, 해당 메서드를 호출한 객체에 바인딩됨.2. 함수에서 호출되는 경우, 전역객체에 바인딩됨(js에선 window) 2의 경우가 문제인데, 만약 메서드 내에 함수를 정의하는 경우 해당 함수의 this는 메서드가 있는 객체에 바인딩되는게 아니라 전역객체에 바인딩 된다. 123456789101112131415161718192021222324var value = 100; var myObject = { value: 1, func1: function() { this.value += 1; console.log('func1() called. this.value: ' + this.value); var func2 = function() { this.value..
상단 네이게이션 바 만들기 1. delay += 100 구문을 통해 each가 하나씩 돌 때마다 delay의 값을 100씩 증가시킨다. 2. 스크립트로 hover 애니메이션을 구현할 수도 있지만, 구현할 수 있다면 css를 이용하는게 좋다. (속도면에서) 3. css에서 margin-top에 !important가 있는 이유는, html이 로드되면 스크립트가 인라인스타일로 margin-top값을 주기 때문에 우선순위에 의하여 인라인스타일이 더 높아서 hover의 css가 먹히지 않기 때문이다. 따라서 !important로 우선순위를 높여준다. this 자바스크립트에서 this는 1. 메서드에서 호출되는 경우, 해당 메서드를 호출한 객체에 바인딩됨.2. 함수에서 호출되는 경우, 전역객체에 바인딩됨(js에선 ..
div가 중앙에서부터 확장되는 애니메이션 메커니즘을 보자면,일반적으로 div의 height를 0에서 양의 수로 transition을 시키면 위에서 아래로 커지거나, 아래에서 위로 커진다.이 때 div의 위치를 함께 이동시키면 중앙에서 커지는 것처럼 보이게 할 수 있다.
