TRANSITION

상황 설명 및 해결 방법CSS의 transition 속성은 요소의 상태 변화에 따른 시각적인 변화를 점진적으로 보여주기 위해 사용한다. 그러나 display 속성이 none에서 block 으로 변경될 때는 transition 속성을 사용해서 이 변화를 표현할 수 없다.display: none 속성은 렌더 트리에서 요소를 완전히 제거하여 화면에서 사라지게 만들고, 이로 인해 어떠한 CSS 속성도 적용되지 않는다. 렌더 트리에서 사라지면 요소의 상태 변화를 추적할 수 없기 때문에 transition 변화가 시작되는 지점 역시 찾을 수 없다.이 문제는 2가지 방법으로 해결할 수 있다.animation + display 사용 : animation 속성은 요소의 상태 변화와 상관없이 애니메이션 실행transiti..

요소 숨김 방식 차이점 렌더 트리리플로우리페인트이벤트 핸들러DOM 트리`display: none`제외발생발생비활성유지`visibility: hidden`유지발생 안함발생비활성유지`opacity: 0`유지발생 안함발생활성유지display: none렌더 트리 : 제외리플로우 : 발생 (렌더트리 상태가 변경됐으므로)리페인트 : 발생 (리플로우 발생시 리페인트도 함께 발생)이벤트 핸들러 : 비활성DOM 트리 : 유지 (자바스크립트로 조작 가능)visibility: hidden렌더 트리 : 유지 (화면에선 안보이지만 공간은 차지함)리플로우 : 발생 안함 (레이아웃에 영향을 미치지 않으므로)리페인트 : 발생 (요소가 보이지 않도록 변경했으므로)이벤트 핸들러 : 비활성DOM 트리 : 유지 (자바스크립트로 조작 가능)..