Googling/html + css

[CSS] 위치 변경 속성 ( translate VS positioning (top & left) )

웹 브라우저 성능 관련해서 찾아보면 항상 언급되는 부분이 'Paint를 최소화해야 한다는 점'이다. Paint를 최소화 하기위해서는 최초 한번 그리는 부분 외 다시 그려야하는 경우를 줄여야 한다는 것을 의미한다. 무심코, css의 top, left를 활용하다보면 Painting을 다시하는 경우가 생겨 성능에 이슈를 만들 수 있는데, 요즘은 브라우져 성능들이 매우 좋아 체감으로 느끼기는 쉽지않다. 그럼에도 불구하고 성능 이슈는 티끌모아 태산일 수 있기에 최대한 top, left는 지양해야한다. 대신하여 쓸 수 있는것이 translate 이고, 정확한 코드는 아래와 같다. /* bad */ .item { top : 10px; left : 10px; } /* good */ .item { transform : ..