목록2016/05 (23)
타쿠꺼
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)로 변화시키면 중앙에서부터 원래 사이즈로 확장되는 효과를 볼 수 있다.
Attributes: 속성값 다루기 - .attr() : attribute를 가져옴 / 설정 (첫번째요소 / 모든요소)- .prop() : prop을 가져옴 / 설정 (첫번쨰요소 / 모든요소) 여기서 attr과 prop은 비슷한데, attr은 html 태그에 기술되어 있는 속성값을 다룬다면, prop은 태그에 대한 기능을 다룬다.대개 form과 관련하여 attr과 prop의 사용이 나뉘는데 위와 같이 있을 경우 $('input').prop('checked') : true$('input').attr('checked') : checked 와 같이 표현된다. attr은 태그의 속성값을 그대로 가져오고, prop은 기능을 가져온다. function method() {console.log('method');}위와..
animation의 재생 횟수 카운트는 엘리먼트의 display가 none 상태가 되면 초기화된다.만약 한 번 재생으로 해놨다면, 해당 엘리먼트의 display가 none이 되기 전까지 다시는 재생되지 않는다.display가 none이었다가 다시 렌더링이 된다면 animation이 설정된 횟수 대로 또다시 재생된다.
CSS로 애니메이션효과를 만들 수 있다.애니메이션은 우선 키프레임을 정의하여 효과를 부여한다. 1234567@keyframes name { 0% { ... } n% { ... } 100% { ... }}cs 와 같이 키프레임을 정의한다. 키프레임을 정의했으면 애니메이션을 적용할 셀렉터에 animation 프로퍼티로 적용한다. 1234567891011.selector { animation: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state;} cs anim..
- IE의 렌더링 엔진을 고정시킴. - 반응형 웹을 위해 설정한다. 설정하지 않으면 모바일 기기에서 단순히 전체화면이 출력된다. - 설정하면 모바일기기의 가로폭을 인지하여 작동한다. 따라서 미디어쿼리를 이용해 반응형 웹을 구현할 수 있는 것.
font: style | variant | weight | stretch | size / line-height | family
var interval = setInterval(function, ms); - ms간격만큼 function 실행. clearInterval(interval); - interval 중지 var timeout= setTimeout(function, ms); - ms뒤에 function 실행. clearTimeout(timeout); - timeout중지
걸스데이 폰트http://www.dafont.com/patriot.font