리플로우(Reflow)와 리페인트(Repaint)가 실행되는 시점

1. 리플로우 (Reflow)
   
   • 리플로우란? 웹 페이지의 레이아웃을 재계산하는 과정
   • 레이아웃 과정에서는 각 요소의 위치와 차지하는 공간이 결정된다
     레이아웃을 재계산하는 리플로우 과정에서는 각 요소의 위치와 차지하는 공간이 변경된다
   • 리플로우가 발생하는 경우
     • DOM 변경: 새로운 요소를 추가하거나 제거할 때
     • 스타일 변경: 요소의 크기나 여백, 패딩, 보더 등의 CSS 속성을 변경할 때 (CSS 박스 모델의 속성값 변경)
     • 창 크기 조정: 브라우저의 크기를 변경할 때 (뷰포트 변경)
     • 폰트 변경: 폰트 패밀리나 폰트 크기를 변경할 때 (폰트 변경으로 해당 요소의 배치와 크기가 달라질 수 있기 때문에 리플로우가 발생한다)
     • 속성 변경: 요소의 display, position, float 등의 속성을 변경할 때 (렌더 트리 변경)
2. 리페인트 (Repaint)
   • 리페인트는 (1) 요소의 외관이 변경되지만 레이아웃에는 영향을 미치지 않을 때, (2) 리플로우가 발생한 후 새로운 레이아웃이 적용될 때 발생한다
   • 리페인트가 발생하는 경우
     • 스타일 변경: 요소의 색상, 배경색, 투명도, 그림자 등의 CSS 속성을 변경할 때
     • 콘텐츠 변경: 요소의 텍스트 내용이나 이미지가 변경될 때
     • CSS 애니메이션: CSS 애니메이션 효과가 발생할 때