직장에서 디자인을 위해 아코디언 UI 를 구현해야하는 상황이었습니다. 데모영상 구현과정에서 알게된 점들을 적어봅니다. 1. height 속성에 Transition 효과 적용하기 CSS height 속성은 % 와 같은 상대값이 아닌 px 과 같은 절대값을 부여해야 트랜지션 효과가 적용됩니다. 문제는 클라이언트의 디바이스, 폰트 등의 요소에 따라서 height 값이 달라질 수 있기때문에 px 값을 미리 정의해두는 것은 불가능합니다. 때문에, max-height 값에다가 트랜지션 효과를 부여하는 대안이 있었습니다. // open max-height: 100vh (혹은 엄청나게 큰 절대 값, 999px) // cloase max-height: 0 그러나 열리는 모션과 닫히는 모션이 동시에 실행되는 경우, 타이밍..