문제 해결 3 썸네일형 리스트형 문제 해결 2021.07.06 css 애니메이션 jank 해결하기 2편 : 여백 상쇄 이전 포스팅에서 다뤄봤던 Jank 현상은 앞서 말했던 방법으로 해결 가능하다. 그러나 더 간단한 방법이 있었으니... jank 현상이 일어났던 진짜 원인은 다른 데 있었다. 결론 결론 먼저 말하자면 여백 상쇄 현상을 제거하니 기존 코드에서도 jank가 발생하지 않았다. ...그런데 여백상쇄가 무엇일까? 이번에도 어렵게 돌아가기 스타트 margin collapse (마진 상쇄, 여백상쇄) margin collapse(이하 여백 상쇄)란, 수직으로 맞닿은 블록의 마진은 가장 큰 값으로 수렴한다는 뜻이다. 말이 더 어려운 것 같은데, 그림으로 살펴보면 다음과 같다. 위의 예시는 형제끼리 맞닿아 있을 때를 나타낸 것이고, 부모 자식 간에도 여백 상쇄가 일어난다. 부모와 자식이 맞닿아 있을 때에는 조금 특이한 현.. 문제 해결 2021.06.24 css 애니메이션 버벅거림(jank)해결하기 1편 오늘의 문제 내가 한땀한땀 예쁘게 만든 애니메이션... 코드는 문제 없는데, 실제 화면에서는 왜 덜덜덜거릴까? See the Pen jank-animation-before by ylem76 (@ylem76) on CodePen. 후후... 임베드한 코드펜에서는 왜 멀쩡해보일까? ^^... 이런 걸 뭐라고 하나요? css를 이용해 애니메이션을 구현하다보면 예상치 못하게 덜덜덜 거리는 걸 볼 수 있다. 이런 문제를 두고 쟁크(jank)라고 하고, 브라우저 렌더링 단계 중 리플로우(레이아웃)와 관계가 있기 때문에 리플로우라고 검색해도 관련 내용을 찾을 수 있다. 원인 화면 주사율 스크린 기기는 1초에 화면을 60번씩 그린다. (화면주사율이 60Hz이라는 뜻은 이걸 말한다.) 스크린 기기는 1초에 60번을 그리.. 문제 해결 2021.06.16 css display none 애니메이션 오류 수정하기 오늘의 문제 display:none; display:block; 에 transition 애니메이션이 적용되지 않는다! See the Pen display none animation1 by ylem76 (@ylem76) on CodePen. 메뉴를 마우스 오버했을 때 하위 메뉴가 보이고, 마우스 아웃하면 사라지는 흔한 메뉴. 간단할 것 같아서 css transition으로 구현하려고 하는데, 애니메이션이 뚝뚝 끊기고 안 예쁘다..!!! 어째서 이런 현상이 발생하는 건지 원인을 알아보고 해결 방법을 고민해보았다. 문제 분석 display none에서만 생기는 트랜지션 오류 화면에 보이지 않게 만드는 방법은 여러 가지가 있다. display:none; opacity:0; visibility:hidden; tr.. 이전 1 다음