같은 CSS 변경, 다른 브라우저 작업
버튼 하나씩 눌러 색상·너비·이동을 비교해보세요. 변경은 누적되며 초기화로 되돌릴 수 있습니다.
직접 바꿔보기
점선은 초기 위치와 크기입니다. 주황색 이웃 상자가 밀리는지도 확인하세요.
현재 적용한 CSS
이 예제에서 확인할 것
색상 변경은 배치를 유지하고, 너비 변경은 이웃 상자를 밀어냅니다. transform은 원래 배치 공간을 유지한 채 상자를 시각적으로 이동시킵니다.
이 예제는 화면과 배치의 차이를 비교합니다. 렌더링 단계나 실행 시간을 측정하지 않으며, 화면 변화만으로 합성 단계에서만 처리됐다고 판단할 수는 없습니다.