마진상쇄 1 썸네일형 리스트형 문제 해결 2021.07.06 css 애니메이션 jank 해결하기 2편 : 여백 상쇄 이전 포스팅에서 다뤄봤던 Jank 현상은 앞서 말했던 방법으로 해결 가능하다. 그러나 더 간단한 방법이 있었으니... jank 현상이 일어났던 진짜 원인은 다른 데 있었다. 결론 결론 먼저 말하자면 여백 상쇄 현상을 제거하니 기존 코드에서도 jank가 발생하지 않았다. ...그런데 여백상쇄가 무엇일까? 이번에도 어렵게 돌아가기 스타트 margin collapse (마진 상쇄, 여백상쇄) margin collapse(이하 여백 상쇄)란, 수직으로 맞닿은 블록의 마진은 가장 큰 값으로 수렴한다는 뜻이다. 말이 더 어려운 것 같은데, 그림으로 살펴보면 다음과 같다. 위의 예시는 형제끼리 맞닿아 있을 때를 나타낸 것이고, 부모 자식 간에도 여백 상쇄가 일어난다. 부모와 자식이 맞닿아 있을 때에는 조금 특이한 현.. 이전 1 다음