Binceline

이렇게 해 놓으면 되더랑

애니메이션을 구현할 때, @keyframes bounceIn { from { top: 0px; } to { top: -20px; }} 위와 같이 구현하면 동작이 굉장히 끊긴다. 하지만 translate3d를 사용하면 굉장히 부드럽게 구현이 가능하다. @keyframes bounceIn { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -20px, 0); }} 이렇게 쓰면 된다.. 알아보니까 이렇게 부드럽게 되는 이유가.. 다음 옵션들을 사용하게 될 경우 GPU 가속을 사용하게 된다고 한다. 참고 URL : http://jindo.dev.naver.com/blog/2013/12/124-webkit-transform : tr..

참고 URL http://naradesign.net/wp/2008/05/27/144/http://div.or.kr/css-studying/after%20%EA%B0%80%EC%83%81%20%EC%84%A0%ED%83%9D%EC%9E%90 float을 하면 흔히 '띄워 준다' 고 한다. 이 의미가 뭔지 잘 몰랐었다. 근데.. 어떤 오브젝트에 float 속성을 부여하게 되면, 그 오브젝트는 float끼리만 영향을 준다. 부모의 속성이 height : auto이고 float 속성이 없다면, 자식의 높이를 몰라 감싸지 못한다.. 하나의 방법은 부모 속성에 float : left를 해 다같이 float이 되어버리자는 것이다. 하지만 이 방법은 부모의 부모, 그 부모 조상님까지 하.. 전부 다 float이 되어야..

margin:0 auto 를 이용해서 버튼을 가운데 정렬시키려 했다. 잘 되지 않아서 알아보니 버튼 속성은 inline-blobk이다. margin:0 auto가 적용되는 건 block 속성이다. 그래서 display로 속성변경을 해 주면 된다. 반대로 text-align: center를 사용할 땐, inline-block으로 지정해 주면 되겠다.

원본 url : http://www.homzzang.com/b/css3-3 벤더 프리픽스(vendor prefix) 개념W3C(World Wide Web Consortium)에서 CSS 표준안을 확정하기도 전에 기초 단계의 안건 문서를 바탕으로 각 브라우저사들이 기술력 과시 및 브라우저 시장 선도를 위해 자체적으로 만들어 해당 속성에 대해 각 브라우저를 상징하는 접두어를 붙여 해당 CSS3 속성을 임시로 테스트 함. border-radius 속성처럼 CSS3 표준안으로 이미 확정된 속성은 더 이상 접두어를 안 붙여도 작동하게 되지만, 그렇지 않은 속성 경우엔 해당 브라우저의 접두어를 붙여야 하며, 접두어가 붙은 브라우저에서만 해당 속성이 작동. 각 브라우저사를 상징하는 접두어-webkit- : 사파리 (..

keyframe으로 애니메이션을 만들어 해결해도 되지만, 더 간단하게 transition을 사용하는 방법이 있다. transition에 대한 설명을 보면 "CSS 속성을 변경할 때, 애니메이션 속도를 조절하는 방법을 제공한다." 말 그대로, '속도'이다. 예를 들면 색깔을 서서히 다른 색으로 바꾼다던가, 서서히 오브젝트를 돌린다던가 커지게 한다던가. 그런 일을 할 때 쓰면 된다. keyframe과 transition의 차이는 다음 글에 써야겠다.. 간단하게 말하면 transition은 심플하고 keyframe은 세부적인 효과를 다룰 수 있다. 예를 들면, 굳이 이벤트 형식이 아니더라도 자동으로 움직이고 있는 효과라던가.. 공부하던거 그대로 가져온 거라.. 더럽지만.. 여튼, h3의 'navbtn'의 cs..