타쿠꺼
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의 위치를 함께 이동시키면 중앙에서 커지는 것처럼 보이게 할 수 있다.
MY BOTTLE 폰트http://software.naver.com/software/summary.nhn?softwareId=MFS_114889
https://msdn.microsoft.com/ko-kr/library/hh924823(v=vs.85).aspx https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
해결1 div의 top 위치를 함께 transition 시킨다. div {position: absolute;top: 0px;width: 100px;height: 0px;transition: all .5s;} div:hover {top: -50px;height: 100px;} div의 top이 위로 올라가면서 height의 크기가 커지기 때문에 가운데서 확장되는 효과를 볼 수 있다. 해결2 사실 top, left 등을 변화시키는건 시스템에 무리를 준다.transform을 사용하면 된다. transform은 기준 앵커값이 요소의 중앙이므로, scale(0) -> scale(1)로 변화시키면 중앙에서부터 원래 사이즈로 확장되는 효과를 볼 수 있다.